Search code examples
androidandroid-tabs

Android Smart tab layout how to have equally spaced tabs with centering


I am trying to achieve a layout similar to this using the SmartTabLayout library: https://blog.nus.edu.sg/mobileixd/files/2015/02/1-1g3mmmu.png

I am able to add equally spaced tab icons but they are all placed close together to the center of the screen. Alternately I am able to have equally spaced tabs but without the selected one at the center. How do I achieve a combination of both ? I am trying to achieve this with a transparent divider of some thickness, but am not able to achieve the required result.

How do I achieve this kind of layout with the selected tab in the center and the other two at the extreme ends of the screen ?

I am using the following layout for this :

<com.abc.resfree.ui.widgets.SmartTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:stl_dividerColor="@android:color/transparent"
        app:stl_dividerThickness="30dp"
        app:stl_indicatorColor="@color/transparent"
        app:stl_indicatorThickness="0dp"
        app:stl_underlineColor="@color/transparent"
        app:stl_underlineThickness="0dp"
        app:stl_indicatorAlwaysInCenter="true"
        />

Solution

  • Didn't worked with SmartTabLayout library but I am using TabLayout which is provided by android support library. You can try

    app:tabMode="scrollable"
    app:tabGravity="fill"
    

    these properties (they work with support library ofcourse!). You might wanna try it.