Using a SupportToolbar for phone layout and a standalone actionbar for tablet layout

Question

Today I was thinking of a way to improve my tablet design, and I found this image

I wanted that so bad, as it looks amazing. I am searching google for about a hour now and I haven't come across any good tutorials. I've found this one: v21 Material Design for Pre Lollipop.

I started implementing this right away and everything I tried went completely wrong. The theming for the standalone actionbar needs to be the ThemeOverlay.AppCompat.ActionBar however on my phone layout I am extending the Theme.AppCompat.NoActionBar theme. (Theme is below)

It's just not clear what I should do to make something like the image above on Tablets and show the normal (custom) supportActionBar on Phones without messing up one of them.

Here is my AppTheme style (that I apply to my app)

<!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.NoActionBar">
        <!--   your app branding color for the app bar -->
        <item name="colorPrimary">@color/primaryColor</item>
        <!--   darker variant for the status bar and contextual app bars -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--   theme UI controls like checkboxes and text fields -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Before you ask, yes I've found this quesion on SO, but no this isn't a duplicate question. The post that Chris Banes wrote didn't make things clear for me as well.

Is it possible to do this without destroying both the layouts? Thinking out loud, the reason for me to pick the custom toolbar was because I had included a custom searchview, but removed it. There is another view in the toolbar but I think that it could be removed if it's really necessary.

This is the layout of my phone version.

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:theme="@style/Theme.AppCompat.NoActionBar">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:orientation="vertical">

        <include android:id="@+id/toolbar" layout="@layout/toolbar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:background="@color/primaryColor"
            android:minHeight="?attr/actionBarSize"/>

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

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appBarLayout"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/replaceFrameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/errorWarnings"
                    android:visibility="gone"
                    android:gravity="center"
                    android:layout_gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorIcon"
                        android:tint="@color/fab_material_red_500"
                        android:layout_centerVertical="true"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorDescription"
                        android:layout_below="@+id/errorIcon"/>

                </RelativeLayout>

            <com.tim.koers.wallpapers.UI.FilterButton
                android:id="@+id/filterButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|bottom"
                android:layout_margin="16dp"
                android:clickable="true"
                android:src="@drawable/ic_menu_filter"
                android:elevation="6dp"
                android:tint="@color/fab_material_white"
                android:visibility="gone"/>

        </FrameLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/drawer"/>

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

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

Here is my tablet layout:

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fitsSystemWindows="true">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:animateLayoutChanges="true"
                android:orientation="vertical"
                android:background="@android:color/white"
                android:layout_marginEnd="64dp"
                android:layout_marginStart="64dp"
                android:layout_marginTop="56dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <!-- This is the secondary toolbar, 72dp also according to specs -->
                    <include android:id="@+id/toolbar" layout="@layout/toolbar"
                        app:layout_scrollFlags="scroll|enterAlways" />

                    <android.support.design.widget.TabLayout
                        android:id="@+id/tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/toolbar"
                        android:background="@color/primaryColor"
                        android:minHeight="?attr/actionBarSize"/>

                </RelativeLayout>

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



            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="56dp"
                android:layout_marginEnd="64dp"
                android:layout_marginStart="64dp"
                tools:context=".MainActivity" />

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <FrameLayout
                    android:id="@+id/replaceFrameLayout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/errorWarnings"
                    android:visibility="gone"
                    android:gravity="center"
                    android:layout_gravity="center">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorIcon"
                        android:tint="@color/fab_material_red_500"
                        android:layout_centerVertical="true"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/errorDescription"
                        android:layout_below="@+id/errorIcon"/>

                </RelativeLayout>

                <com.tim.koers.wallpapers.UI.FilterButton
                    android:id="@+id/filterButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right|bottom"
                    android:layout_margin="16dp"
                    android:clickable="true"
                    android:src="@drawable/ic_menu_filter"
                    android:elevation="6dp"
                    android:tint="@color/fab_material_white"
                    android:visibility="gone"/>

            </FrameLayout>

            <android.support.design.widget.NavigationView
                android:id="@+id/navigation_view"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                app:menu="@menu/drawer"/>

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

    </FrameLayout>

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

Could you explain a bit more with what exactly you are struggling? — Xaver Kapeller, Nov 30 '15 at 01:20
@Elltz Not anymore. Sorry I'll post the code once I've finished coding. — tim687, Dec 02 '15 at 19:02

score 1 · Answer 1 · edited May 23 '17 at 11:59

I found an article that implements this layout.

Create a Card Toolbar (Nested Toolbar) in Android

You can implement it to your tablet layout.

It is composed of a extended-height toolbar (blue) and a CardView with title and regular menu.

The basic structure:

<FrameLayout>
<!-- Extended Toolbar holding Drawer icon -->
    <android.support.v7.widget.Toolbar />
    <android.support.v7.widget.CardView>
        <LinearLayout>
            <!-- Card Toolbar -->
            <android.support.v7.widget.Toolbar />
            <!-- Divider -->
            <View />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>

step1 double the height of the toolbar

step2 setting up the `CardView` as the secondary toolbar

step3 Java code

origin toolbar: set Navigation Icon
CardView toolbar: set menu and title

See More

The code of this article is incomplete. I'll send my answer (that works) later today — tim687, Dec 06 '15 at 16:30

score 0 · Accepted Answer · answered Dec 06 '15 at 17:09

After many hours of trying things out I've come up with the following code:

For your phone layout use this as a base:

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/Theme.AppCompat.NoActionBar">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:background="@color/primaryColor"
                android:minHeight="?attr/actionBarSize"
                style="@style/tabsWidgetIndicatorColors"
                android:theme="@style/Theme.AppCompat.NoActionBar">

            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/toolbar"
                android:background="@color/primaryColor"
                android:minHeight="?attr/actionBarSize"/>

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- Put your content here -->                


        </FrameLayout>

        </RelativeLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"

            app:menu="@menu/drawer"/>

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

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

For your tablet layout use this as a base:

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:theme="@style/Theme.AppCompat"
    >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:fitsSystemWindows="true">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

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

                    <android.support.v7.widget.Toolbar
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/primaryColor"
                        android:minHeight="?attr/actionBarSize"
                        android:id="@+id/actionToolbar"
                        />

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/primaryColor"
                        android:minHeight="?attr/actionBarSize"
                        />

                </LinearLayout>

                <android.support.design.widget.AppBarLayout
                    android:id="@+id/appBarLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:animateLayoutChanges="true"
                    android:orientation="vertical"
                    android:layout_marginEnd="64dp"
                    android:layout_marginStart="64dp"
                    android:layout_marginTop="56dp">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <!-- This is the secondary toolbar, 72dp also according to specs -->
                        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
                            android:id="@+id/toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_alignParentTop="true"
                            android:background="@color/colorSecondary"
                            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
                            android:minHeight="72dp"
                            style="@style/tabsWidgetIndicatorColors"
                            >
                            <!--android:background="?attr/colorPrimary"-->

                        </android.support.v7.widget.Toolbar>

                        <android.support.design.widget.TabLayout
                            android:id="@+id/tabs"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/toolbar"
                            android:background="@color/colorSecondary"

                            android:minHeight="?attr/actionBarSize"/>

                        <!--android:background="?attr/colorPrimary"-->


                    </RelativeLayout>

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


                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <!-- your content here-->



                </FrameLayout>

            </RelativeLayout>

            <android.support.design.widget.NavigationView
                android:id="@+id/navigation_view"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:fitsSystemWindows="true"
                app:menu="@menu/drawer"/>

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

    </FrameLayout>

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

In your main code use findViewById to find the Toolbar with the id @+id/toolbar and @+id/actionBar.

If you are on a tablet layout, both Toolbars should not be null. On a phone, the actionBar is null. Check for that, and if it's not null, you will need to set the supportactionbar to the toolbar with the id @+id/actionBar, and you will need to inflate the menu on the toolbar with the id @+id/toolbar. While running the tablet/phone check, make a new private boolean accessible to your class named isInflateMenuEnabled. If the @+id/actionBar toolbar is not null, isInflateMenuEnabled should be false.

To wrap things up, this is the code:

public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener{


private boolean isInflateMenuEnabled = true;

private Toolbar mToolbar;

@Override
    protected void onCreate(Bundle savedInstanceState) {

setContentView(R.layout.activity_main);


//Check if it is a tablet or phone

mToolbar = (Toolbar) findViewById(R.id.toolbar);

        Toolbar actionToolbar = (Toolbar)findViewById(R.id.actionToolbar);

        if(actionToolbar != null){
            isInflateMenuEnabled= false;
            setSupportActionBar(actionToolbar);

            actionToolbar.setTitle("");
            mToolbar.inflateMenu(R.menu.menu_main);
            mToolbar.setOnMenuItemClickListener(this);

        }else{

            mToolbar.inflateMenu(R.menu.menu_main); // Inflate the menu because there will be no menu inflated automatically anymore.
            mToolbar.setOnMenuItemClickListener(this);
            setSupportActionBar(mToolbar);
       }

mToolbar.setTitle(getString(R.string.title));


}

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);


return isInflateMenuEnabled;

}

@Override
    public boolean onOptionsItemSelected(final MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.

// This will be working with your menu clicks


}


}

Using a SupportToolbar for phone layout and a standalone actionbar for tablet layout

2 Answers2

step1 double the height of the toolbar

step2 setting up the CardView as the secondary toolbar

step3 Java code

step2 setting up the `CardView` as the secondary toolbar