Lock.Android: Temas personalizados

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

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.

Lista de atributos compatibles

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.

Cree un nuevo archivo de recursos

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.

<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 sin contraseña 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.

<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>

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.

Botones personalizados para conexiones OAuth

Para personalizar el estilo de una conexión de terceros con un proveedor de identidad, debe crear una nueva conexión mediante la extensión Custom Social Connections 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.

<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.