Is there a way to add margin between the tabs in a TabLayout? I've tried with using a custom style for Widget.Design.TabLayout, but there are properties only related to padding, but no margins.
To display the tab, you need to add it to the layout via one of the addTab(Tab) methods. For example: TabLayout tabLayout = ...; tabLayout. addTab(tabLayout.
Open the MainActivity class. Firstly, initialize ViewPager2 and TabLayout then set the adapter on ViewPager2. Then, create a TabLayoutMediator to link the TabLayout to the ViewPager2, and attach it.
Ok mates, after spending 2-3 hours on that I finally found a solution.
If you are using TabLayout there is no way to add margins to the tabs by using styles and so on. (as @Connecting life with Android earlier)
But, you can do that by writing some Java code. All in all your code should look similar to that one:
for(int i=0; i < mTabLayout.getTabCount(); i++) {
View tab = ((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i);
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
p.setMargins(0, 0, 50, 0);
tab.requestLayout();
}
In order to get each and every tab as a View we have to first get the container which contains them. In this case the TabLayout is using a SlidingTabStrip as a container for the tabs. The SlidingTabStrip is the first child of the TabLayout:
View tab = ((ViewGroup) mTabLayout.getChildAt(0))
And after this small detail, everything is pretty straight forward.
Here's how I did it in pure xml.
dimens.xml:
<!-- Set this to 50% of what you want the actual space between the tabs to be. -->
<dimen name="tab_spacing_half">5dp</dimen> <!-- i.e., 10dp spacing between tabs. -->
Layout containing your TabLayout:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/tab_spacing_half"/>
Add this to your theme in styles.xml:
<item name="tabBackground">@drawable/tab_background</item>
drawable-nodpi\tab_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@drawable/tab_background_selected"
android:state_selected="true" />
<item
android:drawable="@drawable/tab_background_unselected"
android:state_selected="false"
android:state_focused="false"
android:state_pressed="false" />
</selector>
drawable-nodpi\tab_background_selected.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="@dimen/tab_spacing_half"
android:right="@dimen/tab_spacing_half"
android:top="@dimen/tab_spacing_half"
android:bottom="@dimen/tab_spacing_half">
<shape
android:shape="rectangle">
<corners
android:radius="@dimen/border_radius_small">
</corners>
<stroke
android:width="@dimen/divider_height_thick"
android:color="@color/white">
</stroke>
</shape>
</item>
</layer-list>
...That's where the trick is. Effectively, wrapping your background shape in an item
with "padding" according to your @dimen/tab_spacing_half
value. And finally...
drawable-nodpi\tab_background_unselected.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="@dimen/tab_spacing_half"
android:right="@dimen/tab_spacing_half"
android:top="@dimen/tab_spacing_half"
android:bottom="@dimen/tab_spacing_half">
<shape
android:shape="rectangle">
<corners
android:radius="@dimen/border_radius_small">
</corners>
<stroke
android:width="@dimen/divider_height_thin"
android:color="@color/white">
</stroke>
</shape>
</item>
</layer-list>
Here is Kotlin version of @Todor Kostov's answer.
for (i in 0 until applicationList_tabLayout.tabCount) {
val tab = (applicationList_tabLayout.getChildAt(0) as ViewGroup).getChildAt(i)
val p = tab.layoutParams as ViewGroup.MarginLayoutParams
p.setMargins(10, 0, 10, 0)
tab.requestLayout()
}
@Todor Kostov answered well, but the center of the tabs are slipped away because the last tab has margin too.
so use mTabLayout.getTabCount() - 1
instead of just mTabLayout.getCodeCount()
.
for(int i=0; i < mTabLayout.getTabCount() - 1; i++) {
View tab = ((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i);
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
p.setMargins(0, 0, 50, 0);
tab.requestLayout();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With