How To Set The Divider Between Tabs In TabLayout Of Design Support Library?
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
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
Solution 2:
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>
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.
<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>
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 = 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.
Post a Comment for "How To Set The Divider Between Tabs In TabLayout Of Design Support Library?"