Android のスタイルとテーマを使用すると、ウェブデザインのスタイルシートと同様に、アプリ設計の詳細を UI の構造や動作から分離できます。
スタイルとは、単一の View の外観を指定する属性の集まりです。スタイルでは、フォントの色、フォントサイズ、背景色などの属性を指定できます。
テーマとは、個々のビューだけでなく、アプリ全体、アクティビティ、ビュー階層に適用される属性の集まりです。テーマを適用すると、アプリやアクティビティ内のすべてのビューに、サポートしているテーマの各属性が適用されます。テーマでは、ステータスバーやウィンドウの背景など、ビュー以外の要素にもスタイルを適用できます。
スタイルとテーマは、res/values/ のスタイル リソース ファイル（通常は styles.xml という名前）で宣言されます。
図 1. 同じアクティビティに適用される 2 つのテーマ: Theme.AppCompat（左）と Theme.AppCompat.Light（右）。
テーマとスタイル
テーマとスタイルには多くの類似点がありますが、用途は異なります。テーマとスタイルの基本構造は同じです。つまり、属性をリソースにマッピングする Key-Value ペアです。
スタイルは、特定のタイプのビューの属性を指定します。たとえば、あるスタイルでボタンの属性を指定することがあります。スタイルに指定するすべての属性は、レイアウト ファイルで設定できる属性になります。スタイル内のすべての属性を抽出すると、属性を簡単に使用し、複数のウィジェットで管理できるようになります。
テーマは、スタイル、レイアウト、ウィジェットなどで参照できる名前付きリソースのコレクションを定義します。テーマでは、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 ディレクトリに保存されているもう 1 つの 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>
他のスタイルを拡張するようにウィジェットのスタイルを拡張してから、レイアウトやテーマにカスタム ウィジェット スタイルを適用することもできます。
参考情報
テーマとスタイルについて詳しくは、以下の参考情報をご覧ください。