Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

[Android] マテリアルテーマを使う

レッスン コメント
android_android-using-material-theme_00

マテリアルテーマはAndroid5.0(API level 21)から導入されたテーマです。このレッスンでは、マテリアルテーマの使い方について説明します。

 

広 告

 

目次

前提条件

動作確認端末

  • Google Nexus 5 – 5.0.0 – API21（エミュレータ）

1. マテリアルテーマを適用する

アプリにマテリアルテーマを適用するためには、android:Theme.Materialのスタイルを継承する必要があります。styles.xmlを以下のように修正します。

 

res/values-v21/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material">
    </style>
</resources>

アプリを実行すると以下のようになります。

 

android_android-using-material-theme_01

マテリアルテーマには他にも以下のようなテーマが用意されています。

 

android:Theme.Material.Light

 

android_android-using-material-theme_02

 

android:Theme.Material.Light.DarkActionBar

 

android_android-using-material-theme_03

 

android:Theme.Material.NoActionBar

 

android_android-using-material-theme_04

他のマテリアルテーマにについてはR.styleを参照してください。

 

2. テーマカラーをカスタマイズする

マテリアルテーマを適用した場合、ステータスバーやナビゲーションバー等の色を変更することができます。

ステータスバーの色を変更する場合はandroid:statusBarColor属性を使って以下のようにsytles.xmlに記述します。

 

res/values-v21/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="Material.Pink.500">#E91E63</color>
    <style name="AppTheme" parent="android:Theme.Material">
        <item name="android:statusBarColor">@color/Material.Pink.500</item>
    </style>
</resources>
Note : Window#setStatusBarColor()メソッドを使用しても変更することができます。

 

他箇所の色を設定する際に対応した属性名は、以下の図を参照ください。

 

android_android-using-material-theme_05

ここで説明した属性に値を設定したサンプルコードは以下のとおりです。

 

res/values-v21/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="Material.White">#FFFFFF</color>
    <color name="Material.Pink.100">#F8BBD0</color>
    <color name="Material.Pink.300">#F06292</color>
    <color name="Material.Pink.500">#E91E63</color>
    <color name="Material.Grey.800">#424242</color>
    <style name="AppTheme" parent="android:Theme.Material">
        <item name="android:colorAccent">@color/Material.Pink.100</item>
        <item name="android:statusBarColor">@color/Material.Pink.500</item>
        <item name="android:textColorPrimary">@color/Material.White</item>
        <item name="android:colorPrimary">@color/Material.Pink.300</item>
        <item name="android:windowBackground">@color/Material.Grey.800</item>
        <item name="android:navigationBarColor">@color/Material.Pink.500</item>
    </style>
</resources>

実行すると以下のようになります。

 

android_android-using-material-theme_06

 

3. マテリアルデザインに使用する色

Googleのマテリアルデザインで使用されている色のパレットは、Googleのマテリアルデザインのサイトで公開されています。もし色を変更する場合はこちらを参照するとよいでしょう。ちなみに上記の色は、すべてこのサイトを参考に作成しています。

 

Note : もし透明色を指定したい場合は、@android:color/transparentを設定することで実現できます。

 

広 告