Android のスタイルとテーマを使用すると、ウェブデザインのスタイルシートと同様に、UI 構造と動作からアプリデザインの詳細を分離できます。
スタイルとは、単一の View の外観を指定する属性の集まりです。スタイルでは属性を指定できる
フォントの色、フォントサイズ、背景色などを設定できます。
テーマとは、アプリ全体、アクティビティ、ビューに適用される属性の集まりのことです。 ビューだけではありません。テーマを適用すると、アプリ内のビューや アクティビティは、サポートするテーマの各属性を適用します。テーマでは、ステータスバーやウィンドウ バックグラウンドなど、ビュー以外の要素にもスタイルを適用できます。
スタイルとテーマは
スタイル リソース ファイルを
res/values/（通常は styles.xml）。
図 1. 同じアクティビティに適用された 2 つのテーマ: Theme.AppCompat（左）、Theme.AppCompat.Light（右）。
テーマとスタイル
テーマとスタイルには多くの類似点がありますが、用途はそれぞれ異なります。テーマと スタイルの基本構造は同じです。つまり、属性を属性にマッピングする Key-Value ペアです。 リソースをご覧ください。
スタイルは、特定の種類のビューの属性を指定します。たとえば、1 つのスタイルで 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 サポート ライブラリから継承します。モジュールのスタイルは、
サポート ライブラリは、
確認できます。多くの場合、サポート ライブラリのスタイルはプラットフォームのスタイルと名前が似ていますが、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 属性」の表をご覧ください。すべてのビューのサポート
基本の XML 属性
View クラスであり、多くのビューは独自の特別な属性を追加します。たとえば、TextView XML 属性には android:inputType 属性が含まれており、これは EditText ウィジェットなどの入力を受け取るテキストビューに適用できます。
スタイルをテーマとして適用する
テーマは、スタイルの作成と同じ方法で作成できます。違いは、どのように適用するかです。
ビューに style 属性を含むスタイルを適用する代わりに、
android:theme 属性を <application> タグまたは
AndroidManifest.xml ファイルの <activity> タグ。
たとえば、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。ただし、Pod の
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 サポート ライブラリには、テーマのカスタマイズに使用できる他の属性も用意されています。
Theme.AppCompat から拡張されたもの（例: colorPrimary 属性）
使用します。これらは
ライブラリの attrs.xml ファイル。
サポート ライブラリには、上記の例に示すテーマの代わりに拡張できるテーマもあります。利用可能なテーマは
ライブラリの themes.xml ファイル。
バージョン固有のスタイルを追加する
使用するテーマ属性を新しいバージョンの Android で追加すると、以前のバージョンとの互換性を維持したままテーマに追加できます。必要なのは別の styles.xml ファイルだけです
（このファイルを含む values ディレクトリに保存）
リソース バージョン
修飾子:
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>
他のスタイルを拡張するのと同様に、ウィジェットのスタイルを拡張することもできます。 レイアウトまたはテーマにカスタム ウィジェットのスタイルを適用します。
参考情報
テーマとスタイルについて詳しくは、以下の参考情報をご確認ください。