Material Design の Flexible toolbar and card toolbar

[Structure - Layout - Material design guidelines](https://material.io/guidelines/layout/structure.html#structure-toolbars) にある **Flexible toolbar and card toolbar** を実装してみました。
このようなレイアウトです。
![layout_structure_toolbars4.png](https://qiita-image-store.s3.amazonaws.com/0/58593/cc0e37bb-6aae-8425-2342-626a1a1e5c8c.png)

今回はタブレットを用意するのが面倒だったので、横画面の場合にこのレイアウトになるようにしてみます。

## 縦画面

まずは縦画面です。テンプレートで生成された Activity にメニューを一つ、TextView を一つ追加しました。
<a href="https://qiita-image-store.s3.amazonaws.com/0/58593/af02921f-97de-1fe5-1d8a-e7d03b381527.png"><img alt="portrait.png" src="https://qiita-image-store.s3.amazonaws.com/0/58593/af02921f-97de-1fe5-1d8a-e7d03b381527.png" width="200" /></a>

```layout/app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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="com.gsbina.cardtoolbar.MainActivity">

    <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"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>
```

```layout/content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:minHeight="200dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.gsbina.cardtoolbar.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/message"
        />
</RelativeLayout>
```

## 横画面

### 2つの Toolbar

Flexible toolbar and card toolbar というように、ハンバーガーアイコンを表示する Toolbar とタイトル、メニューを表示する Toolbar の 2 つに別れています。
前者を Toolbar、後者を Menubar と区別することにします。

#### Toolbar

Toolbar の高さを 2 倍にして、メニューの作成を行わないようにします。

```layout-land/app_bar_main.xml
<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <!-- @dimen/action_bar_size は ?attr/actionBarSize の 2 倍である 112dp -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/action_bar_size"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

```MainActivity.java
@Override
public boolean onCreateOptionsMenu(Menu menu) {
	if (!hasMenubar()) {
		getMenuInflater().inflate(R.menu.main, menu);
	}
	// Up ナビゲーションを考慮して true を返す
	return true;
}

private boolean hasMenubar() {
	return findViewById(R.id.menubar) != null;
}
```
#### Menubar

Menubar とコンテンツを含む CardView を追加します。

```layout-land/app_bar_main.xml
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/menubar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/menu_bar_size"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="-1dp"
            android:background="?android:attr/listDivider"/>

        <include layout="@layout/content_main"/>

    </LinearLayout>

</android.support.v7.widget.CardView>
```

そして Menubar にタイトルを表示したり、メニューを作成します。

```MainActivity.java
if (hasMenubar()) {
	Toolbar menubar = (Toolbar) findViewById(R.id.menubar);
	ActionBar actionBar = getSupportActionBar();
	if (actionBar != null) {
		// タイトルを表示する
		menubar.setTitle(actionBar.getTitle());
		actionBar.setTitle(null);

		// メニューを作成する
		menubar.inflateMenu(R.menu.main);
		menubar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
			@Override
			public boolean onMenuItemClick(MenuItem item) {
				return onOptionsItemSelected(item);
			}
		});

		// 背景色と合うようにアイコンの色を変更する
		Drawable icon = menubar.getMenu().findItem(R.id.action_module).getIcon();
		icon.setTint(Color.GRAY);
		icon.setTintMode(PorterDuff.Mode.SRC_ATOP);
	}
}
```

### Toolbar と Menubar の配置

Menubar が含まれる CardView は、Toolbar の半分の高さまで位置をずらして配置するために marginTop にマイナスの値を設定します。そして、ずらした CardView が被らないように Toolbar を含む AppBarLayout の elevation を 0 にします。

```layout-land/app_bar_main.xml
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        app:elevation="0dp"
        android:theme="@style/AppTheme.AppBarOverlay">

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

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/app_bar_layout"
        android:layout_marginStart="@dimen/content_margin_start"
        android:layout_marginEnd="@dimen/content_margin_end"
        android:layout_marginTop="@dimen/content_offset">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar
                android:id="@+id/menubar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/menu_bar_size"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="-1dp"
                android:background="?android:attr/listDivider"/>

            <include layout="@layout/content_main"/>

        </LinearLayout>

    </android.support.v7.widget.CardView>
</RelativeLayout>
```

### その他

#### FloatingActionButton

layout_anchor で AppBarLayout にぶら下がるようにします。

```layout-land/app_bar_main.xml
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|end"
    app:srcCompat="@android:drawable/ic_dialog_email"/>
```

## 結果

ということで、下図のようなレイアウトを実装できました。リポジトリは[こちら](https://github.com/bina1204/CardToolbar)
<a href="https://qiita-image-store.s3.amazonaws.com/0/58593/cf114abb-d3a1-21ba-0b0f-17700b5a2473.png"><img alt="landscape.png" src="https://qiita-image-store.s3.amazonaws.com/0/58593/cf114abb-d3a1-21ba-0b0f-17700b5a2473.png" width="400" /></a>