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

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

まず、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` 属性を使って、これらの Activity を再宣言する必要があります。

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

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

カスタム OAuth 接続ボタン

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

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