How to set the divider between Tabs in TabLayout of design support library?

material design tabs
android tablayout tab width
android-tablayout space between tabs
android.support.design.widget.tablayout androidx
android-tablelayout divider line
android tablayout custom view
tablayout with viewpager
tablayout in android

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.

I have successfully configured the pager adapter and the tabs are looking good but cant set the divider between the tabs.

I want this type of tabs

Tab1 | Tab2 | Tab3

but currently its showing

Tab1  Tab2  Tab3

My xml is

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

        <include layout="@layout/toolbar" />

        <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" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

I am adding tabs by this

viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setOffscreenPageLimit(2);
    adapter = new TabAdapterLoginActivity(getSupportFragmentManager(),
            titles);
    viewPager.setAdapter(adapter);
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setupWithViewPager(viewPager);

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

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

for (int i = 0; i < tabLayout.getTabCount(); i++) {
      TabLayout.Tab tab = tabLayout.getTabAt(i);
      RelativeLayout relativeLayout = (RelativeLayout) 
            LayoutInflater.from(this).inflate(R.layout.tab_layout, tabLayout, false);

      TextView tabTextView = (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"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<!-- Tab title -->
<TextView
    android: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 -->
<View
    android: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"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/abc_primary_text_material_dark" />
    <item android:state_focused="true" android:color="@color/abc_primary_text_material_dark" />
    <item android:state_pressed="true" android:color="@color/abc_primary_text_material_dark" />
    <item android:color="@color/abc_secondary_text_material_dark" />
</selector>

Add separator in tablayout in android, 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,​  I have work in a activity contains tabs. i need to set divider between two tabs i need a white horizontal divider line between all tabs Here is my code &lt;?xml version="1.0" encoding="utf-8"?&g

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

So just use below code to add dividers

    View root = tabLayout.getChildAt(0);
    if (root instanceof LinearLayout) {
        ((LinearLayout) root).setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
        GradientDrawable drawable = new GradientDrawable();
        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

Tab Layout, I want to add a separator or divider in between tabs like below . Here is my code for tablayout xml <android.support.design.widget. Put a ListView and TextView in a NavigationDrawerFragment This pattern is greatly simplified with the Android Design Support Library The article says to create your drawer like so:​  I am using Design support library to create Tabs. I added Toolbar and Tab view layout. I want to add Spinner widget as one of the TAB with design support library.

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.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:orientation="vertical">


    <FrameLayout
        android:id="@+id/content_parent"

        android:layout_width="fill_parent"
        android:layout_height="fill_parent">


        <android.support.v4.view.ViewPager
            android: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.TabLayout
            android: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"

              />


        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0.5dp"
            android:layout_gravity="bottom"
            android:layout_marginBottom="60dp"
            android:background="#60ffffff"></LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="60dp"
            android:layout_gravity="bottom|right"
            android:background="@android:color/transparent"
            android:orientation="horizontal">


            <Button
                android:id="@+id/button1"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:clickable="true" />



            <LinearLayout
                android:layout_width="0.5dp"
                android:layout_height="60dp"
                android:background="#60ffffff"></LinearLayout>

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:clickable="true"

                />

            <LinearLayout
                android:layout_width="0.5dp"
                android:layout_height="60dp"
                android:background="#60ffffff"></LinearLayout>

            <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:clickable="true"

                />

            <LinearLayout
                android:layout_width="0.5dp"
                android:layout_height="60dp"
                android:background="#60ffffff"></LinearLayout>

            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:clickable="true"

                />

            <LinearLayout
                android:layout_width="0.5dp"
                android:layout_height="60dp"
                android:background="#60ffffff"></LinearLayout>

            <Button
                android: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

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

Google Play Style Tabs using TabLayout, A horizontal layout to display tabs. Design & API Documentation with the respective tabs and lets the user quickly change between content views. Using TabLayout from the Design Support Library -- the least you need to know. This post presents a simple example of using TabLayout from the Android Design Support Library. It’s the second part in a series about implementing tabs on Android without using any APIs deprecated in API level 21.

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

ogaclejapan/SmartTabLayout: A custom ViewPager title , Prior to Android "M", the easiest way to setup tabs with Fragments was to use style sliding tabs, make sure to add the Material Design Components Library. ViewPager component will be used to page between the various fragments With the recent updates to the design support library, you can also get the selected tab  Tabs are now best implemented by leveraging the ViewPager with a custom "tab indicator" on top. In this guide, we will be using Google's new TabLayout included in the support design library release for Android "M".

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 = new FragmentOne();
    fragmentTwo = new FragmentTwo();

    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 Background
    for (int i = 1; i < allTabs.getTabCount(); i++) {
        TabLayout.Tab tab = allTabs.getTabAt(i);
        RelativeLayout relativeLayout = (RelativeLayout)
                LayoutInflater.from(getActivity()).inflate(R.layout.tab_layout, allTabs, false);
        tvTabText = (TextView) relativeLayout.findViewById(R.id.tab_title);
        View view = (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"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Tab title -->
    <TextView
        android: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 -->

    <View
        android: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"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/white" />
    <item android:state_focused="true" android:color="@android:color/white" />
    <item android:state_pressed="true" android:color="@android:color/white" />
    <item android:color="#82c6e6" />
</selector>

Please consider as a optional answer always.

How to add margin between tabs in TabLayout?, This library has been added some features and utilities based on android-​SlidingTabBasic For legacy android support library (28.0.0) dependencies { compile stl_dividerColors, Multiple colors of the dividers between tabs, can set the color for each tab stl_customTabTextViewId, Text view ID in a custom tab layout. In this tutorial we will see how to add tabs to a project by using TabLayout together with ViewPager, and some other new views from the design library 🙂 Before starting I will make summary to present the main idea of creating the tabs. xml in the xml file, because we use TabLayout together with

TabWidget, How to set the divider between Tabs in TabLayout of design support , I am using the new android.support.design.widget.TabLayout of v7-appcompat library, and  Tab layout are visible below toolbar with View pager, used to create swipeable views on. Tabs are designed to work with fragments. Use them to swipe fragments in view pager. In this article, we are…

android.graphics.drawable.GradientDrawable.setSize java code , Sets the drawable to use as a divider between the tab indicators. void, setEnabled(boolean enabled). Set the enabled state of this view. void  TabLayout provides a horizontal layout to display tabs. Population of the tabs to display is done through TabLayout.Tab instances. You create tabs via newTab().From there you can change the tab's label or icon via setText(int) and setIcon(int) respectively.

PagerSlidingTabStrip, How to set the divider between Tabs in TabLayout of design support library? View root = tabLayout.getChildAt(0); if (root instanceof LinearLayout)  TabLayout is introduced in design support library to implement tabs. Tabs are created using newTab() method of TabLayout class. The title and icon of Tabs are set through setText(int) and setIcon(int) methods of TabListener interface respectively. Tabs of layout are attached over TabLayout using the method addTab(Tab) method.

Comments
  • Have you tried it programmatically? for example ` mTabHost.getTabWidget().setDividerDrawable(R.Color.Blue);`
  • Please set this in your style <item name="android:divider">@color/your_color</item>
  • I use tab page ViewPagerIndicator by JakeWharton and it solves the purpose
  • For some strange reason, for me it looks like | Tab1 | Tab2 | Tab3
  • It's because tab divider in layout is left aligned. You can change the property android:layout_alignParentLeft="true" to android:layout_alignParentRight="true". Additionally, if you wish to hide the divider on first tab, you can assign an id to it in tab_layout.xml, fetch it via findViewById() method in code and set its visibility to GONE (if i == 0 in the for loop).
  • This works..but it select second tab. IF i change to first tab programatically,the text color looks unselected.
  • @user3289108 did you find any solution for get selected first tab? i never get selected and xml sector not working for first tab if i not click on any other tab.
  • for (int i = 1;...) should remove divider from the first tab, and a LinearLayout in Horizontal orientation should further simplify the layout.
  • Nice solution ! thank you so much. For those who use an image as a divider, the image will be stretched out by the height of TabLayout, and there is a way to fix it: stackoverflow.com/questions/10706853/…
  • should be the selected answer
  • It is the simplest method. Thank you.
  • It is working fine but it is showing divider before first tab which i can''t able to remove.