How can I create same sized tabs in TabLayout

Question

I am using the DesignSupportLibrary (v22.2.0) and want the tabs in the TabLayout to be the same width - regardless the tab text length. I have tried MODE_FIXED but it still shows the tabs with different widths. Here is the xml:

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabMode="fixed"/>

Answer 1

If you want to specify the minimum width for each tab, you can set it in the style:

<style name="MyTabLayoutStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="tabMinWidth">100dp</item>
</style>

and then set the theme to this style instead (you can delete the tabMode attribute as well):

<android.support.design.widget.TabLayout
  android:id="@+id/tab_layout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="?attr/colorPrimary"
  android:theme="@style/MyTabLayoutStyle"/>

Alternately, you can set the tabMinWidth directly on the TabLayout:

<android.support.design.widget.TabLayout
  android:id="@+id/tab_layout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="?attr/colorPrimary"
  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
  app:tabMinWidth="100dp"/>

An additional note: It looks like MODE_FIXED does not work properly unless you define the layout_width of the TabLayout (instead of using "wrap_content"). However the tabs will still only expand to match the widest tab (as determined by the longest length of text). So if your defined width is larger than the generated tabs. there will be an empty space to the right of the tabs.