Search code examples
androidmaterial-designandroid-toolbar

Android action-toolbar tabs size in landscape mode


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.


Solution

  • 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" />`
    

    Meterial design Tab layout detailed tutorial