问题
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);
回答1:
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>
回答2:
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
回答3:
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>
回答4:
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
回答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.
回答6:
try this, hope it works fine for you.
tab_activity.xml
<TabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/edt_footer_bg" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="15dp"
android:background="@android:color/transparent" >
</FrameLayout>
</LinearLayout>
</TabHost>
home_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:mytextview="http://schemas.android.com/apk/res/com.bne"
android:layout_height="50dp"
android:layout_marginRight="2dp"
android:background="@color/app_bg_inner"
android:gravity="center"
android:padding="10dp" >
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@drawable/tab_selector"
android:textSize="@dimen/txt_12"
mytextview:txt_custom_font="@string/RobotoRegular" />
</LinearLayout>
回答7:
try to use this code to set divder in TabHost mTabHost.getTabWidget().setDividerDrawable(R.Color.blue);
回答8:
One way to add a custom divider is to set it programmatically:
tablayout.getTabWidget().setDividerDrawable(R.drawable.yourdivider image name);
Make sure however, you call this before you set the content of the tabs. It would crash on me if I called it after.
you can also use this line if this doesn't work
if(Build.VERSION.SDK_INT >= 11)
tablayout.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE);
来源：https://stackoverflow.com/questions/32204184/how-to-set-the-divider-between-tabs-in-tablayout-of-design-support-library