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

[TabLayout] Support gravity_fill with "auto" mode

Open
#650 5 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

**Description:** Setting the `tabMode` to `auto` is the same as setting the `tabMode` to `scrollable`. Even if there are only 2 items, they will never act like `fixed` tabs.

**Expected behavior:**
Expected to act as in [the documentation](https://developer.android.com/reference/com/google/android/material/tabs/TabLayout.html#MODE_AUTO)
> Auto-sizing tabs behave like MODE_FIXED with GRAVITY_CENTER while the tabs fit within the TabLayout's content width. Fixed tabs have equal width, based on the widest tab label. Once the tabs outgrow the view's width, auto-sizing tabs behave like MODE_SCROLLABLE, allowing for a dynamic number of tabs without requiring additional layout logic.

**Source code:**
By adding `app:tabMode="auto"` to the `tab_layout` view in `component_tabs.xml` and running the Material Theme Builder, you can see that the tabs no longer take up the full width of the parent. This occurs regardless of whether the parent is a LinearLayout or ConstraintLayout.

In [`updateTabViewLayoutParams` in `TabLayout`](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/tabs/TabLayout.java#L1568), it sets the `tabView` layout params' width to `WRAP_CONTENT` if the mode is not `MODE_FIXED`, not sure if that's the issue.

**Android API version:**
Seen on API 29.

**Material Library version:**
Seen on alpha07, alpha09, and alpha10.

**Device:**
Seen on Pixel 3 emulator.

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 in lib/java/com/google/android/material/tabs/TabLayout.java at updateTabViewLayoutParams, then reproduce the behavior by setting app:tabMode="auto" in component_tabs.xml and running the Material Theme Builder. Compare the result with the documented MODE_AUTO behavior for two tabs in both LinearLayout and ConstraintLayout parents; done means fitting tabs behave like fixed tabs and overflowing tabs remain scrollable.

Written by the indexing model from the issue text.

Assessment

Tech stack
java
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.