> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Customizing the Lock.Android UI

# 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`.

```xml lines theme={null}
<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 <Tooltip tip="Passwordless: Form of authentication that does not rely on a password as the first factor." cta="View Glossary" href="/docs/glossary?term=Passwordless">Passwordless</Tooltip> 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.

```xml lines theme={null}
<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>
```

<Warning>
  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.
</Warning>

## Custom OAuth Connection Buttons

To customize the style of a third-party <Tooltip tip="Identity Provider (IdP): Service that stores and manages digital identities." cta="View Glossary" href="/docs/glossary?term=identity+provider">identity provider</Tooltip> connection, you must create a new connection by using the `Custom Social Connections` [extension](https://manage.auth0.com/#/extensions), 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.

```xml lines theme={null}
<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.