How to combine the Toolbar and a TabLayout in land

问题:

How can one combine the Toolbar and Tablayout when in landscape mode as shown in the youtube app? I can't seem to find a definitive answer for this.

My current layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabMode="fixed"
        app:tabGravity="fill"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@color/transparent"/>

    </LinearLayout>

回答1:

As mentioned above, Toolbar is a ViewGroup so a TabLayout can be made a child of this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
        android:title="Viewer">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:layout_gravity="center_horizontal"
        app:tabMode="fixed"
        app:tabGravity="center"/>
    </android.support.v7.widget.Toolbar>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@color/transparent"/>

</LinearLayout>

回答2:

You can add a layout with components to your ActionBar (the classic one, not the android.support.v7.widget.Toolbar)

First create a menu resource menu\top_menu.xml to be your actionbar menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/topBarTabLayout"
android:title=""
app:actionLayout="@layout/top_bar_tab_layout"
app:showAsAction="always" />

          <!-- Other menu items here -->

</menu>

Then, create a layout called layout/top_bar_tab_layout.xml containing just one TabLayout component (you can add other components too!):

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_layout_menu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="0dp"
    android:paddingTop="0dp" />

To access this TabLayout component, create a reference inside your activity onCreateOptionsMenu:

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

topBarTabLayoutMenuItem = menu.findItem(R.id.topBarTabLayout);
topBarTabLayout = (TabLayout) topBarTabLayoutMenuItem.getActionView();

//ADD #1 TAB WITH A ICON RESOURCE
topBarTabLayout.addTab(topBarTabLayout.newTab().setIcon(R.drawable.file));

//ADD #2 TAB WITH A ICON RESOURCE
topBarTabLayout.addTab(topBarTabLayout.newTab().setIcon(R.drawable.folder));

//This may be necessary to force tablayout to fill all space.
topBarTabLayout.setTabGravity(topBarTabLayout.GRAVITY_FILL);


//Add listener to do stuff!
topBarTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //do whatever you want here, like selecting a viewpager item or open an intent
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
        //do whatever you want here
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
        //do whatever you want here
            }
        });

        return true;
    }
}

This should be enough to add a tabLayout to your actionBar. It will work with other components like spinner or textViews.

Also, if you are planning on setting this tablayout visible only when orientation is landscape, you have to do something like that:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);

    if (newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE) {
                topBarTabLayoutMenuItem.setVisible(true);
        } else {
        topBarTabLayoutMenuItem.setVisible(false);
    }
}