So I'm creating a Material design app for Android. I'm using the new Toolbar instead of using an ActionBar. In one activity, I want to display tabs below the toolbar. This works for both portrait and landscape mode alike, but in landscape mode, the tabs are centered and do not cover the entire width of the view.
Is this by design or is there something I need to know?
This is the layout for my activity:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:height="?attr/actionBarSize"
android:background="@color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="@style/ToolbarTitle"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/toolbar_tabs"
android:height="?attr/actionBarSize"
android:background="@color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
The following code initializes this in onCreate
:
// Set up the toolbar
this.setSupportActionBar(mToolbar);
ActionBar ab = this.getSupportActionBar();
if (ab != null)
{
ab.setDisplayHomeAsUpEnabled(true);
ab.setHomeButtonEnabled(true);
ab.setDisplayShowTitleEnabled(true);
}
// Set up the pager and tabs from the pager
mTabViewPager.setAdapter(mTabPagerAdapter);
mTabLayout.setupWithViewPager(mTabViewPager);
The mTabPagerAdapter
is a pager adapter that holds the pages to be shown by the tabs as found in the docs.
You can use app:tabGravity="fill"
to fit width in entire screen.
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="@color/white"
app:tabMode="fixed"
app:tabMaxWidth="0dp"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/white_dim" />`