> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

# Lock.Android: テーマのカスタマイズ

**Lock.Android** UI の見た目や使い勝手はカスタマイズできます。ヘッダーロゴやタイトルをはじめ、色やボタンなどを変更して、アプリケーションのテーマに合わせることができます。

<div id="supported-attributes-list">
  ## サポート対象の属性一覧
</div>

| 名前                     | 型                    | 説明                                                              |
| ---------------------- | -------------------- | --------------------------------------------------------------- |
| Auth0.HeaderLogo       | drawable - reference | ヘッダー内に表示するロゴの drawable。推奨される最小解像度は、幅 200 ピクセル、高さ 200 ピクセルです。    |
| Auth0.HeaderTitle      | string - reference   | ヘッダー内にタイトルとして表示するテキスト。                                          |
| Auth0.HeaderTitleColor | color - reference    | タイトルのテキスト色。                                                     |
| Auth0.HeaderBackground | color - reference    | ヘッダーの背景色として使用されます。                                              |
| Auth0.PrimaryColor     | color - reference    | Submit ボタンなどのウィジェットで、*通常* 状態として使用されます。また、*アクセント* カラーとしても使用されます。 |
| Auth0.DarkPrimaryColor | color - reference    | Submit ボタンなどのウィジェットで、*押下* 状態として使用されます。                          |

<div id="create-a-new-resource-file">
  ## 新しいリソースファイルを作成する
</div>

まず、`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>
```

新しいテーマを使い始めるには、`AndroidManifest.xml` ファイルで `android:theme` 属性を使用して Activity を設定します。Classic Lock と <Tooltip tip="パスワードレス: 第一の認証要素としてパスワードに依存しない認証の形式。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Passwordless">パスワードレス</Tooltip> Lock のどちらを使用しているかによって、更新する Activity の宣言は異なります。Lock ライブラリはこれらの Activity を内部で宣言しているため、テーマ属性のみについてライブラリの宣言を上書きする特別な 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" />
        <!-- パスワードレス -->
        <activity
            android:name="com.auth0.android.lock.PasswordlessLockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
    </application>
</manifest>
```

<Warning>
  スタイルリソースファイルで独自のThemeを定義する場合は、その親として `Lock.Theme` を指定し忘れたり、Activity に適用するThemeをManifestで指定し忘れたりすると、UI が非常に見栄えの悪いものになってしまうので注意してください。これは、独自のThemeに指定した値が無効な場合にも起こりえます。
</Warning>

<div id="custom-oauth-connection-buttons">
  ## カスタムOAuth接続ボタン
</div>

サードパーティの<Tooltip tip="IDプロバイダー（IdP）: デジタルアイデンティティを保存および管理するサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=identity+provider">アイデンティティプロバイダー</Tooltip>接続のスタイルをカスタマイズするには、`Custom Social Connections` [拡張機能](https://manage.auth0.com/#/extensions)を使用して新しい接続を作成し、変更を保存する前に必須項目をすべて入力する必要があります。

Lock でサードパーティのアイデンティティプロバイダー接続のスタイルをカスタマイズするには、ビルダーを呼び出し、使用する `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>
```

builder の設定で、上書きしたい接続名に対応する `AuthStyle` を追加します。

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

**Lock** がその接続を **SocialButton** に表示する必要がある場合、まずユーザーが上書きしたスタイルを探します。見つからない場合は、Lock のデフォルトスタイルが使用されます。上の例では、`facebook` には Facebook の背景色、Facebook のロゴ、そして名前として "`FACEBOOK`" が使用されます。