> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Personalización de la interfaz de usuario de Lock.Android

# Lock.Android: Temas personalizados

Puede personalizar la apariencia de la interfaz de usuario de **Lock.Android**. Además de varios elementos, como el logotipo y el título del encabezado, puede modificar algunos colores, botones y otros elementos para adaptarlos al tema de su aplicación.

<div id="supported-attributes-list">
  ## Lista de atributos compatibles
</div>

| Nombre                 | Tipo                 | Descripción                                                                                                                                             |
| ---------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Auth0.HeaderLogo       | drawable - reference | Recurso drawable del logotipo que se mostrará dentro del encabezado. La resolución mínima recomendada es de 200 píxeles (ancho) por 200 píxeles (alto). |
| Auth0.HeaderTitle      | string - reference   | Texto que se mostrará como título dentro del encabezado.                                                                                                |
| Auth0.HeaderTitleColor | color - reference    | Color del texto del título.                                                                                                                             |
| Auth0.HeaderBackground | color - reference    | Se utiliza como color de fondo del encabezado.                                                                                                          |
| Auth0.PrimaryColor     | color - reference    | Se utiliza para el estado *normal* en widgets como el botón Submit. También se utiliza como color de *acento*.                                          |
| Auth0.DarkPrimaryColor | color - reference    | Se utiliza para el estado *presionado* en widgets como el botón Submit.                                                                                 |

<div id="create-a-new-resource-file">
  ## Cree un nuevo archivo de recursos
</div>

Primero, cree un nuevo `Theme` que herede de `Lock.Theme` y sobrescriba los atributos que desee personalizar. Los atributos que no se sobrescriban usarán de forma predeterminada los definidos en `Lock.Theme`.

```xml lines theme={null}
<resources>
  <style name="MyTheme" parent="Lock.Theme">
    <item name="Auth0.HeaderLogo">@drawable/com_auth0_lock_header_logo</item>
    <item name="Auth0.HeaderTitle">@string/com_auth0_lock_header_title</item>
    <item name="Auth0.HeaderTitleColor">@color/com_auth0_lock_text</item>
    <item name="Auth0.HeaderBackground">@color/com_auth0_lock_header_background</item>
    <item name="Auth0.PrimaryColor">@color/com_auth0_lock_submit_normal</item>
    <item name="Auth0.DarkPrimaryColor">@color/com_auth0_lock_submit_pressed</item>
  </style>
</resources>
```

Para empezar a usar el nuevo tema, configure la actividad en el archivo `AndroidManifest.xml` con el atributo `android:theme`. Según use Classic Lock o <Tooltip tip="sin contraseña: Forma de autenticación que no depende de una contraseña como primer factor." cta="Ver glosario" href="/es/docs/glossary?term=Passwordless">sin contraseña</Tooltip> Lock, la declaración de la actividad que debe actualizar será distinta. Como la biblioteca Lock declara estas actividades internamente, debe volver a declararlas con el atributo especial tools`:replace`, que reemplazará la declaración de la biblioteca solo para el atributo de tema.

```xml lines theme={null}
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.company.app">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!-- Clásico -->
        <activity
            android:name="com.auth0.android.lock.LockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
        <!-- Sin contraseña -->
        <activity
            android:name="com.auth0.android.lock.PasswordlessLockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
    </application>
</manifest>
```

<Warning>
  Tenga en cuenta que, si define su propio Theme en un archivo de recursos de estilos y olvida especificar que el tema padre es `Lock.Theme`, o si olvida indicarle al Manifest cuál será el Theme de la Activity, acabará con una interfaz de usuario de muy mal aspecto. Esto también puede suceder si los valores que especifica en su Theme personalizado no son válidos.
</Warning>

<div id="custom-oauth-connection-buttons">
  ## Botones personalizados para conexiones OAuth
</div>

Para personalizar el estilo de una conexión de terceros con un <Tooltip tip="Proveedor de identidad (IdP): Servicio que almacena y gestiona identidades digitales." cta="Ver glosario" href="/es/docs/glossary?term=identity+provider">proveedor de identidad</Tooltip>, debe crear una nueva conexión mediante la extensión [`Custom Social Connections`](https://manage.auth0.com/#/extensions) y completar todos los campos obligatorios antes de guardar los cambios.

Para personalizar el estilo de una conexión de terceros con un proveedor de identidad en Lock, llame al builder y pase tanto `connectionName` como el `style` que desea usar.

Primero, cree un estilo personalizado que extienda `Lock.Theme.AuthStyle.` Defina el logotipo, el color de fondo y el nombre de la conexión usando nombres de clave similares al ejemplo siguiente.

```xml lines theme={null}
<style name="Style.Facebook" parent="Lock.Theme.AuthStyle">
    <item name="Auth0.BackgroundColor">@color/facebook_color</item>
    <item name="Auth0.Name">@string/facebook_name</item>
    <item name="Auth0.Logo">@drawable/facebook_logo</item>
</style>
```

En la configuración del builder, agregue el `AuthStyle` para el nombre de la conexión que quiera sobrescribir.

`builder.withAuthStyle("facebook", R.style.Style_Facebook)
.build(...);`

Cuando **Lock** necesite mostrar esa conexión en un **SocialButton**, primero buscará los estilos sobrescritos por el usuario. Si no encuentra ninguno, usará el estilo predeterminado de Lock. Siguiendo el ejemplo anterior, esto significa que para `facebook` usaría el color de fondo de Facebook, el logotipo de Facebook y "`FACEBOOK"` como nombre.