Lock.Android : personnalisation du thème

Personnalisation de l’UI de Lock.Android

Vous pouvez personnaliser l’apparence de l’UI 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 harmoniser avec le thème de votre application.

Liste des attributs pris en charge

Nom	Type	Description
Auth0.HeaderLogo	drawable - référence	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 - référence	Texte à afficher comme titre dans l’en-tête.
Auth0.HeaderTitleColor	couleur - référence	Couleur du texte du titre.
Auth0.HeaderBackground	couleur - référence	Utilisée comme couleur d’arrière-plan de l’en-tête.
Auth0.PrimaryColor	couleur - référence	Utilisée comme état normal dans des widgets comme le bouton de soumission. Également utilisée comme couleur d’accent.
Auth0.DarkPrimaryColor	couleur - référence	Utilisée comme état appuyé dans des widgets comme le bouton de soumission.

Créer un nouveau fichier de ressources

Commencez par créer un nouveau Theme qui hérite de Lock.Theme, puis redéfinissez les attributs que vous souhaitez personnaliser. Les attributs qui ne sont pas redéfinis reprendront 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’activité 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é à modifier sera différente. Comme la bibliothèque Lock déclare déjà 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">
        <!-- Classic -->
        <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 Theme dans un fichier de ressources de style et oubliez de préciser que le parent du Theme est Lock.Theme, ou si vous oubliez d’indiquer dans le Manifest quel Theme utiliser pour l’Activity, vous vous retrouverez avec une UI vraiment peu esthétique. Cela peut aussi se produire si les valeurs spécifiées dans votre Theme personnalisé ne sont pas valides.

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 requis avant d’enregistrer les modifications.

Pour personnaliser le style d’une connexion à un fournisseur d’identité tiers dans Lock, appelez le builder et transmettez-lui connectionName ainsi que le style à utiliser.

Créez d’abord un style personnalisé qui étend Lock.Theme.AuthStyle. Définissez le logo, la couleur d’arrière-plan et le nom de la connexion en utilisant des 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 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 alors le style par défaut de Lock. D’après 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.