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

# Lock.Android:カスタムテーマ設定

> Lock.Android UIのカスタマイズ

**Lock.Android** UIの外観はカスタマイズすることができます。ヘッダーロゴやタイトルなどの様々な項目に加え、一部の色やボタンなどの項目も、アプリケーションのテーマに合わせて変更できます。

## サポートされる属性のリスト

| 名前                       |          タイプ         | 説明                                                                               |
| :----------------------- | :------------------: | :------------------------------------------------------------------------------- |
| `Auth0.HeaderLogo`       | drawable - reference | ヘッダー内に表示する描画可能なロゴ。推奨される最小解像度は200ピクセル（幅） x 200ピクセル（高さ）です。                         |
| `Auth0.HeaderTitle`      |  string - reference  | ヘッダー内にタイトルとして表示するテキスト。                                                           |
| `Auth0.HeaderTitleColor` |   color - reference  | タイトルテキストの色。                                                                      |
| `Auth0.HeaderBackground` |   color - reference  | ヘッダーのバックグラウンドカラーとして使用される。                                                        |
| `Auth0.PrimaryColor`     |   color - reference  | Submit（送信）ボタンといったウィジェットの\_normal\_ stateとして使用される。<em>accent</em> colorとしても使用される。 |
| `Auth0.DarkPrimaryColor` |   color - reference  | Submit（送信）ボタンといったウィジェットの\_pressed\_ stateとして使用される。                               |

## 新しいリソースファイルを作成する

まず、`Lock.Theme`から拡張する新しい`Theme`を作成し、カスタマイズする属性をオーバーライドします。オーバーライドしない属性は、`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>
```

新しいテーマを使用するには、`android:theme`属性を使用して`AndroidManifest.xml`ファイルでアクティビティをセットアップします。使用するのがクラシックLockかパスワードレスLockかに応じて、更新するアクティビティ宣言が異なります。Lockライブラリーはこれらのアクティビティを内部で宣言するため、テーマ属性のみのライブラリーの宣言をオーバーライドする特別な`tools:replace`属性を使用して、アクティビティを再度宣言する必要があります。

```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>
  スタイルリソースファイルに独自のテーマを定義し、テーマの親が`Lock.Theme`であることを指定し忘れた場合、またはマニフェストファイルでアクティビティのテーマを指定しなかった場合は、UIが非常に見づらくなるので注意してください。カスタムテーマで無効な値を指定した場合も、同様のことが起こります。
</Warning>

## OAuth接続のカスタムボタン

サードパーティのIDプロバイダー接続のスタイルをカスタマイズするには、新しい接続を作成しなければなりません。これには`Custom Social Connections`[拡張機能](https://manage.auth0.com/#/extensions)を使用して、すべての必須フィールドに入力した上で変更を保存します。

LockでサードパーティのIDプロバイダー接続のスタイルをカスタマイズするには、ビルダーを呼び出し、使用する`connectionName`と`style`を両方渡します。

まず、`Lock.Theme.AuthStyle`を拡張するカスタムスタイルを作成します。以下の例のようなキーの名前を使用して、ロゴ、背景色、接続名を定義します。

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

ビルダーのセットアップ画面で、オーバーライドする接続名の`AuthStyle`を追加します。

`builder.withAuthStyle("facebook", R.style.Style_Facebook)
.build(...);`

**Lock** がその接続を**SocialButton** に表示する必要がある場合、まずユーザーがオーバーライドしたスタイルが検索されます。見つからない場合は、Lockのデフォルトのスタイルになります。上の`facebook`の例では、Facebookの背景色、Facebookのロゴ、および「`FACEBOOK`」の名前が使用されることになります。