Lock.Android: Personnalisation du thème

Personnalisation de l’interface utilisateur de Lock.Android

Vous pouvez personnaliser l’apparence de l’interface utilisateur de Lock.Android. En plus de divers éléments comme le logo et le titre de l’en-tête, vous pouvez modifier certaines couleurs, certains boutons et d’autres éléments pour les adapter au thème de votre application.

Liste des attributs pris en charge

Nom	Type	Description
Auth0.HeaderLogo	drawable - reference	Ressource drawable du logo à afficher dans l’en-tête. La résolution minimale recommandée est de 200 pixels (largeur) sur 200 pixels (hauteur).
Auth0.HeaderTitle	string - reference	Texte à afficher comme titre dans l’en-tête.
Auth0.HeaderTitleColor	color - reference	Couleur du texte du titre.
Auth0.HeaderBackground	color - reference	Utilisée comme couleur d’arrière-plan dans l’en-tête.
Auth0.PrimaryColor	color - reference	Utilisée pour l’état normal dans des widgets comme le bouton Submit. Également utilisée comme couleur d’accent.
Auth0.DarkPrimaryColor	color - reference	Utilisée pour l’état appuyé dans des widgets comme le bouton Submit.

Créer un nouveau fichier de ressources

Commencez par créer un nouveau Theme qui étend Lock.Theme, puis redéfinissez les attributs que vous souhaitez personnaliser. Les attributs que vous ne redéfinissez pas utiliseront par défaut ceux définis dans 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>

Pour commencer à utiliser le nouveau thème, configurez l’Activity dans le fichier AndroidManifest.xml à l’aide de l’attribut android:theme. Selon que vous utilisez Classic Lock ou Passwordless Lock, la déclaration d’activité à mettre à jour ne sera pas la même. Comme la bibliothèque Lock déclare ces activités en interne, vous devez les redéclarer à l’aide de l’attribut spécial tools:replace, qui remplacera la déclaration de la bibliothèque uniquement pour l’attribut de thème.

<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">
        <!-- Classique -->
        <activity
            android:name="com.auth0.android.lock.LockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
        <!-- Passwordless -->
        <activity
            android:name="com.auth0.android.lock.PasswordlessLockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
    </application>
</manifest>

Veuillez noter que si vous définissez votre propre thème dans un fichier de ressources de style et que vous oubliez de préciser que le parent du thème est Lock.Theme, ou que vous oubliez d’indiquer dans le manifeste quel thème sera utilisé pour l’activité, vous vous retrouverez avec une interface utilisateur vraiment peu esthétique. Cela peut aussi se produire si les valeurs que vous spécifiez dans votre thème personnalisé sont invalides.

Boutons de connexion OAuth personnalisés

Pour personnaliser le style d’une connexion à un fournisseur d’identité tiers, vous devez créer une nouvelle connexion à l’aide de l’extension Custom Social Connections, en remplissant tous les champs obligatoires avant d’enregistrer les modifications.

Pour personnaliser le style d’une connexion à un fournisseur d’identité tiers dans Lock, appelez le builder en lui transmettant à la fois connectionName et le style à utiliser.

Commencez par créer un style personnalisé qui étend Lock.Theme.AuthStyle. Définissez le logo, la couleur d’arrière-plan et le nom de la connexion à l’aide de noms de clés semblables à ceux de l’exemple ci-dessous.

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

Dans la configuration du builder, ajoutez le AuthStyle pour le nom de la connexion que vous souhaitez surcharger.

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

Lorsque Lock doit afficher cette connexion dans un SocialButton, il recherche d’abord les styles surchargés par l’utilisateur. S’il n’en trouve aucun, il utilisera le style Lock par défaut. En reprenant l’exemple ci-dessus, cela signifie que pour facebook, il utiliserait la couleur d’arrière-plan de Facebook, le logo Facebook et “FACEBOOK" comme nom.