Lock.Android: thème personnalisé

Vous pouvez personnaliser l’apparence de l’interface utilisateur de Lock.Android. Outre divers éléments tels que 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.

| Nom | Type | Description | | :--- | :--- : | :--- | |Auth0.HeaderLogo | drawable - reference | Peignable de logo à afficher dans l’en-tête. La résolution minimale recommandée est de 200 pixels (largeur) par 200 pixels (hauteur). | |Auth0.HeaderTitle | string - référence | Texte à afficher comme titre dans l’en-tête. | |Auth0.HeaderTitleColor | color - reference | Couleur pour le texte du titre. |Auth0.HeaderBackground | color - reference | Utilisé comme couleur d’arrière-plan dans l’en-tête. | |Auth0.PrimaryColor | color - reference | Utilisé comme normal state dans les widgets comme le bouton Soumettre. Également utilisée comme accent color. | |Auth0.DarkPrimaryColor | couleur - référence | Utilisée en tant qu’état pressed state dans les widgets tels que le bouton Soumettre. |

Tout d’abord, créez un nouveau Theme basé sur Lock.Theme et modifiez les attributs que vous souhaitez personnaliser. Les attributs qui n’ont pas été modifiés prendront 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>

To start using the new theme, set up the Activity in the AndroidManifest.xml file with the android:theme attribute. Depending on if you are using Classic Lock or Passwordless Lock, the activity declaration to update will differ. Because the Lock library declares these activities internally, you need to re-declare them with the special tools:replace attribute that will override the library’s declaration only for the theme attribute.

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

Pour personnaliser le style de la connexion d’un fournisseur d’identité tiers, vous devez créer une nouvelle connexion en utilisant l’extensionCustom Social Connections, en remplissant tous les champs requis avant d’enregistrer les modifications.

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

Tout d’abord, créez un style personnalisé qui étend Lock.Theme.AuthStyle. Définissez le logo, la couleur de fond et le nom de la connexion en utilisant des noms de clés similaires à 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>

In the builder’s setup, add the AuthStyle for the connection name that you want to override.

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

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