2014年11月23日日曜日

Android 5.0(マテリアルデザイン) ActionBarの背景色をカスタマイズする

査読必須サイト

I/O 2014 アプリに学ぶマテリアルデザイン
Customize the Color Palette
Google本家のスタイルガイド


各パーツと要素の指定


以下、各パーツと要素名です。style.xmlにて各要素の色を指定します。


AppCompat使用時の指定

次はStatsuBarとActionBarの背景色を指定するサンプルです。styles.xmlに記載しました。

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- your app branding color for the app bar -->
        <item name="colorPrimary">@color/primary</item>
        <!-- darker variant for the status bar and contextual app bars -->
        <item name="colorPrimaryDark">@color/primary_dark</item>
    </style>

</resources>

AppCompatを使用時は「name="android:colorPrimary"」でないことに注意してください。


サンプル画面

次のようにcolor.xmlに定義を追加してみました。
色はGoogle本家のスタイルガイド
から適用しました。

<resources>

    <!-- Material -->
    <color name="primary">#4caf50</color>
    <color name="primary_dark">#388e3c</color>

</resources>



StatsuBarとActionBarの背景色がマテリアルデザインっぽくなりました。

0 件のコメント:

コメントを投稿