Tab Interval Setting Method in TabLayout

TabLayout can be used with ViewPager for a lot of convenience, but there are still lots of places where people spit out TabLayout.

Here's just how to set the interval between tab s, find a lot of ways on the web, what padding and margin don't work, there's no way, TabLayout can only do it on its own.The results are as follows:



1. Implementation method, since this is not a good setting, then do something directly in the background, the layout code is as follows:

<android.support.design.widget.TabLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/tl_download_tabs"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:layout_gravity="center_horizontal"
        android:overScrollMode="never"
        app:tabMode="fixed"
        app:tabPaddingStart="30dp"
        app:tabPaddingEnd="30dp"
        app:tabIndicatorHeight="0dp"
        app:tabBackground="@drawable/download_tab_bg_selector"
        app:tabSelectedTextColor="#000000"
        app:tabTextColor="#ffffff"/>


2. The key point is on the background selector, which is coded as follows:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <!--<shape>
            <solid android:color="#ffffff"/>
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>-->
        <!--For the sake of TabLayout Internal Tab There are intervals, no other settings can be found at this time, only intervals can be set in the background graphics-->
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@android:color/transparent"/>
                </shape>
            </item>
            <item android:left="5dp" android:right="5dp">
                <shape>
                    <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
                    <solid android:color="#ffffff"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_selected="false">
        <!--<shape>
            <solid android:color="#bcbcbc"/>
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>-->
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@android:color/transparent"/>
                </shape>
            </item>
            <item android:left="5dp" android:right="5dp">
                <shape>
                    <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
                    <solid android:color="#bcbcbc"/>
                </shape>
            </item>
        </layer-list>
    </item>

</selector>
The commented out place is the original no interval selector, where you set about one padding for the background directly, the effect bar.

Disadvantages: If the interval is too large, the disadvantage of this method is that you can also select tab by clicking in the blank space.

However, for the interval is not very large, it is almost impossible to feel.


Third, the use of Activity is very simple:

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);

        mTabLayout.addTab(mTabLayout.newTab().setText("Downloaded"));
        mTabLayout.addTab(mTabLayout.newTab().setText("Downloading"));

        mTabLayout.setupWithViewPager(mViewPager);

Tags: Android xml encoding

Posted on Sun, 24 May 2020 12:48:06 -0400 by Firestorm3d