Show tabs inside Android Toolbar in landscape mode

Question

I am migrating my application from ActionBarSherlock to using AppCompat library and similar UI built into Android L/M.

But I have a basic problem while porting the following:

With ActionbarSherlock:

I have tabbed navigation on the activity. In portrait the tabs appeared below the main toolbar/actionbar of the app, and when turned to landscape orientation, the tabs automatically went inside the toolbar. This was very convenient because otherwise the right side of the toolbar/actionbar would hvae been just empty wasted space (I have only one menu on the right side of the toolbar).

Adding screenshots of the app with ActionbarSherlock at the bottom.

For ActionBarSherlock, all I had to do was to declare my MainActivity as

public class MainActivity extends SherlockFragmentActivity implements ActionBar.TabListener

Then add the following code to onCreate(...)

getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for (int ch = 0; ch < MAX_NUM_CHANNELS; ch++)       // Number of tabs
{
    ActionBar.Tab tab = getSupportActionBar().newTab();
    m_tabImageViews[ch] = new ImageView(this);
    m_tabImageViews[ch].setPadding(0, 10, 0, 10);
    m_tabImageViews[ch].setImageResource(m_chIcons[ch]);
    tab.setCustomView(m_tabImageViews[ch]);
    Integer k = ch;
    tab.setTag(k);
    tab.setTabListener(this);
    getSupportActionBar().addTab(tab);
}

and finally, implement the following function to deal with tab selection:

@Override
public void onTabSelected(Tab tab, FragmentTransaction transaction)
{
    ...
}

With AppCompat Library:

I was thinking about using ActionBar class provided by Google, thinking that it would be very similar in behavior to ActiobarSherlock, but had to discard the idea because Google says that they have deprecated it.

So the only choice was to use Toolbar and TabLayout with PagerAdapter. This works fine in portrait orientation, but in landscape orientation, I am now forced to have the tabs below the toolbar, thereby wasting the space on the screen (right side of the toolbar is empty).

How can I make the tabs show within the toolbar (inline)? I looked at following examples, but they all had the same issue:

1. SlidingTabsBasic
2. SlidingTabsColors
3. Few others

Would appreciate any pointers...

Update

I tried using ActionBar. It works fine and precisely does what I want, but I am afraid that Google will pull the plug on this class any time (already deprecated). So I want to move to the supported UI element. Hence the question... Thanks in advance for the help.

1. 
2. 

Answer 1

For tabs to appear inside the toolbar, you need to put <TabLayout> tag inside <Toolbar> tab.

1. Layout with tabs inside toolbar (your desired effect for landscape orientation)

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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.Light" >

      <android.support.design.widget.TabLayout
          android:id="@+id/tabs"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:tabMode="fixed"
          app:tabGravity="fill"/>

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

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

2. Layout with tabs outside the toolbar (usually seen in portrait orientation)

<android.support.design.widget.AppBarLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  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.Light" >
  </android.support.v7.widget.Toolbar>

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

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

And you can have one layout xml for portrait mode (in layout folder) and another one for landscape mode (in layout-land folder)

Answer 2

After a lot of experimentation, I found that there is nothing comparable to ActionBar for what I want to achieve. So even if it's deprecated, I ended up using ActionBar. It's working fine for now. I will continue looking for any other solutions and will post here if I find one.