マテリアル テーマ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 – Xamarin.Android 4.20 or later must be installed and configured with either Visual Studio or 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.

  • Java JDK 1.8 – JDK 1.7 は、ターゲット API レベル具体的には 23 およびそれ以前の場合、使用できます。Java JDK 1.8 – JDK 1.7 can be used if you are specifically targetting 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 application 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

マテリアルのテーマのフレーバーを使用するアプリケーション全体を構成する設定、 android:theme 、アプリケーション内のノードの属性AndroidManifest.xml次のいずれか。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>

アプリケーションを設定する代わりに、Theme属性AssemblyInfo.cs (またはProperties.cs)。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

アクティビティのテーマを追加する、Themeに設定、[Activity]上のアクティビティ宣言属性を割り当てる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

カスタム テーマ スタイル会社をブランド化を使用してアプリケーションを作成することで、ブランド化を強化できます’の色。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.

  • textColorPrimary – UI テキストに、アプリ バーの色。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

既定では、statusBarColorの値に設定されているcolorPrimaryDarkです。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

作成し、内のファイルを変更するカスタム アプリ テーマを作成することができます、リソースアプリ プロジェクトのフォルダーです。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:

  • 作成、 colors.xmlファイルリソース/値—このファイルを使用して、カスタム テーマの色を定義します。Create a colors.xml file in Resources/values — you use this file to define your custom theme colors. たとえばには、次のコードを貼り付けることができますcolors.xml作業を開始するため。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.

  • 作成、リソース/値の v21フォルダーです。Create a Resources/values-v21 folder. このフォルダーに作成、 styles.xmlファイル。In this folder, create a styles.xml file:

    Styles.xml リソース/値-21.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ノードstyles.xmlを定義して、styleカスタム テーマの名前を持つノード。Add a resources node to styles.xml and define a style node with the name of your custom theme. たとえば、ここでは、 styles.xmlを定義するファイルMyCustomTheme (組み込みから派生したTheme.Material.Lightテーマ スタイル)。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 、株式が表示されます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

  • 色のカスタマイズを追加styles.xmlを変更するレイアウト属性の色を定義することで。Add color customizations to styles.xml by defining the colors of layout attributes that you want to change. たとえば、アプリ バーの色を変更するmy_blueを UI コントロールの色を変更したりmy_purpleに色のオーバーライドを追加styles.xmlで構成されている色リソースを参照するcolors.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_blueと UI コントロールにmy_purpleが使用して、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. 作成した後colors.xmlstyles.xmlにビューのスタイルを追加する (として、前のセクションで説明)、 styles.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. 例については、カスタムを作成するCardViewスタイルを使用して角が丸いよりmy_blueカードの背景色として追加して、styleノードstyles.xml (、内resourcesノード) と背景色と上隅にある radius の構成します。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カスタム スタイルが設定されているCardView.MyBlueテーマ (右側に表示)。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>
  • カスタム テーマを定義Resources/values/styles.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")]

テーマがで定義された色を使用している場合、 colors.xmlファイルを使用してこのファイルを配置することを確認してリソース/値(なくリソース/値の 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.xmlです。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.