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.
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>
Was this helpful?
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>
Was this helpful?
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>
Was this helpful?
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.