> ## 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    | 送信ボタンなどのウィジェットで *通常* 状態に使用されます。*アクセント* カラーとしても使用されます。          |
| Auth0.DarkPrimaryColor | color - reference    | 送信ボタンなどのウィジェットで *押下* 状態に使用されます。                                |

<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="/ja/docs/glossary?term=Passwordless">パスワードレス</Tooltip> Lock のどちらを使用しているかによって、更新する Activity の宣言は異なります。Lock ライブラリではこれらの Activity が内部的に宣言されているため、テーマ属性だけをライブラリの宣言より優先させる特別な `tools`:replace\` 属性を使って、これらの Activity を再宣言する必要があります。

```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>
  スタイルリソースファイルで独自のテーマを定義する場合は、テーマの親に `Lock.Theme` を指定し忘れたり、Activity に適用するテーマをマニフェストで指定し忘れたりすると、UIの見た目が著しく損なわれる可能性があります。これは、カスタムテーマで指定した値が無効な場合にも発生することがあります。
</Warning>

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

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

Lock でサードパーティの IDプロバイダー接続のスタイルをカスタマイズするには、builder を呼び出して、使用する `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"` が使用されます。