素材のテーマMaterial Theme

マテリアル テーマのビューと Android 5.0 (ロリポップ) で始まるアクティビティの外観を決定するユーザー インターフェイスのスタイルがします。Material Theme is a user interface style that determines the look and feel of views and activities starting with Android 5.0 (Lollipop). マテリアル テーマは、およびアプリケーション、システム UI で使用するよう Android 5.0 に組み込まれています。Material Theme is built into Android 5.0, so it is used by the system UI as well as by applications. マテリアル テーマは、ユーザーは [設定] メニューから動的に選択できるシステム全体の外観のオプションの意味で「テーマ」ではありません。Material Theme is not a "theme" in the sense of a system-wide appearance option that a user can dynamically choose from a settings menu. 代わりに、マテリアル テーマ見なすことができますのアプリの外観をカスタマイズに使用できる関連する組み込みの基本スタイルのセットとして。Rather, Material Theme can be thought of as a set of related built-in base styles that you can use to customize the look and feel of your app.

Android には、次の3つの素材テーマがあります。Android provides three Material Theme flavors:

  • Theme.Material – のマテリアルテーマのダークバージョンです。これは、Android 5.0 の既定のフレーバーです。Theme.Material – Dark version of Material Theme; this is the default flavor in Android 5.0.

  • マテリアルテーマの – ライトバージョンを Theme.Material.Light します。Theme.Material.Light – Light version of Material Theme.

  • Theme.Material.Light.DarkActionBar – のマテリアルテーマの明るいバージョンですが、暗いアクションバーが使用されています。Theme.Material.Light.DarkActionBar – Light version of Material Theme, but with a dark action bar.

これらの配色テーマの例の例を次に示します。Examples of these Material Theme flavors are displayed here:

濃色テーマ、明るいテーマ、およびダーク操作バーテーマのスクリーンショットの例Example screenshots of the Dark theme, Light theme, and Dark Action Bar theme

マテリアルテーマから派生させて独自のテーマを作成し、一部またはすべての色属性をオーバーライドすることができます。You can derive from Material Theme to create your own theme, overriding some or all color attributes. たとえば、Theme.Material.Lightから派生したテーマを作成できますが、ブランドの色と一致するようにアプリバーの色をオーバーライドします。For example, you can create a theme that derives from Theme.Material.Light, but overrides the app bar color to match the color of your brand. 個々のビューのスタイルを作成することもできます。たとえば、角が丸く、暗い背景色を使用するCardViewのスタイルを作成できます。You can also style individual views; for example, you can create a style for CardView that has more rounded corners and uses a darker background color.

アプリ全体に対して1つのテーマを使用することも、アプリ内のさまざまな画面 (アクティビティ) に対して異なるテーマを使用することもできます。You can use a single theme for an entire app, or you can use different themes for different screens (activities) in an app. 上のスクリーンショットでは、たとえば、1つのアプリが各アクティビティに対して異なるテーマを使用して、組み込みの配色を示しています。In the above screenshots, for example, a single app uses a different theme for each activity to demonstrate the built-in color schemes. オプションボタンを利用すると、アプリがさまざまなアクティビティに切り替わり、結果として異なるテーマが表示されます。Radio buttons switch the app to different activities, and, as a result, display different themes.

マテリアルのテーマは Android 5.0 以降でのみサポートされているため、以前のバージョンの Android で実行するためにアプリのテーマを作成することはできません (または、マテリアルテーマから派生したカスタムテーマを使用することはできません)。Because Material Theme is supported only on Android 5.0 and later, you cannot use it (or a custom theme derived from Material Theme) to theme your app for running on earlier versions of Android. ただし、Android 5.0 デバイスで素材のテーマを使用するようにアプリを構成し、以前のバージョンの Android で動作する場合は以前のテーマに適切にフォールバックできます (詳細については、この記事の「互換性」セクションを参照してください)。However, you can configure your app to use Material Theme on Android 5.0 devices and gracefully fall back to an earlier theme when it runs on older versions of Android (see the Compatibility section of this article for details).

要件Requirements

Xamarin ベースのアプリで新しい Android 5.0 のマテリアルテーマ機能を使用するには、次のものが必要です。The following is required to use the new Android 5.0 Material Theme features in Xamarin-based apps:

  • Xamarin android 4.20 – Visual Studio または Visual Studio for Mac を使用してインストールおよび構成する必要があります。Xamarin.Android – Xamarin.Android 4.20 or later must be installed and configured with either Visual Studio or Visual Studio for Mac.

  • Android SDK – Android 5.0 (API 21) 以降を Android SDK Manager を使用してインストールする必要があります。Android SDK – Android 5.0 (API 21) or later must be installed via the Android SDK Manager.

  • API レベル23以前を対象としている場合は、 JAVA jdk 1.8 – jdk 1.7 を使用できます。Java JDK 1.8 – JDK 1.7 can be used if you are specifically targeting API level 23 and earlier. JDK 1.8 は、 Oracleから入手できます。JDK 1.8 is available from Oracle.

Android 5.0 アプリケーションプロジェクトを構成する方法については、「 android 5.0 プロジェクトの設定」を参照してください。To learn how to configure an Android 5.0 app project, see Setting Up an Android 5.0 Project.

組み込みテーマの使用Using the Built-in Themes

マテリアルテーマを使用する最も簡単な方法は、カスタマイズせずに組み込みのテーマを使用するようにアプリを構成することです。The easiest way to use Material Theme is to configure your app to use a built-in theme without customization. テーマを明示的に構成しない場合、アプリは既定で Theme.Material (ダークテーマ) になります。If you don't want to explicitly configure a theme, your app will default to Theme.Material (the dark theme). アプリにアクティビティが1つしかない場合は、アクティビティレベルでテーマを構成できます。If your app has only one activity, you can configure a theme at the activity level. アプリに複数のアクティビティがある場合は、すべてのアクティビティで同じテーマを使用するようにアプリケーションレベルでテーマを構成するか、異なるテーマを別のアクティビティに割り当てることができます。If your app has multiple activities, you can configure a theme at the application level so that it uses the same theme across all activities, or you can assign different themes to different activities. 以下のセクションでは、アプリレベルとアクティビティレベルでテーマを構成する方法について説明します。The following sections explain how to configure themes at the app level and at the activity level.

アプリケーションのテーマを適用するTheming an Application

素材テーマフレーバーを使用するようにアプリケーション全体を構成するには、 Androidmanifestのアプリケーションノードの android:theme 属性を次のいずれかに設定します。To configure an entire application to use a Material Theme flavor, set the android:theme attribute of the application node in AndroidManifest.xml to one of the following:

  • @android:style/Theme.Material – ダークテーマです。@android:style/Theme.Material – Dark theme.

  • – 明るいテーマを @android:style/Theme.Material.Light します。@android:style/Theme.Material.Light – Light theme.

  • 濃いアクションバーで – 明るいテーマを @android:style/Theme.Material.Light.DarkActionBar します。@android:style/Theme.Material.Light.DarkActionBar – Light theme with dark action bar.

次の例では、アプリケーションMyAppでライトテーマを使用するように構成します。The following example configures the application MyApp to use the light theme:

<application android:label="MyApp" 
             android:theme="@android:style/Theme.Material.Light">
</application>

または、 AssemblyInfo.cs (またはProperties.cs) で application Theme 属性を設定することもできます。Alternately, you can set the application Theme attribute in AssemblyInfo.cs (or Properties.cs). 例:For example:

[assembly: Application(Theme="@android:style/Theme.Material.Light")]

アプリケーションテーマが @android:style/Theme.Material.Lightに設定されている場合、 MyAppのすべてのアクティビティが Theme.Material.Lightを使用して表示されます。When the application theme is set to @android:style/Theme.Material.Light, every activity in MyApp will be displayed using Theme.Material.Light.

アクティビティのテーマを行うTheming an Activity

アクティビティをテーマするには、アクティビティ宣言の上にある [Activity] 属性に Theme 設定を追加し、使用するマテリアルテーマフレーバーに Theme を割り当てます。To theme an activity, you add a Theme setting to the [Activity] attribute above your activity declaration and assign Theme to the Material Theme flavor that you want to use. 次の例では、アクティビティと Theme.Material.Lightをテーマします。The following example themes an activity with Theme.Material.Light:

[Activity(Theme = "@android:style/Theme.Material.Light",
          Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]  

このアプリのその他のアクティビティでは、既定の Theme.Material ダーク配色 (または、構成されている場合はアプリケーションテーマ設定) が使用されます。Other activities in this app will use the default Theme.Material dark color scheme (or, if configured, the application theme setting).

カスタムテーマの使用Using Custom Themes

ブランド’s 色でアプリのスタイルを設定するカスタムテーマを作成することにより、ブランドを強化できます。You can enhance your brand by creating a custom theme that styles your app with your brand’s colors. カスタムテーマを作成するには、組み込みのマテリアルテーマフレーバーから派生する新しいスタイルを定義し、変更する色属性をオーバーライドします。To create a custom theme, you define a new style that derives from a built-in Material Theme flavor, overriding the color attributes that you want to change. たとえば、Theme.Material.Light.DarkActionBar から派生したカスタムテーマを定義し、画面の背景色を白ではなくベージュに変更することができます。For example, you can define a custom theme that derives from Theme.Material.Light.DarkActionBar and changes the screen background color to beige instead of white.

マテリアルテーマでは、カスタマイズのために次のレイアウト属性が公開されています。Material Theme exposes the following layout attributes for customization:

  • アプリバーの色を – colorPrimary ます。colorPrimary – The color of the app bar.

  • ステータスバーとコンテキストアプリバーの色 – colorPrimaryDark します。これは通常、colorPrimaryのダークバージョンです。colorPrimaryDark – The color of the status bar and contextual app bars; this is normally a dark version of colorPrimary.

  • colorAccent、チェックボックス、オプションボタン、編集テキストボックスなどの UI コントロールの色を – します。colorAccent – The color of UI controls such as check boxes, radio buttons, and edit text boxes.

  • 画面の背景色を – windowBackground ます。windowBackground – The color of the screen background.

  • アプリバーの UI テキストの色 – textColorPrimary します。textColorPrimary – The color of UI text in the app bar.

  • ステータスバーの色 – statusBarColor します。statusBarColor – The color of the status bar.

  • ナビゲーションバーの色 – navigationBarColor ます。navigationBarColor – The color of the navigation bar.

次の図に、これらの画面領域のラベルを示します。These screen areas are labeled in the following diagram:

属性とそれに関連付けられた画面領域の ダイアグラムDiagram of attributes and their associated screen areas

既定では、statusBarColorcolorPrimaryDarkの値に設定されます。By default, statusBarColor is set to the value of colorPrimaryDark. statusBarColor を純色に設定することも、@android:color/transparent に設定してステータスバーを透明にすることもできます。You can set statusBarColor to a solid color, or you can set it to @android:color/transparent to make the status bar transparent. navigationBarColor@android:color/transparentに設定することによって、ナビゲーションバーを透明にすることもできます。The navigation bar can also be made transparent by setting navigationBarColor to @android:color/transparent.

カスタムアプリのテーマの作成Creating a Custom App Theme

カスタムアプリのテーマを作成するには、アプリプロジェクトのResourcesフォルダー内のファイルを作成および変更します。You can create a custom app theme by creating and modifying files in the Resources folder of your app project. カスタムテーマを使用してアプリのスタイルを設定するには、次の手順に従います。To style your app with a custom theme, use the following steps:

  • このファイルを使用してカスタムテーマの色を定義する —、リソース/値色の .xmlファイルを作成します。Create a colors.xml file in Resources/values — you use this file to define your custom theme colors. たとえば、次のコードを「 colors 」に貼り付けると、作業を開始するのに役立ちます。For example, you can paste the following code into colors.xml to help you get started:
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <color name="my_blue">#3498DB</color>
    <color name="my_green">#77D065</color>
    <color name="my_purple">#B455B6</color>
    <color name="my_gray">#738182</color>
</resources>
  • このサンプルファイルを変更して、カスタムテーマで使用する色リソースの名前と色コードを定義します。Modify this example file to define the names and color codes for color resources that you will use in your custom theme.

  • Resources/v21フォルダーを作成します。Create a Resources/values-v21 folder. このフォルダーに、次のようにスタイルの .xmlファイルを作成します。In this folder, create a styles.xml file:

    Resources/values-21 フォルダー内の styles .xml の 場所Location of styles.xml in the Resources/values-21.xml folder

    リソース/値-v21は android 5.0 に固有であることに注意してください – 古いバージョンの android では、このフォルダー内のファイルは読み取られません。Note that Resources/values-v21 is specific to Android 5.0 – older versions of Android will not read files in this folder.

  • resources ノードをスタイルの .xmlに追加し、カスタムテーマの名前を使用して style ノードを定義します。Add a resources node to styles.xml and define a style node with the name of your custom theme. たとえば、次に示すのは、 Mycustomtheme (組み込みの Theme.Material.Light テーマスタイルから派生したもの) を定義するスタイルの .xmlファイルです。For example, here is a styles.xml file that defines MyCustomTheme (derived from the built-in Theme.Material.Light theme style):

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Customizations go here -->
    </style>
</resources>
  • この時点で、 Mycustomthemeを使用するアプリでは、カスタマイズなしで stock Theme.Material.Light テーマが表示されます。At this point, an app that uses MyCustomTheme will display the stock Theme.Material.Light theme without customizations:

    カスタマイズ前にカスタムテーマの外観を するCustom theme appearance before customizations

  • 変更するレイアウト属性の色を定義して、色のカスタマイズをスタイルの .xmlに追加します。Add color customizations to styles.xml by defining the colors of layout attributes that you want to change. たとえば、アプリバーの色を my_blue に変更し、UI コントロールの色を my_purpleに変更するには、color . xmlで構成されている色リソースを参照するスタイルの xmlに色のオーバーライドを追加します。For example, to change the app bar color to my_blue and change the color of UI controls to my_purple, add color overrides to styles.xml that refer to color resources configured in colors.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Override the app bar color -->
        <item name="android:colorPrimary">@color/my_blue</item>
        <!-- Override the color of UI controls -->
        <item name="android:colorAccent">@color/my_purple</item>
    </style>
</resources>

これらの変更が適用されると、 Mycustomthemeを使用するアプリでは、my_purplemy_blue と UI コントロールにアプリバーの色が表示されますが、他の場所では Theme.Material.Light の配色を使用します。With these changes in place, an app that uses MyCustomTheme will display an app bar color in my_blue and UI controls in my_purple, but use the Theme.Material.Light color scheme everywhere else:

カスタマイズ後にカスタムテーマの外観を するCustom theme appearance after customizations

この例では、 Mycustomthemeは背景色、ステータスバー、およびテキストの色の Theme.Material.Light から色をではますが、アプリバーの色を my_blue に変更し、ラジオボタンの色を my_purpleに設定します。In this example, MyCustomTheme borrows colors from Theme.Material.Light for the background color, status bar, and text colors, but it changes the color of the app bar to my_blue and sets the color of the radio button to my_purple.

カスタムビュースタイルの作成Creating a Custom View Style

Android 5.0 では、個々のビューのスタイルを設定することもできます。Android 5.0 also makes it possible for you to style an individual view. 前のセクションで説明したように、色 .xmlスタイル .xmlを作成した後は、スタイルの .xmlにビュースタイルを追加できます。After you create colors.xml and styles.xml (as described in the previous section), you can add a view style to styles.xml. 個々のビューのスタイルを適用するには、次の手順に従います。To style an individual view, use the following steps:

  • Resources/values-v21/styles .xmlを編集し、カスタムビュースタイルの名前を持つ style ノードを追加します。Edit Resources/values-v21/styles.xml and add a style node with the name of your custom view style. この style ノード内で、ビューのカスタムカラー属性を設定します。Set the custom color attributes for your view within this style node. たとえば、角が丸く、カードの背景色として my_blue を使用するカスタム CardView スタイルを作成するには、style ノードを (resources ノード内の) styles.xml に追加し、背景色を構成します。角の半径:For example, to create a custom CardView style that has more rounded corners and uses my_blue as the card background color, add a style node to styles.xml (inside the resources node) and configure the background color and corner radius:
<!-- Theme an individual view: -->
<style name="CardView.MyBlue">

    <!-- Change the background color to Xamarin blue: -->
    <item name="cardBackgroundColor">@color/my_blue</item>

    <!-- Make the corners very round: -->
    <item name="cardCornerRadius">18dp</item>
</style>
  • レイアウトで、そのビューの style 属性を、前の手順で選択したカスタムスタイル名と一致するように設定します。In your layout, set the style attribute for that view to match the custom style name that you chose in the previous step. 例:For example:
<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

次のスクリーンショットは、(左側に表示される) 既定の CardView の例を示しています。これは、(右側に表示されている) カスタム CardView.MyBlue テーマでスタイルを設定した CardView と比較したものです。The following screenshot provides an example of the default CardView (shown on the left) as compared to a CardView that has been styled with the custom CardView.MyBlue theme (shown on the right):

既定の CardView およびカスタム CardView の 例Examples of default CardView and Custom CardView

この例では、カスタム CardView が、背景色 my_blue と18dp コーナー半径と共に表示されます。In this example, the custom CardView is displayed with the background color my_blue and an 18dp corner radius.

互換性Compatibility

Android 5.0 で素材のテーマを使用するようにアプリのスタイルを設定し、古い Android バージョンで自動的に下互換性のあるスタイルに戻すには、次の手順を使用します。To style your app so that it uses Material Theme on Android 5.0 but automatically reverts to a downward-compatible style on older Android versions, use the following steps:

  • マテリアルテーマスタイルから派生するResources/values-v21/styles .xmlでカスタムテーマを定義します。Define a custom theme in Resources/values-v21/styles.xml that derives from a Material Theme style. 例:For example:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • 以前のテーマから派生したリソース/値/スタイルの xmlでカスタムテーマを定義しますが、上記と同じテーマ名を使用します。Define a custom theme in Resources/values/styles.xml that derives from an older theme, but uses the same theme name as above. 例:For example:
<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>
  • Androidmanifest .xmlで、カスタムテーマ名を使用してアプリを構成します。In AndroidManifest.xml, configure your app with the custom theme name. 例:For example:
<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>
  • または、カスタムテーマを使用して、特定のアクティビティのスタイルを設定することもできます。Alternately, you can style a specific activity using your custom theme:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

テーマで、色 .xmlファイルで定義された色を使用する場合は、カスタムテーマの両方のバージョンが色の定義にアクセスできるように、このファイルを resources /v21ではなくリソース/ 値に配置してください。If your theme uses colors defined in a colors.xml file, be sure to place this file in Resources/values (rather than Resources/values-v21) so that both versions of your custom theme can access your color definitions.

Android 5.0 デバイスでアプリを実行すると、 Resources/values-v21/stylesに指定されたテーマ定義が使用されます。When your app runs on an Android 5.0 device, it will use the theme definition specified in Resources/values-v21/styles.xml. このアプリが古い Android デバイスで実行されている場合は、 Resources/values/styles .xmlに指定されているテーマ定義に自動的に切り替えられます。When this app runs on older Android devices, it will automatically fall back to the theme definition specified in Resources/values/styles.xml.

以前のバージョンの Android とのテーマの互換性の詳細については、「代替リソース」を参照してください。For more information about theme compatibility with older Android versions, see Alternate Resources.

要約Summary

この記事では、Android 5.0 (ロリポップ) に含まれる新しいマテリアルテーマのユーザーインターフェイススタイルについて紹介しました。This article introduced the new Material Theme user interface style included in Android 5.0 (Lollipop). ここでは、アプリのスタイルを設定するために使用できる3つの組み込みの素材テーマの種類について説明し、アプリをブランド化するためのカスタムテーマを作成する方法を説明しました。また、個々のビューをテーマする方法の例を示しました。It described the three built-in Material Theme flavors that you can use to style your app, it explained how to create a custom theme for branding your app, and it provided an example of how to theme an individual view. 最後に、この記事では、以前のバージョンの Android との下位互換性を維持しながら、アプリで素材のテーマを使用する方法について説明しました。Finally, this article explained how to use Material Theme in your app while maintaining downward compatibility with older versions of Android.