material-components / material-components/material-components-android
TabLayout no public API to remove, disable, or change the width of its divider
Nobody has claimed this yet.
- Dominant language
- Java
- Stars
- 17.4k
- Forks
- 3.2k
- PR merge metrics
- No merged PRs in 30d
Description
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
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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing TabLayout's public XML and Java API surface alongside the provided Material 3 theme example, focusing on how the divider is currently controlled. Define the public control needed for removing, disabling, or changing the divider width, and verify that it can be used without changing global theme colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, java
- Domain
- mobile
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100