Lock.Android: Custom Theming

You can customize the look and feel of Lock.Android UI. Along with various items such as the header logo and title, you can alter some colors, buttons, and other items to fit the theme of your application.

First, create a new Theme that extends from Lock.Theme, and override the attributes you want to customize. Those attributes not overridden will default to the ones defined in 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>

To customize the style of a third-party identity provider connection, you must create a new connection by using the Custom Social Connections extension, filling in every required field before saving the changes.

To customize the style of a third-party identity provider connection in Lock, call the builder and pass both the connectionName and the style to use.

First, create a custom style that extends Lock.Theme.AuthStyle. Define the logo, background color, and name of the connection using names of the keys similar to the example below.

<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(...);

When Lock needs to display that connection in a SocialButton, it will first search for user-overridden styles. If none is found, it will default to the default Lock style. Following the example above, this means that for facebook it would use the Facebook background color, Facebook logo and "FACEBOOK" as name.