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.

Symer

Use this for adjusting the text: android:gravity="center" OR android:textAlignment="center" – Pentagon

Answer 1

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.

Pentagon

None of android:gravity="center" and android:textAlignment="center" is able to solve the problem. – Symer

Answer 2

just do like this:-

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

Gangboard

Answer 3

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

you can refer this for more details

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

Drivel

Already tried. It's not working. I have seen other questions which tell to use android:gravity="center". – Symer

are you using textview for displaying . – Drivel

you should add gravity in text view not in tab layout. – Drivel

I have already told that I am following answer to some question. https://mcmap.net/q/714686/-whatsapp-like-collapsing-toolbar – Symer

you have missed it tab layout there does noot have tab gravity. – Drivel

Answer 4

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 .

Subtonic

Answer 5

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>

Fosque

Answer 6

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

So. In TextView.

android:layout_gravity="center"

Adios