[TabLayout] Margin for each tab item

[danielgomezrico]

Currenlty you can not change a Tab item from the TabLayout from the styles, you have to do some hacky thing like:

The issue is when you want to change the tab background shape into something like:

But since this is not possible from the styles it will appear like this since:

Possible Solution

One atribute tab_margin_start and each margin for each item maybe?

Current hacky solution

Hacky programaticaly solution source:

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

[wcshi]

The workaround you suggested doesn't seem hacky to me.

I'm confused about your proposal, are you suggesting add an attribute named tab_margin_start that is applied to every tab item's view?

[danielgomezrico]

Im worried about (ViewGroup) mTabLayout.getChildAt(0) that may change in some android version and then break the feature.

An attribute like tab_margin_start may work, or tab_separation, or something make it from the xml and not only moving the internal views of the tabs.

[kirkaDev]

The workaround you suggested doesn't seem hacky to me.

I'm confused about your proposal, are you suggesting add an attribute named tab_margin_start that is applied to every tab item's view?

Hello, setting a custom indentation for each tab would be helpful. For example, in some cases, instead of using the menu, it might be helpful to create another tab and set it apart from the others.

If I use my own layout for the tab and use padding or margin inside the layout, then I will get an indicator shift (please, see a picture)

[lapdv3012]

val tabs = binding.tabFilter.getChildAt(0) as ViewGroup for (i in 0 until tabs.childCount) { val tab = tabs.getChildAt(i) val layoutParams = tab.layoutParams as LinearLayout.LayoutParams layoutParams.marginEnd = 13.dpToPx tab.layoutParams = layoutParams binding.tabFilter.requestLayout() }

[dung-ngviet]

I encounterred same situation when I want to have margin between tablayout items. One possible solution is setting custom view for Tab, but it require some extra effort to bind to the text and image. It's good if we could have some attribute support that spacing.

[lapdv3012]

val tabs = binding.tabFilter.getChildAt(0) as ViewGroup for (i in 0 until tabs.childCount) { val tab = tabs.getChildAt(i) val layoutParams = tab.layoutParams as LinearLayout.LayoutParams layoutParams.marginEnd = 13.dpToPx tab.layoutParams = layoutParams binding.tabFilter.requestLayout() }

Đinh Văn Lập

Vào Th 5, 5 thg 10, 2023 vào lúc 13:42 Dung Nguyen < @.***> đã viết:

I encounterred same situation when I want to have margin between tablayout items. One possible solution is setting custom view for Tab, but it require some extra effort to bind to the text and image. It's good if we could have some attribute support that spacing.

— Reply to this email directly, view it on GitHub https://github.com/material-components/material-components-android/issues/1507#issuecomment-1748186602, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGDSVAWHR3ZOLDZBSQDLJODX5ZJHBAVCNFSM4PGEX24KU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZUHAYTQNRWGAZA . You are receiving this because you commented.Message ID: <material-components/material-components-android/issues/1507/1748186602@ github.com>