How to make tab title alignment to left in TabLayout in Android

Question

I can't seem to align my tab titles to the left, inside my TabLayout. At the moment, the titles are centered. Here is what I want to achieve.

And this is what I have at the moment. The code I'm using is as follows:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabTextColor="@color/white"
    app:tabSelectedTextColor="@color/white"
    app:tabIndicatorColor="@color/white"
    android:background="@color/slate_grey"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>

Try adding one more tab without any title and disable it. I don't know if it will work but i think you can give it a try. — SripadRaj, Aug 25 '16 at 10:23
Try defining `tabGravity="start"` and `tabMode="scrollable`. — Apurva, Aug 25 '16 at 10:36
@see https://stackoverflow.com/questions/36160978/align-icons-in-tab-layout-to-the-left/46247521#46247521 — Vahe Gharibyan, Sep 15 '17 at 21:20

score 33 · Answer 1 · answered Aug 25 '16 at 10:20

33

add app:tabMode="scrollable" to your <TabLayout.../> and don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" too.

For more info check out https://developer.android.com/reference/android/support/design/widget/TabLayout.html

answered Aug 25 '16 at 10:20

Elvis Chweya

1,532
11
19

3

This should be correct answer. Also can be done by code, `tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE)` – Anthonyeef Jan 06 '17 at 04:05

score 7 · Answer 2 · answered Nov 07 '16 at 10:21

7

Just set the TabLayout width to wrap_content. Done.

answered Nov 07 '16 at 10:21

kopikaokao

500
7
13

this seems to break the text into 2 lines when one is longer than others. – Dino Tw May 23 '22 at 18:19

score 1 · Answer 3 · answered Sep 22 '20 at 12:42

1

Try app:tabPaddingEnd="" very late answer but hope it will help someone

answered Sep 22 '20 at 12:42

Mohammed Rousul

199
3
7

score 1 · Answer 4 · edited Oct 06 '20 at 05:09

There is a way out .... wrap your Tablayout with a Relative layout

<RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <android.support.design.widget.TabLayout
           android:id="@+id/tab_layout"
           android:layout_width="169dp"
           android:layout_height="?actionBarSize"
           android:layout_alignParentStart="true"
           android:layout_marginEnd="120dp"
           android:textAllCaps="false"
           app:tabIndicator="@drawable/tab_indicator"
           app:tabIndicatorColor="#ffffff"
           app:tabIndicatorFullWidth="false"
           app:tabIndicatorGravity="bottom"
           app:tabPaddingEnd="-3dp"
           app:tabPaddingStart="-6dp"
           app:tabSelectedTextColor="#ffffff"
           app:tabTextColor="#717171" />

</RelativeLayout>

score 0 · Answer 5 · answered Sep 27 '17 at 02:06

0

In addition of Elvis' answer, the app:tabPadding* attributes could help you to distribute (or normalize the length of) the tab titles.

answered Sep 27 '17 at 02:06

Carlos

1
1

How to make tab title alignment to left in TabLayout in Android

5 Answers5

Linked