Android のスタイルとテーマを使用すると、ウェブデザインのスタイルシートと同様に、アプリのデザインの詳細を UI の構造や動作から分離できます。
スタイルは、単一の View の外観を指定する属性の集合です。スタイルでは、フォントの色、フォントサイズ、背景色などの属性を指定できます。
テーマとは、個々のビューだけでなく、アプリ、アクティビティ、ビュー階層全体に適用される属性の集合です。テーマを適用すると、アプリまたはアクティビティのすべてのビューに、サポートされているテーマの各属性が適用されます。テーマでは、ステータスバーやウィンドウの背景など、ビュー以外の要素にもスタイルを適用できます。
スタイルとテーマは、res/values/ 内のスタイル リソース ファイル（通常は styles.xml という名前）で宣言します。
図 1. 同じアクティビティに適用される 2 つのテーマ: Theme.AppCompat（左）と Theme.AppCompat.Light（右）。
テーマとスタイル
テーマとスタイルには多くの類似点がありますが、用途はそれぞれ異なります。テーマとスタイルの基本構造は、属性をリソースにマッピングする Key-Value ペアです。
スタイルは、特定の種類のビューの属性を指定します。たとえば、あるスタイルでボタンの属性を指定するとします。スタイルで指定する属性はすべて、レイアウト ファイルで設定できる属性です。すべての属性を 1 つのスタイルに抽出すると、複数のウィジェットで簡単に使用でき、維持しやすくなります。
テーマは、スタイル、レイアウト、ウィジェットなどから参照できる名前付きリソースのコレクションを定義します。テーマでは、colorPrimary などのセマンティック名を Android リソースに割り当てます。
スタイルとテーマは連携して動作するように作られています。たとえば、ボタンのある部分を colorPrimary に、別の部分を colorSecondary に指定するスタイルがあるとします。これらの色の実際の定義は、テーマで提供されています。デバイスが夜間モードになると、アプリは「ライト」テーマから「ダーク」テーマに切り替わり、すべてのリソース名の値を変更できます。スタイルは特定の色の定義ではなくセマンティック名を使用しているため、スタイルを変更する必要はありません。
テーマとスタイルの連携について詳しくは、ブログ投稿 Android のスタイル設定: テーマとスタイルをご覧ください。
スタイルを作成して適用する
新しいスタイルを作成するには、プロジェクトの res/values/styles.xml ファイルを開きます。作成するスタイルごとに、次の手順を行います。
- スタイルを一意に識別する名前を持つ
<style>要素を追加します。 - 定義するスタイル属性ごとに
<item>要素を追加します。各アイテムのnameは、レイアウトで XML 属性として使用する属性を指定します。<item>要素の値はその属性の値です。
たとえば、次のスタイルを定義するとします。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="GreenText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#00FF00</item>
</style>
</resources>
次のようにスタイルをビューに適用できます。
<TextView
style="@style/GreenText"
... />
スタイルで指定された各属性は、ビューが受け入れる場合、そのビューに適用されます。ビューは、受け入れない属性を無視します。
ただし、通常は、個々のビューにスタイルを適用するのではなく、このガイドの別のセクションで説明するように、アプリ全体、アクティビティ、またはビューのコレクションにスタイルをテーマとして適用します。
スタイルを拡張しカスタマイズする
独自のスタイルを作成する場合は、プラットフォーム UI スタイルとの互換性を維持するため、必ずフレームワークまたはサポート ライブラリから既存のスタイルを拡張してください。スタイルを拡張するには、parent 属性で拡張するスタイルを指定します。その後、継承したスタイル属性をオーバーライドして、新しい属性を追加できます。
たとえば、Android プラットフォームのデフォルトのテキスト表示を継承して、次のように変更できます。
<style name="GreenText" parent="@android:style/TextAppearance">
<item name="android:textColor">#00FF00</item>
</style>
ただし、コアアプリのスタイルは常に Android サポート ライブラリから継承します。サポート ライブラリのスタイルでは、各バージョンで使用可能な UI 属性に合わせて各スタイルを最適化することで、互換性を確保します。多くの場合、サポート ライブラリのスタイルには、プラットフォームのスタイルと似た名前が付けられますが、AppCompat が含まれています。
ライブラリまたは独自のプロジェクトからスタイルを継承するには、前の例で示した @android:style/ 部分なしで親スタイル名を宣言します。たとえば次の例では、サポート ライブラリからテキストの外観のスタイルを継承しています。
<style name="GreenText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#00FF00</item>
</style>
parent 属性を使用する代わりに、ドット表記でスタイル名を拡張することで、プラットフォームからのものを除き、スタイルを継承することもできます。つまり、スタイル名の前に、継承するスタイルの名前をピリオドで区切って追加します。これは通常、独自のスタイルを拡張するときにのみ行います。他のライブラリからのスタイルを拡張することはありません。たとえば、次のスタイルは、前の例の GreenText からすべてのスタイルを継承し、テキストサイズを大きくしています。
<style name="GreenText.Large">
<item name="android:textSize">22dp</item>
</style>
さらに多くの名前を連鎖させることで、このようなスタイルを必要に応じて何度でも継承できます。
<item> タグで宣言できる属性については、各種クラス参照の「XML 属性」の表をご覧ください。すべてのビューは基本の View クラスの XML 属性をサポートしており、多くのビューは独自の特別な属性を追加します。たとえば、TextView XML 属性には、入力を受け取るテキストビュー（EditText ウィジェットなど）に適用できる android:inputType 属性が含まれています。
スタイルをテーマとして適用する
テーマは、スタイルの作成と同じ方法で作成できます。違いは、ビューの style 属性でスタイルを適用するのではなく、AndroidManifest.xml ファイルの <application> タグまたは <activity> タグで android:theme 属性を使用してテーマを適用する点です。
たとえば、Android サポート ライブラリのマテリアル デザインの「ダーク」テーマをアプリ全体に適用する方法を次に示します。
<manifest ... >
<application android:theme="@style/Theme.AppCompat" ... >
</application>
</manifest>
また、「ライト」テーマを 1 つのアクティビティのみに適用する方法は次のとおりです。
<manifest ... >
<application ... >
<activity android:theme="@style/Theme.AppCompat.Light" ... >
</activity>
</application>
</manifest>
アプリやアクティビティのすべてのビューは、特定のテーマで定義されているスタイルから、サポートするスタイルを適用します。ビューがスタイルで宣言された属性の一部しかサポートしていない場合、それらの属性のみが適用され、サポートされていない属性は無視されます。
Android 5.0（API レベル 21）と Android サポート ライブラリ v22.1 以降では、レイアウト ファイル内のビューに android:theme 属性を指定することもできます。これにより、そのビューとすべての子ビューのテーマが変更されます。インターフェースの特定の部分のテーマ カラーパレットを変更する場合に便利です。
上記の例は、Android サポート ライブラリが提供する Theme.AppCompat などのテーマを適用する方法を示しています。ただし、通常はアプリのブランドに合わせてテーマをカスタマイズします。そのためには、次のセクションで説明するように、サポート ライブラリからこれらのスタイルを拡張し、一部の属性をオーバーライドするのが最善の方法です。
スタイル階層
Android では、Android アプリ全体で属性を設定するさまざまな方法が用意されています。たとえば、レイアウト内での属性の直接設定、ビューへのスタイルの適用、レイアウトへのテーマの適用、プログラムによる属性の設定などを行うことができます。
アプリのスタイル設定方法を選択するときは、Android のスタイル階層に注意してください。一般的に、一貫性を保つため、テーマとスタイルをできる限り使用してください。同じ属性を複数の場所で指定した場合、最終的に適用される属性は次のリストによって決まります。このリストは、優先順位が高いものから最も低いものの順に並べられます。
TextViewから派生したクラスへの、テキストスパンを使用した文字レベルまたは段落レベルのスタイル設定の適用- プログラムによる属性の適用。
- 個々の属性をビューに直接適用する。
- ビューにスタイルを適用する
- デフォルトのスタイル。
- ビューのコレクション、アクティビティ、またはアプリ全体にテーマを適用する。
TextViewでTextAppearanceを設定するなど、特定のビュー固有のスタイル設定を適用する。
図 2. span によるスタイル設定は textAppearance によるスタイル設定をオーバーライドします。
TextAppearance
スタイルに関する制限として、View にはスタイルを 1 つしか適用できません。ただし、TextView では、次の例に示すように、スタイルと同様に機能する TextAppearance 属性を指定することもできます。
<TextView
...
android:textAppearance="@android:style/TextAppearance.Material.Headline"
android:text="This text is styled via textAppearance!" />
TextAppearance を使用すると、View のスタイルを他の用途に使用しながら、テキスト固有のスタイル設定を定義できます。ただし、View に直接、またはスタイルでテキスト属性を定義すると、それらの値は TextAppearance 値よりも優先されます。
TextAppearance は、TextView が提供するスタイル設定属性のサブセットをサポートします。属性の完全なリストについては、TextAppearance をご覧ください。
含まれていない一般的な TextView 属性には、lineHeight[Multiplier|Extra]、lines、breakStrategy、hyphenationFrequency があります。TextAppearance は段落レベルではなく文字レベルで機能するため、レイアウト全体に影響する属性はサポートされません。
デフォルトのテーマをカスタマイズする
Android Studio でプロジェクトを作成すると、プロジェクトの styles.xml ファイルで定義されているように、デフォルトでマテリアル デザインのテーマがアプリに適用されます。この AppTheme スタイルは、サポート ライブラリのテーマを拡張し、アプリバーやフローティング アクション ボタン（使用する場合）などの主要な UI 要素で使用される色属性のオーバーライドを含みます。そのため、提供されている色を更新することで、アプリのカラーデザインをすばやくカスタマイズできます。
たとえば、styles.xml ファイルは次のようになります。
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
スタイル値は、実際にはプロジェクトの res/values/colors.xml ファイルで定義された他のカラーリソースへの参照です。このファイルの色を変更するために編集します。ダイナミック カラーと追加のカスタムカラーを使用してユーザー エクスペリエンスを改善するには、マテリアル デザイン カラーの概要をご覧ください。
色を確認したら、res/values/colors.xml の値を更新します。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Color for the app bar and other primary UI elements. -->
<color name="colorPrimary">#3F51B5</color>
<!-- A darker variant of the primary color, used for
the status bar (on Android 5.0+) and contextual app bars. -->
<color name="colorPrimaryDark">#303F9F</color>
<!-- a secondary color for controls like checkboxes and text fields. -->
<color name="colorAccent">#FF4081</color>
</resources>
その後、必要に応じて他のスタイルをオーバーライドできます。たとえば、アクティビティの背景色を次のように変更できます。
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:windowBackground">@color/activityBackground</item>
</style>
テーマで使用できる属性の一覧については、R.styleable.Theme の属性の表をご覧ください。レイアウト内にビューのスタイルを追加する場合、ビュークラス参照の「XML 属性」テーブルで属性を見つけることもできます。たとえば、すべてのビューは基本の View クラスの XML 属性をサポートしています。
ほとんどの属性は特定のタイプのビューに適用され、一部の属性はすべてのビューに適用されます。ただし、R.styleable.Theme にリストされている一部のテーマ属性は、レイアウト内のビューではなく、アクティビティ ウィンドウに適用されます。たとえば、windowBackground はウィンドウの背景を変更し、windowEnterTransition はアクティビティの開始時に使用する遷移アニメーションを定義します。詳しくは、アニメーションを使用してアクティビティを開始するをご覧ください。
Android サポート ライブラリには、前の例で示した colorPrimary 属性など、Theme.AppCompat から拡張されたテーマのカスタマイズに使用できるその他の属性も用意されています。これらを表示するには、ライブラリの attrs.xml ファイルをご覧ください。
サポート ライブラリには、前の例に示されているテーマの代わりに拡張できるさまざまなテーマもあります。使用可能なテーマを確認するには、ライブラリの themes.xml ファイルをご覧ください。
バージョン固有のスタイルを追加する
使用したいテーマ属性が新しいバージョンの Android で追加された場合は、古いバージョンと互換性を維持したまま、その属性をテーマに追加できます。必要なのは、リソース バージョン修飾子を含む values ディレクトリに保存された別の styles.xml ファイルだけです。
res/values/styles.xml # themes for all versions res/values-v21/styles.xml # themes for API level 21+ only
values/styles.xml ファイルのスタイルはすべてのバージョンで使用できるため、values-v21/styles.xml のテーマはスタイルを継承できます。つまり、「ベース」テーマから始めて、バージョン固有のスタイルで拡張することで、スタイルの重複を回避できます。
たとえば、Android 5.0（API レベル 21）以降のウィンドウ遷移を宣言するには、新しい属性を使用する必要があります。したがって、res/values/styles.xml のベーステーマは次のようになります。
<resources>
<!-- Base set of styles that apply to all versions. -->
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryTextColor</item>
<item name="colorAccent">@color/secondaryColor</item>
</style>
<!-- Declare the theme name that's actually applied in the manifest file. -->
<style name="AppTheme" parent="BaseAppTheme" />
</resources>
次に、res/values-v21/styles.xml にバージョン固有のスタイルを次のように追加します。
<resources>
<!-- extend the base theme to add styles available only with API level 21+ -->
<style name="AppTheme" parent="BaseAppTheme">
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">@android:transition/slide_right</item>
<item name="android:windowExitTransition">@android:transition/slide_left</item>
</style>
</resources>
これで、マニフェスト ファイルで AppTheme を適用できるようになりました。これにより、各システム バージョンで使用可能なスタイルがシステムによって選択されます。
デバイスごとの代替リソースの使用について詳しくは、代替リソースの指定をご覧ください。
ウィジェット スタイルをカスタマイズする
フレームワークとサポート ライブラリのすべてのウィジェットにはデフォルトのスタイルがあります。たとえば、サポート ライブラリのテーマを使用してアプリのスタイルを設定する場合、Button のインスタンスは Widget.AppCompat.Button スタイルを使用してスタイルが設定されます。別のウィジェット スタイルをボタンに適用する場合は、レイアウト ファイルの style 属性を使用します。たとえば、以下では、ライブラリの枠線なしボタンのスタイルを適用します。
<Button
style="@style/Widget.AppCompat.Button.Borderless"
... />
このスタイルをすべてのボタンに適用する場合は、テーマの buttonStyle で次のように宣言します。
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
...
</style>
他のスタイルを拡張する場合と同様に、ウィジェット スタイルを拡張してから、レイアウトまたはテーマにカスタム ウィジェット スタイルを適用することもできます。
参考情報
テーマとスタイルについて詳しくは、以下の参考リンクをご覧ください。