Lock.Android: Custom Theming

Customizing the Lock.Android UI

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.

Supported attributes list

Name	Type	Description
Auth0.HeaderLogo	drawable - reference	Logo drawable to display inside the header. The minimum recommended resolution is 200 pixels (width) by 200 pixels (height).
Auth0.HeaderTitle	string - reference	Text to display as Title inside the header.
Auth0.HeaderTitleColor	color - reference	Color for the Title text.
Auth0.HeaderBackground	color - reference	Used as background color in the header.
Auth0.PrimaryColor	color - reference	Used as normal state in widgets like the Submit button. Also used as accent color.
Auth0.DarkPrimaryColor	color - reference	Used as pressed state in widgets like the Submit button.

Create a New Resource File

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>

Please note that if you define your own Theme in a style resource file and forget to specify that the Theme’s parent is Lock.Theme, or you forget to tell the Manifest which will be the Theme for the Activity, you will end up with a really bad looking UI. This may also happen if the values you specify in your custom Theme are invalid.

Custom OAuth Connection Buttons

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.