Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabLayout no public API to remove, disable, or change the width of its divider #4529

Open
ArcherEmiya05 opened this issue Jan 4, 2025 · 1 comment

Comments

@ArcherEmiya05
Copy link

Is your feature request related to a problem? Please describe.
The divider concept looks untidy with our current UI, but there is no way to remove or disable it without making changes to the global theming and making the divider having the same color as the background container. We have a module/library that handles Material 3 theming, we do not want this library to silently hide the divider (for future use case where it is nice to have) by enforcing the divider color to match the background.

Describe the solution you'd like
Provide a public attribute to allow removal of divider.

Describe alternatives you've considered
N/A

Additional context
Screenshot 2025-01-05 at 2 25 05 AM

Global theme

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="MDCTabLayout" parent="Widget.Material3.TabLayout" tools:keep="@style/MDCTabLayout">
        <item name="materialThemeOverlay">@style/ThemeOverlay.MDC.TabLayout</item>
        <item name="tabTextAppearance">@style/TextAppearance.MDC.TabLayout</item>
    </style>

    <style name="ThemeOverlay.MDC.TabLayout" parent="" tools:keep="@style/ThemeOverlay_MDC_TabLayout">
        <!-- Text and indicator color (active) -->
        <item name="colorPrimary">@color/mdc_colorPrimaryDark_Accent</item>
        <!-- Background color -->
        <item name="colorSurface">@color/mdc_colorWhite_PrimaryDark</item>
        <!-- Divider color -->
        <item name="colorOutlineVariant">@android:color/holo_green_dark</item>
        <!-- Text color (inactive) -->
        <item name="colorOnSurfaceVariant">@android:color/darker_gray</item>
    </style>

    <style name="TextAppearance.MDC.TabLayout" parent="TextAppearance.Material3.LabelLarge" tools:keep="@style/TextAppearance_MDC_TabLayout">
        <item name="fontFamily">sans-serif-medium</item>
        <item name="android:fontFamily">sans-serif-medium</item>
    </style>
</resources>

Base Theme

<style name="Theme.App" parent="Theme.Material3.DayNight">
    <item name="tabStyle">@style/MDCTabLayout</item>
</style>

TabLayout has no public API attribute to disable divider

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tabMode="auto">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="@tools:sample/cities" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="@tools:sample/cities" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="@tools:sample/cities" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="@tools:sample/cities" />

</com.google.android.material.tabs.TabLayout>
@ArcherEmiya05
Copy link
Author

Also worth mentioning there seems to be a mishap on the documentation.

The divider actually use colorOutlineVariant in Material 3. The doc mentioned that it is using colorSurfaceVariant, however if you scroll down a bit you'll also see it mentioned in the same page that the divider uses outline variant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants