How to achieve this layout on tablet?

Question

I'm trying to create a good UI interface for tablet / large screen device.

The perfect solution would be the one running on GMail app (see screenshot below).

As far as I can understand, the layout is composed like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <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/activity_main_twopane" />

        <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"
            android:src="@drawable/ic_add" />

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

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_drawer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

But if I adopt my solution, this will give me to 2 problems:

1. The FloatingActionButton on my code is on the bottom|end of the layout; in GMail app this is positioned only on the list layout (the one which contains e-mails);
2. The Toolbar on my code is only one (and I have a search action too), but it seems that on GMail app there are 2 of them: one as main with search option and the second one for details actions that are visible when you select an email.

Any advice that will lead me to to achieve the layout on screenshot?

Answer 1

Quick answer for your question 2 and 3:

2. In order to place the FAB in the desired place you have to add this tag on FloatingActionButton xml code: app:layout_anchor="@id/desired_view_id" and app:layout_anchorGravity="bottom|right|end";
3. In bottom toolbar you can define separate toolbar and style it.

See code below

   // this is top toolbar
   Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
   setSupportActionBar(toolbarTop);

   // this is bottom one
   Toolbar toolbarBottom = (Toolbar) findViewById(R.id.toolbar_bottom);
   toolbarBottom.setOnMenuItemClickListener(new         Toolbar.OnMenuItemClickListener() {
      @Override
      public boolean onMenuItemClick(MenuItem item) {
          switch(item.getItemId()){
              case R.id.action_settings:
                  // TODO
                  break;
              // TODO: Other cases
          }
          return true;
      }
   });
   // Inflate a menu to be displayed in the toolbar
   toolbarBottom.inflateMenu(R.menu.menu_main);