Text inside tabs of a TabLayout is not centered

Question

I am using a TabLayout. I want full screen width to be filled by TabLayout, so I added app:tabGravity="fill". My problem is that now tab text is not centered. Here is a screenshot:

The code of TabLayout is as follows:

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        android:minHeight="?attr/actionBarSize"
        />

I have seen many questions but none of them solves my problem. Any help is highly appreciated. For details I want to tell that I am trying this example. Device is running on Android 2.3.6 (API 10). Screen is 320x240.

Use this for adjusting the text: android:gravity="center" OR android:textAlignment="center" — MezzDroid, Dec 23 '20 at 10:47

score 4 · Answer 1 · answered Aug 12 '18 at 09:33

4

just do like this:-

       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabMaxWidth="0dp"
       app:tabGravity="fill"

answered Aug 12 '18 at 09:33

M. H.

960
11
13

MezzDroid · Accepted Answer · 2017-01-18T20:37:02.283

2

Use this for adjusting the text:

android:gravity="center" OR android:textAlignment="center"

you should create a custom tab .. you are using these attributes for tabLayout which will not work ... the example link you provided above uses a file named custom_tab.xml . Use that for defining your textView and put these attributes inside it.

edited Jan 18 '17 at 20:37

answered Jan 18 '17 at 20:10

MezzDroid

560
4
11

4

None of `android:gravity="center"` and `android:textAlignment="center"` is able to solve the problem. – Birendra Singh Jan 18 '17 at 20:15

santosh kumar · Answer 3 · 2017-01-18T20:05:48.107

0

Add this to xml layout android:gravity="center"

you can refer this for more details

http://joshclemm.com/blog/?p=136

edited Jan 18 '17 at 20:05

answered Jan 18 '17 at 19:59

santosh kumar

2,952
1
15
27

Already tried. It's not working. I have seen other questions which tell to use `android:gravity="center"`. – Birendra Singh Jan 18 '17 at 20:11
are you using textview for displaying . – santosh kumar Jan 18 '17 at 20:12
you should add gravity in text view not in tab layout. – santosh kumar Jan 18 '17 at 20:12
I have already told that I am following answer to some question. http://stackoverflow.com/a/35968394/5969624 – Birendra Singh Jan 18 '17 at 20:18
you have missed it tab layout there does noot have tab gravity. – santosh kumar Jan 18 '17 at 20:20

score 0 · Answer 4 · answered Jan 18 '17 at 20:42

In default the text should be center if you do not overrided with another not centered style.

any way if you sure Gravity="center" is not working, you can also put your custom layout as tab background. so you create a relative layout that has a textView in center of it. ( in this way you are free to put wanted layout as tab items) so feel free.

TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
tabLayout.getTabAt(postion).setCustomView(resourceId);

hope helpful .

score 0 · Answer 5 · answered Oct 16 '17 at 17:41

Oddly, the preview in Android Studio shows the tab labels centered, but on the device they are left-aligned.

As other answer have suggested, using a custom view is a good way to gain control over the layout.

Create a layout file layout/view_tab_label.xml with a TextView with id @android:id/text1, so you can still specify the tab text inside the TabItem:

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textColor="@color/tab_label"
    android:gravity="center"/>

Reference this layout from the tab item (android:layout attribute in each TabItem):

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:tabIndicatorColor="@color/selected_tab"
    app:tabBackground="@color/tab_background">

    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout="@layout/view_tab_label"
        android:text="@string/tab_1_title" />

    <android.support.design.widget.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout="@layout/view_tab_label"
        android:text="@string/tab_2_title" />

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

Create a color resource file color/tab_label.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/selected_tab" android:state_selected="true"/>
    <item android:color="@color/unselected_tab" android:state_selected="false"/>
</selector>

score 0 · Answer 6 · answered Aug 14 '20 at 04:27

0

My problem was that TextView wasn't centered inside layout. Not Text itself

So. In TextView.

android:layout_gravity="center"

answered Aug 14 '20 at 04:27

icarumbas

1,777
3
17
30

Text inside tabs of a TabLayout is not centered

6 Answers6