MaterialDesign Toolbar

今回のエンジニアブログ担当の佐藤です。

今回は、MaterialDesignのToolbarについて書いていきます！

◆Toolbar
Android 5.0から追加されたActionBarに変わる新しいコンポーネントです。
ActionBarに比べてカスタマイズしやすく、なんだか今風スタイリッシュでかっこいいです。

◆実際にToolbarを使用する
AppCompat v21を使用します。

まずはテーマの設定からです。

values/style.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Toolbarの主要カラー(ブランドカラー) -->
        <item name="colorPrimary">@color/color_primary</item>

        <!--  ステータスバーの色(5.0以降のみ)  -->
        <item name="colorPrimaryDark">@color/color_primary_dark</item>

        <!-- ナビゲーションバーの色(5.0以降のみ) -->
        <item name="android:navigationBarColor">@color/navigationbar_color</item>

        <!-- 文字色 -->
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

    <!-- ポップアップメニューのテーマ -->
    <style name="PopThemeStyle" parent="@style/ThemeOverlay.AppCompat.Light">
        <!-- 文字色 -->
        <item name="android:textColorPrimary">@android:color/white</item>

        <!-- 背景色 -->
        <item name="android:background">@color/pop_backcolor</item>
    </style>

</resources>

Theme.AppCompat系のテーマを継承したテーマを使用します。
ToolbarをActionBarとして使用する場合、.NoActionBarでActionBarを非表示にします。

また、ポップアップテーマとして定義したstyleはToolbarのOrverflowメニューで表示されるポップアップメニューの色等を設定しています。

今回設定した各色はこちらです。

values/color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_primary">#00BCD4</color>
    <color name="color_primary_dark">#4FC3F7</color>
    <color name="navigationbar_color">#4FC3F7</color>
    <color name="pop_backcolor">#304FFE</color>
</resources>

Toolbarのレイアウトはxmlで指定する事が可能です

activity_main.xml

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

      <!-- Toolbarのレイアウト -->
    <android.support.v7.widget.Toolbar  
           android:id="@+id/toolbar"  
           android:layout_width="match_parent"  
           android:layout_height="wrap_content"  
           app:popupTheme="@style/PopThemeStyle"  
           android:background="?attr/colorPrimary"  
           android:minHeight="?attr/actionBarSize"/>

    <TextView   
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_below="@id/toolbar"  
           android:text="@string/hello_world"/>
</RelativeLayout>

Toolbarのapp:popupThemeで先ほど定義したポップアップメニューのスタイルを指定します。

MainActivity.java

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Toolbarを作成  
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle(getString(R.string.app_name));
        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_setting) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

ToolbarをActionBarとして使用する場合、ActionBarActivityを継承するします。
setSupportActionBar()でToolbarをActionBarとして使用できるようにします。オプションメニューの追加も自動で行ってくれます。

◆実行結果
Android 4.x系
　

Android 5.0
　
ステータスバー,ナビゲーションバーに指定した色は5.0系のみ反映されます。

また、Toolbarにはスタンドアローンというものがあり、ToolbarをActionBarとして機能させない場合の実装方法もあります。
ActionBarを非表示にする必要はないですが、メニュー等は手動で追加しなくてはいけません。
Viewにもつかえるので、ViewにToolbarを設置したり使い道はいろいろできそうです。

まだまだ調べてみるといろんな機能があるのでこれからのアプリ開発にどんどんつかって見たいと思います！

採用情報