How to create a Double Toolbar?

Question

I googled, but I never found a way to make a double Toolbar(material design) like the image: https://chris.banes.me/content/images/2014/11/layout-structure-toolbars-toolbars-04_large_xhdpi.png

Everywhere I’ve been just show how to make Toolbar simple. If it’s easier, just tell me what to look for.

Answer 1

Whether you are using the Toolbar then the easiest way to have a Extended Toolbar is using a value of layout_height other than ?attr/actionBarSize (which is the default value).

In that Chris Banes' answer, it recommends using a size of 128dp to adhere to the spec of Material Design.

Following the tip, you’d have something like:

<Toolbar
    android:id="@+id/toolbar"
    android:layout_height="128dp"
    android:layout_width="match_parent"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:gravity="bottom" />

To get to this complete layout, I recommend something like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:minHeight="128dp"
        android:gravity="bottom" />

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:minHeight="364dp">

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

Thus remaining:

Of course you need to adapt to your case, but the beginning is there.