Androidアプリ開発 Material design ヘッダーをカスタマイズする

2016年10月16日(編集2016年10月16日)
このエントリーをはてなブックマークに追加

Androidアプリ開発では、ヘッダーをカスタマイズする機会が時々あります。 Androidのヘッダーの作成方法は色々と存在します。なので、適切な情報を探すのに苦労します。
この記事は、Androidアプリでヘッダーをカスタマイズする方法を記述した記事です。

環境はAndroid 7.0 (API level 24) です。

環境

  • OS X Yosemite
  • Oracle jdk version 1.8.0_72
  • Android Studio 2.2.0
  • android sdk 24
  • Gradle 2.2.0

難易度

初心者向け

サンプルコード

Android-Material-Design-Demo

Androidのヘッダー

Androidのヘッダーの作成方法は、色々あります。
しかし、これまでに色々なヘッダーが誕生しては非推奨となっているので、非常にわかりにくくて調べにくいです。

この記事では、Android 7.0のデフォルトであるAppBarLayoutとToolbarの組み合わせのカスタマイズ方法をまとめました。

背景色の変更

Android 7.0のデフォルトの背景は、以下のようになります。

デフォルト

ヘッダーは、AppBarLayoutとToolbarで作成されています。

{project_folder}/res/layout/activity_custom_bar.xml
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>
        

このヘッダーの背景色を変更するには、ThemeのcolorPrimary属性を変更します。

まずは、style.xmlにCustomAppThemeという新しいThemeを作成します。

{project_folder}/values/style.xml
    <style name="CustomAppTheme" parent="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
        

続いてcolorPrimaryを設定します。

{project_folder}/values/style.xml
    <style name="CustomAppTheme" parent="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
       +<item name="colorPrimary">#000000</item>
    </style>
        

AndroidManifest.xmlのthemeに設定します。

{project_folder}/AndroidManifest.xml
        <activity
            android:name=".ui.CustomBarActivity"
            android:label="@string/title_activity_custom_bar"
           +android:theme="@style/CustomAppTheme"></activity>
        

ビルドしてアプリを立ち上げます。

colorPrimary変更

背景が変更されました。

ステータスバーの背景色を変更

上記で変更した背景の色にあうように、ステータスバーの色も変更します。

ステータスバーの背景色を変更するには、ThemeのcolorPrimaryDark属性を変更します。

{project_folder}/style.xml
    <style name="CustomAppTheme" parent="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">#000000</item>
       +<item name="colorPrimaryDark">#FFC501</item>
    </style>
        

ビルドしてアプリを立ち上げます。

colorPrimaryDark変更

ステータスバーの背景色が変更されました。

背景にdrawable

背景に色でなく、drawableを利用したい場合もあります。実は、drawableの利用も可能です。変更するには、Toolbarのbackground属性を変更します。 Themeのbackgroundではないことに注意してください。

{project_folder}/style.xml
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
           +android:background="@drawable/header_bg"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
        

ビルドしてアプリを立ち上げます。

drawable変更

Toolbarの背景が変更されました。

その他

Toolbarは、テーマを継承して書き換えることで、色々な属性の変更が可能です。
しかし、無理やり変更するべきでもありません。
デフォルトで変更できないのは、それなりの理由があります。OSのアップデートで動かなくなる可能性が高いので、無理やりの変更は避けましょう。

まとめ

スマホはUIが重要です。特にヘッダーは操作性に大きく関わってくるので、Googleでも2年に1回はリニューアルしています。
情報を追いかけて、なるべく対応するようにしましょう。

Toolbars for a flexible Action Bar & more (Android Development Patterns Ep 5)

関連記事

タグ検索で調べてみよう

Android7.0 UI