このページは Cloud Translation API によって翻訳されました。

スタイルとテーマ

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"
    ... />

スタイルで指定された各属性は、ビューが受け入れる場合、そのビューに適用されます。ビューは、受け入れない属性を無視します。

注: style 属性を追加する対象の要素のみが、その style 属性を受け取ります。子ビューにはスタイルが適用されません。子ビューにスタイルを継承させる場合は、android:theme 属性でスタイルを適用します。

ただし、個々のビューにスタイルを適用するのではなく、アプリ全体、アクティビティ、またはコレクションのスタイルをテーマとして適用するビューに変更できます。詳しくは、このガイドの別のセクションをご覧ください。

スタイルを拡張しカスタマイズする

独自のスタイルを作成する場合、プラットフォーム 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>

このようなスタイルは、名前をつなげることで何度でも継承できます。

注: ドット表記を使用してスタイルを拡張し、parent 属性も含める場合は、ドット表記で継承したスタイルは親スタイルによってオーバーライドされます。

<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 によるスタイル設定をオーバーライドします。

</ph> 注意: アプリのスタイル設定をしても期待した結果が表示されない場合は、他のスタイルが変更をオーバーライドしていますたとえば、アプリにテーマを適用し、個々の View にスタイルを適用した場合、その View に一致するテーマ属性はスタイル属性によってオーバーライドされます。ただし、含まれていないテーマ属性はスタイルによってオーバーライドされたスタイルは引き続き使用されます。

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 ファイル。

注: サポートライブラリの属性名は、android: 接頭辞を使用しません。これは Android フレームワークの属性にのみ使用されます。

サポートライブラリには、上記の例に示すテーマの代わりに拡張できるテーマもあります。利用可能なテーマはライブラリの 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>

他のスタイルを拡張するのと同様に、ウィジェットのスタイルを拡張することもできます。レイアウトまたはテーマにカスタムウィジェットのスタイルを適用します。

参考情報

テーマとスタイルについて詳しくは、以下の参考情報をご確認ください。

スタイルとテーマ

テーマとスタイル

スタイルを作成して適用する

スタイルを拡張しカスタマイズする

スタイルをテーマとして適用する

スタイル階層

TextAppearance

デフォルトのテーマをカスタマイズする

バージョン固有のスタイルを追加する

ウィジェット スタイルをカスタマイズする

参考情報

ブログ投稿

ウィジェットスタイルをカスタマイズする