How To Set The Divider Between Tabs In Tablayout Of Design Support Library?

November 28, 2023 Post a Comment

I am using the new android.support.design.widget.TabLayout of v7-appcompat library, and found a problem, there is no way to set the divider between the tabs, dont know if there is.

Solution 1:

TabLayout is actually HorizontalScrollView and it's first child is LinearLayout.

So just use below code to add dividers

Viewroot= tabLayout.getChildAt(0);
    if (root instanceof LinearLayout) {
        ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        GradientDrawabledrawable=newGradientDrawable();
        drawable.setColor(getResources().getColor(R.color.separator));
        drawable.setSize(2, 1);
        ((LinearLayout) root).setDividerPadding(10);
        ((LinearLayout) root).setDividerDrawable(drawable);
    }

Below is the sample screen shot

Screen 1

Screen 2

Solution 2:

There is a way to add divider by using Tab setCustomView method:

TabLayouttabLayout= (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);

for (inti=0; i < tabLayout.getTabCount(); i++) {
      TabLayout.Tabtab= tabLayout.getTabAt(i);
      RelativeLayoutrelativeLayout= (RelativeLayout) 
            LayoutInflater.from(this).inflate(R.layout.tab_layout, tabLayout, false);

      TextViewtabTextView= (TextView) relativeLayout.findViewById(R.id.tab_title);
      tabTextView.setText(tab.getText());
      tab.setCustomView(relativeLayout);
      tab.select();
}

Tab custom layout with divider (tab_layout.xml):

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><!-- Tab title --><TextViewandroid:id="@+id/tab_title"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textColor="@drawable/tab_item_selector"/><!-- Tab divider --><Viewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_alignParentLeft="true"android:background="@android:color/black" /></RelativeLayout>

Set TabLayout tab horizontal padding to 0dp:

<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_tabbar_background"
        app:tabIndicatorColor="@android:color/white"
        app:tabIndicatorHeight="4dp"

        app:tabPaddingStart="0dp"
        app:tabPaddingEnd="0dp" />

And a selector for tab title text color when it's selected (tab_item_selector.xml):

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_selected="true"android:color="@color/abc_primary_text_material_dark" /><itemandroid:state_focused="true"android:color="@color/abc_primary_text_material_dark" /><itemandroid:state_pressed="true"android:color="@color/abc_primary_text_material_dark" /><itemandroid:color="@color/abc_secondary_text_material_dark" /></selector>

Solution 3:

I do not think it is possible though unless during Tab creation you specify a customView and add your divider so for instance; a TextView and you explicitly TextView.setCompoundDrawablesWithIntrinsicBounds(0, 0,(int)id_of_a_divider, 0);

like you try to detect if its the first Tab,

if(firstTab){
    tabLayout.getTabAt(0).getCustomView()
    .setCompoundDrawablesWithIntrinsicBounds(0, 0,(int)id_of_a_divider, 0);
    //some little casting
}else if(lastTab){
  //dont get any
   tabLayout.getTabAt(index).getCustomView()
    .setCompoundDrawablesWithIntrinsicBounds(0,0,0, 0);
 else{
    //the rest takes two sides,
     tabLayout.getTabAt(index).getCustomView()
    .setCompoundDrawablesWithIntrinsicBounds((int)id_of_a_divider
       , 0,(int)id_of_a_divider, 0);

i hope you, get my idea

Solution 4:

hi you can try this as workaround what i did as follow :-

1-create normal tablayout.

2-make the mode MODE_FIXED

2-adding it in framellayout and above it add linear layout horizonytal.

3-add buttons in horizontal layout as the number of your tabs and make the buttons equals in size layout_wight=1 for each button.

4-make the buttons background transparent.

3-add spertator between the buttons in horizinoal linearlayout layout via view or anyview and specify the widht as 0.5dp or what ever thick you want.

4-you can add yor clicks on buttons or change the button to any oter view that not handle the clicking so the tab under it will take the click action :).

it might be ugly solutuions but it works perfect and do the job

another hint if you want to change the background of the selected tab you can make the indicator hieght in tablayout style equale the actual height of the tablayout.

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent"android:orientation="vertical"><FrameLayoutandroid:id="@+id/content_parent"android:layout_width="fill_parent"android:layout_height="fill_parent"><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="fill_parent"android:layout_weight="1"android:background="@android:color/transparent" /><android.support.design.widget.TabLayoutandroid:id="@+id/sliding_tabs"style="@style/MyCustomTabLayout"android:layout_width="match_parent"android:layout_height="60dp"android:layout_gravity="bottom"android:background="#99888888"android:clickable="false"android:layoutDirection="rtl"

              /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="0.5dp"android:layout_gravity="bottom"android:layout_marginBottom="60dp"android:background="#60ffffff"></LinearLayout><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="60dp"android:layout_gravity="bottom|right"android:background="@android:color/transparent"android:orientation="horizontal"><Buttonandroid:id="@+id/button1"android:layout_width="match_parent"android:layout_height="60dp"android:layout_weight="1"android:background="@android:color/transparent"android:clickable="true" /><LinearLayoutandroid:layout_width="0.5dp"android:layout_height="60dp"android:background="#60ffffff"></LinearLayout><Buttonandroid:id="@+id/button2"android:layout_width="match_parent"android:layout_height="60dp"android:layout_weight="1"android:background="@android:color/transparent"android:clickable="true"

                /><LinearLayoutandroid:layout_width="0.5dp"android:layout_height="60dp"android:background="#60ffffff"></LinearLayout><Buttonandroid:id="@+id/button3"android:layout_width="match_parent"android:layout_height="60dp"android:layout_weight="1"android:background="@android:color/transparent"android:clickable="true"

                /><LinearLayoutandroid:layout_width="0.5dp"android:layout_height="60dp"android:background="#60ffffff"></LinearLayout><Buttonandroid:id="@+id/button4"android:layout_width="match_parent"android:layout_height="60dp"android:layout_weight="1"android:background="@android:color/transparent"android:clickable="true"

                /><LinearLayoutandroid:layout_width="0.5dp"android:layout_height="60dp"android:background="#60ffffff"></LinearLayout><Buttonandroid:id="@+id/button5"android:layout_width="match_parent"android:layout_height="60dp"android:layout_weight="1"android:background="@android:color/transparent"android:clickable="true"

                /></LinearLayout></FrameLayout>

and this is for style

<stylename="MyCustomTabLayout"parent="Widget.Design.TabLayout"><itemname="tabIndicatorColor">#50000000</item><itemname="tabTextAppearance">@style/MyCustomTabTextAppearance</item><itemname="tabIndicatorHeight">60dp</item><itemname="tabSelectedTextColor">#222222</item>

Solution 5:

Not Best but alternative way i used for current.

In Main.Xml

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/Base.Widget.Design.TabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/master_color"
    app:elevation="0dp"
    app:tabMode="scrollable"
    app:tabPaddingEnd="2dp"
    app:tabPaddingStart="0dp"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="#82c6e6" />

i am using fragment and do in onCreate() like

if (savedInstanceState == null) {
    replaceFragment(fragmentOne);
}

Set Tab

private void setupTabLayout() {

    fragmentOne = newFragmentOne();
    fragmentTwo = newFragmentTwo();

    allTabs.addTab(allTabs.newTab().setText("CURRENT YEAR"), true);
    allTabs.addTab(allTabs.newTab().setText("2015"));
    allTabs.addTab(allTabs.newTab().setText("2014"));
    allTabs.addTab(allTabs.newTab().setText("2013"));
    allTabs.addTab(allTabs.newTab().setText("2012"));
    allTabs.addTab(allTabs.newTab().setText("2011"));

    //Hide Indicator
    allTabs.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.transparent));
    //Set Custom tab Backgroundfor (inti=1; i < allTabs.getTabCount(); i++) {
        TabLayout.Tabtab= allTabs.getTabAt(i);
        RelativeLayoutrelativeLayout= (RelativeLayout)
                LayoutInflater.from(getActivity()).inflate(R.layout.tab_layout, allTabs, false);
        tvTabText = (TextView) relativeLayout.findViewById(R.id.tab_title);
        Viewview= (View) relativeLayout.findViewById(R.id.deviderView);

        tvTabText.setText(tab.getText());
        tab.setCustomView(relativeLayout);

        if (i == 0) {
            view.setVisibility(View.GONE);
            tab.select();
        }
    }

}

tab_layout.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><!-- Tab title --><TextViewandroid:id="@+id/tab_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:gravity="center_horizontal"android:padding="10dp"android:text="sdasd"android:textColor="@drawable/tab_item_selector"android:textSize="@dimen/text_size_normal"android:textStyle="bold" /><!-- Tab divider --><Viewandroid:id="@+id/deviderView"android:layout_width="1dp"android:layout_height="wrap_content"android:layout_gravity="right"android:layout_marginBottom="15dp"android:layout_marginTop="15dp"android:background="@android:color/white"android:gravity="right" /></RelativeLayout>

tab_item_selector.xml

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_selected="true"android:color="@android:color/white" /><itemandroid:state_focused="true"android:color="@android:color/white" /><itemandroid:state_pressed="true"android:color="@android:color/white" /><itemandroid:color="#82c6e6" /></selector>

Please consider as a optional answer always.

bringthem-home