shuvro shuvro - 3 months ago 135
Android Question

Add separator in tablayout in android

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 .

enter image description here

How can I accomplish this ?

Answer

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