Android5.0より前のバージョンでMaterialDesignを使う方法（Toolbar編）

SYSTEM_KDです。

以前、同タイトルで記事を書いた内容のちょっとパワーアップ版です。
以前の記事では、テーマを適用するだけでしたが今回は、ActionBarを「Toolbar」へ変更して、ついでに色を変えてみたいと思います。

ちなみに、ToolBarはAndroid5.0と同タイミングで追加されたActionBarに変わるものになります。

完成形はこんな感じ。

メニュー内は、こんな感じです。

それでは、実装。

まずは、「ToolBar」の導入から。
※サポートライブラリ「appcompat」が必要になります。利用方法はこちらを参照下さい

先程も書きましたが「ToolBar」は「ActionBar」のかわりとなるものになりますので、ActionBarを利用しないようにする必要があります。

どうやって利用しないようにするかと言いますと、「styles.xml」でActionBarを利用しないテーマを設定することにより行えます。

具体的にはこうです。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
</resources>

「Theme.AppCompat.Light.NoActionBar」を指定することによりActionBarがない状態となります。

この状態で実行すると、ActionBarのない状態で表示されます。

では、ここへ「ToolBar」を追加したいと思います。
ToolBarはActionBarとは違いウィジェットになりますので、レイアウトのxmlへ追加してやる必要があります。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/toolbarTheme"
        app:popupTheme="@style/toolbarMenuTheme"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>

「android.support.v7.widget.Toolbar」の部分が「ToolBar」にあたります。

合わせて「styles.xml」へToolBarの「背景色」「文字色」「メニュー」の色などのテーマを設定してやります。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="toolbarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <!-- ToolBar 背景色 -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!-- ToolBar タイトル色 -->
        <item name="android:textColorPrimary">@color/titleColor</item>
        <!-- ToolBar のOverflow アイコン色 -->
        <item name="android:textColorSecondary">@color/titleColor</item>
    </style>

    <style name="toolbarMenuTheme" parent="Theme.AppCompat.Light">
        <item name="android:textColorPrimary">@color/menuColor</item>
    </style>

</resources>

色の設定はこんな感じにしてます。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#2196F3</color>
    <color name="titleColor">#ffffff</color>
    <color name="menuColor">#009688</color>
</resources>

「styles.xml」の設定を簡単に説明しますと以下になります。

ToolBarの色（背景色）の設定は、toolbarTheme内の
<item name="colorPrimary">@color/colorPrimary</item>

ToolBarのタイトル文字色の設定は、toolbarTheme内の
<item name="android:textColorPrimary">@color/titleColor</item>

ToolBarに表示されるメニューの色は、toolbarTheme内の
<item name="android:textColorSecondary">@color/titleColor</item>
※上記例では、タイトルと同じ色にしています。

メニューを表示した時の文字色の設定は、toolbarMenuTheme内の
<item name="android:textColorPrimary">@color/menuColor</item>

最後に、「ToolBar」をActionBarと同様に利用できるように、ソース部分で設定を行います。

public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
        setSupportActionBar(toolbar);
    }

    // 以下略 //
}

主要な部分としては、継承元のクラスを「ActionBarActivity」にする部分と、「setSupportActionBar」でToolBarを設定してやる部分になります。

これで、はじめの画像なような状態にすることができます。