Geek Answers Handbook

Is there a way to add a vertical line between each tab in TabLayout

TabLayout is quite convenient for creating a sliding tab for the viewpager, except that you cannot add a vertical line between the tabs, like TabHost in code or xml, as far as I know, so is there any other way to do this with ease

+7
android
source share
3 answers

TabLayout is actually a horizontal scrollable LinearLayout.

Just use the following code to add separators:

LinearLayout linearLayout = (LinearLayout)tabLayout.getChildAt(0); linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); GradientDrawable drawable = new GradientDrawable(); drawable.setColor(Color.GRAY); drawable.setSize(1, 1); linearLayout.setDividerPadding(10); linearLayout.setDividerDrawable(drawable);
+34
source share

There is a way to add a separator using the Tab method setCustomView:

 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(); }

Custom tab delimited layout (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 the TabLayout tab to the horizontal position 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 the color selector for the text of the tab title when it is 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>

See this link for more details: fooobar.com/questions/106920 / ...

0
source share

try it,

You can add a line manually to the tab_indicator layout file.

for the horizontal line,

 <View android:layout_height="1dp" android:id="@+id/line" android:layout_width="fill_parent" android:background="your color" />

and for the vertical line

 <View android:layout_height="7dp" android:id="@+id/line" android:layout_width="1dp" android:background="your color" />
0
source share

More articles:


All Articles