How to add margin between tabs in TabLayout?
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()
}
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>
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.
@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();
}