Add separator in tablayout in android

Question

I am using tablayout in my project , I have only two tabs . and I don't have a viewpager . I want to add a separator or divider in between tabs like below .

Tab1 | Tab2

but currently its showing like

Tab1  Tab2

I have already checked this but in this case they have used a view pager . As I said before I don't have a viewpager .

Here is my code for tablayout

xml

<android.support.design.widget.TabLayout
    android:id="@+id/bTabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:layout_alignParentBottom="true"
    android:background="@color/feint_blue"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@color/button_text_color"
    app:tabIndicatorColor="@color/color_bottombar_tab_select"
    app:tabTextColor="@color/dark_gray"
    app:textAllCaps="false"
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
    app:tabGravity="fill" />

java

        TabLayout bottomTab;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
           View rootView = inflater.inflate(R.layout.fragment, container, false);
           bottomTab = (TabLayout) rootView.findViewById(R.id.bTabs);

           bottomTab.addTab(bottomTab.newTab().setText("Tab 1"));
           bottomTab.addTab(bottomTab.newTab().setText("Tab 2"));
        }

Technically , this is what I finally want .

How can I accomplish this ?

Use this link [set the divider between Tabs](http://stackoverflow.com/a/32416751/2335844) — Hadi, Aug 04 '16 at 10:31

score 2 · Accepted Answer · answered Aug 04 '16 at 10:27

Firstly create custom XML file for separator:

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" >

    <!-- Assign Tab title in below text view-->

   <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"/>

     <!-- Create separator -->

     <View
         android:layout_width="1dp"
         android:layout_height="match_parent"
         android:layout_alignParentLeft="true"
         android:background="@android:color/black" />

 </RelativeLayout>

Now in your java file code as below:

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

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

and add below lines in tablayout tag:

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

tab_item_seletor.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>

Thanks , but it always set the second tab selected , how can set the first tab selected initially — Mithun Sarker Shuvro, Aug 04 '16 at 13:17
you can do it from your pager adapter class. Set your fragment which you wan to set first in case 0 in switch case statement. — Bhunnu Baba, Aug 06 '16 at 09:45

Add separator in tablayout in android

1 Answers1