Lock Android v2 Custom Theming
The Lock.Android UI is very customizable. Various items such as the header logo and title, some colors, buttons, and other items can be altered.
Supported attributes list
|Auth0.HeaderLogo||drawable - reference||Logo drawable to display inside the header.|
|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 you need to create a new
Theme that extends from
Lock.Theme, and override the attributes you want to customize.
Then, you need to tell the Manifest that you want to use the new
MyTheme in the
Activity. This is very important!!
Pay Attention to the 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.
To customize OAuth connection styles in Lock you can call the builder passing both the
connectionName and the
style to use.
First create a custom style extending
Lock.Theme.AuthStyle and define the logo, background color and name of the connection.
Now in the builder's setup add the
AuthStyle for the connection name that you want to override.
When Lock needs to display that connection in a SocialButton, it will first search for user-overridden styles, and if none are found, it will default to the Lock social defaults. This means that for
As the builder method receives the
connectionName you can then customize
oauth2 strategy type connections. The default values for this strategy (if none are provided) are the Auth0 logo, Auth0 background color, and
OAUTH2 as the name.