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

Lock.Android UI のカスタマイズ

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

サポート対象の属性一覧

名前	型	説明
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 ボタンなどのウィジェットで、押下 状態として使用されます。

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

まず、Lock.Theme を拡張した新しい Theme を作成し、カスタマイズしたい属性を上書きします。上書きしない属性には、Lock.Theme で定義されているものが既定で使用されます。

<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 と パスワードレス Lock のどちらを使用しているかによって、更新する Activity の宣言は異なります。Lock ライブラリはこれらの Activity を内部で宣言しているため、テーマ属性のみについてライブラリの宣言を上書きする特別な tools:replace 属性を使用して、これらを再宣言する必要があります。

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

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

カスタムOAuth接続ボタン

サードパーティのアイデンティティプロバイダー接続のスタイルをカスタマイズするには、Custom Social Connections 拡張機能を使用して新しい接続を作成し、変更を保存する前に必須項目をすべて入力する必要があります。

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

まず、Lock.Theme.AuthStyle. を拡張するカスタムスタイルを作成します。以下の例にならったキー名で、ロゴ、背景色、接続名を定義します。

<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” が使用されます。