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の背景色がマテリアルデザインっぽくなりました。

Android Studioのコードフォーマッタを設定する

チーム開発を行う場合、フォーマッタは重要です。
メンバー全員のフォーマッタを統一しないとソース管理で痛い目にあいます。

AOSPのCodeStyleを使用する

AOSPにAndroid用のCodeStyleがアップされています。
こちらからDLしましょう。
https://android.googlesource.com/platform/development/+/master/ide/intellij/codestyles/

AndroidStyle.xmlを以下のディレクトリに格納します。
(Windowsの場合)
C:\Users\[USER_NAME]\.AndroidStudioBeta\config\codestyles

(Macの場合)
~/Library/Preferences/AndroidStudio/codestyles
Android StudioのFile->Settingsから設定を行います。



Eclipse Code Formatterを使用する

Eclipseと共存で開発をする場合、フォーマッタを統一しましょう。(ソース管理上のトラブルを防ぐため)
Pluginsから「Eclipse Code Formatter」をインストールします。




File - Settings - Eclipse Code Formatterを開いて設定を行います。