material-components / material-components/material-components-android

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

Open
#4,529 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request Widget: Tab
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
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>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.