Android 5.0 - How to implement this tablet layout from Material Design guidelines

Question

I am not getting it which is ActionBar and which is ToolBar. How do i implement this? Any answers appreciated..Thanks in Advance.

Answer 1

In this example, the blue toolbar is an extended height, overlaid by the screen content and provides the navigation button. There is another toolbar used in the detail view. I have circled both Toolbars below.

Answer 2

Haven't tried this yet but it should work. Here is your layout :

<?xml version="1.0" encoding="utf-8"?>
<!-- The important thing to note here is the added fitSystemWindows -->

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Your content -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- Your main ActionBar (with the blue background).
             The height is 56 + 72dp according to specs -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="128dp" />

        <!-- The white sheet -->
        <FrameLayout
            android:id="@+id/content_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="64dp"
            android:layout_marginStart="64dp"
            android:layout_marginTop="56dp"
            android:background="@android:color/white">

            <!-- This is the secondary toolbar, 72dp also according to specs -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/secondary_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/darker_gray"
                android:minHeight="72dp" />

            <!-- Your main frame container where you put your fragment -->
            <FrameLayout
                android:id="@+id/frame_container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

        </FrameLayout>

    </RelativeLayout>

    <!-- Your drawer view. This can be any view, LinearLayout
         is just an example. As we have set fitSystemWindows=true
         this will be displayed under the status bar. -->
    <LinearLayout
        android:layout_width="304dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true"/>

</android.support.v4.widget.DrawerLayout>

This will include a NavigationDrawer that goes on top of the ActionBar (for more information about this, read this answer by Chris Banes ), and the layout you're requesting.

Then in your Fragment / Activity :

 public void onCreate(Bundled savedInstanceState) {
    super.onCreate(savedInstanceState);

    // ...

    // Set the main Toolbar as the ActionBar
    Toolbar mainToolbar = (...) findViewById(R.id.main_toolbar);
    setSupportActionBar(mainToolbar);

    // Now retrieve the DrawerLayout so that we can set the status bar color.
    // This only takes effect on Lollipop, or when using translucentStatusBar
    // on KitKat.
    DrawerLayout drawerLayout = (...) findViewById(R.id.my_drawer_layout);
    drawerLayout.setStatusBarBackgroundColor(yourChosenColor);

    // Use the secondary toolbar in Standalone mode. This means you don't set is as the ActionBar
    // but it also implies you have to handle the Toolbar items yourslef
    Toolbar secondaryToolbar = (...) findViewById(R.id.secondary_toolbar);

    // For example, to set an OnMenuItemClickListener to handle menu item clicks :
    toolbar.setOnMenuItemClickListener(
            new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    // Handle the menu item
                    return true;
                }
    });

    // To inflate a menu to be displayed in the toolbar :
    toolbar.inflateMenu(R.menu.your_toolbar_menu);

    // ...
}

I think this should do it (don't forget to replace hard-coded values with dimensions to adapt to the device size).

For more information, take a look at the AppCompat v21 doc or at Chris Banes' post on the AppCompat v21 .