Custom TabLayout like Google Play Music app

Question

I implement TabLayout to similiar Google Play Music app.

• Portrait (Google Play Music):
• Landscape (Google Play Music):

This is my layout :

 <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

My code to handle TabLayout :

private void init() {
    mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
    mTabLayout.addTab(mTabLayout.newTab().setText("Category 1"));
    mTabLayout.addTab(mTabLayout.newTab().setText("Category 2"));
    mTabLayout.addTab(mTabLayout.newTab().setText("Category 3"));
    mTabLayout.addTab(mTabLayout.newTab().setText("Category 4"));
    mTabLayout.addTab(mTabLayout.newTab().setText("Category 5"));
    mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}

But result is TabLayout doensn't have margin on the left :

• Portrait (my example)::
• Landscape (my example):

I try this article but the result is not as expect. How can i custom TabLayout like Google Play Music app as show above ?

Answer 1

You should use android:marginLeft to the TabLayout.

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp">

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

To have different margins for portrait and landscape orientations, use separate values at values/dimens.xml and values-land/dimens.xml

Update:

Using margin makes a space, even when the tab is scrolled. So use padding, with clipToPadding="false"

<android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="16dp"
            android:clipToPadding="false">

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