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

[Exposed dropdown menus]: Layout expands to width of menu content, not the width of the text that will be displayed.

Open
#4,375 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature request Widget: Menu
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Description:** When using an adapter to provide more complex content to an exposed drop down menu, the width of the `TextInputLayout` is expanded to the width of the menu, not the width of the longest content that will be shown in `TextInputLayout`.

This is probably easier to explain with screenshots.

This is the screenshot of an exposed drop down menu with three items, "Show", "Warn", and "Hide", set using `setOptions()`.

This is what I expect.

However, I want to show the user additional information about each choice. The labels are deliberately short because there isn't much screen real estate available. So I have a trivial adapter that uses a two-line view, like this:

```kotlin
data class FilterDescription(val title: String, val descr: String) {
override fun toString() = title
}

val adapter = object : ArrayAdapter(
requireContext(),
android.R.layout.simple_list_item_2,
android.R.id.text1,
) {
val items = listOf( /* FilterDescription objects here */ )

init {
addAll(items)
}

override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
val view = super.getView(position, convertView, parent)
val text1 = view.findViewById(android.R.id.text1)
val text2 = view.findViewById(android.R.id.text2)
getItem(position)?.let { item ->
text1.text = item.title
text2.text = item.descr
}
return view
}
}
```

If I set this adapter the menu displays two lines per item as expected. However, the width of the `TextInputLayout` is now the width of the longest `descr`. Like this with the menu open:

and this with the menu closed:

**Expected behavior:** The layout should be the maximum width of the content that will be shown in it, not the maximum width of the pop up menu.

**Source code:** As above.

**Android API version:** 31

**Material Library version:** 1.12.0

**Device:** 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 by reproducing the issue on Android API 31 with Material Library 1.12.0 using the provided Kotlin adapter and the exposed drop-down menu. Inspect the menu's width measurement behavior; done means the closed TextInputLayout is sized to its displayed content rather than the adapter's longer descriptions, while the menu still shows both lines.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin
Domain
mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.