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

[ListItem] No top alignment as per specs

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

Nobody has claimed this yet.

bug Widget: ListItem
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Description:** Full description of issue here
"Alignment: Elements in a list item are middle-aligned unless it is at or above 88dp (such as when a list item contains three lines of text) at which point everything is top aligned"
Using the ListItem composable only aligns the icon to the center, never to the top ignoring the list item's height as per your won specs.

**Expected behavior:** Screenshots and/or description of expected behavior

**Source code:** The code snippet which is causing this issue
`ListItem(
modifier = Modifier.clickable { onClick.invoke() },
leadingContent = {
Icon(
painter = painterResource(id = iconRes),
contentDescription = null
)
},
headlineContent = {
Text(text = stringResource(id = stringRes))
}
)`

**Minimal sample app repro:** Please consider attaching a minimal sample app that reproduces the issue. This will help narrow down the conditions required for reproducing the issue, and it will speed up the bug fix process. You may attach a zip file of the sample app or link to a GitHub repo that contains the sample app.

**Android API version:** 15

**Material Library version:** Material Android Library version you are using here (e.g., 1.1.0-alpha07)
"com.google.android.material:material:1.11.0"
const val COMPOSE = "1.7.3"
const val COMPOSE_MATERIAL_3 = "1.3.0"

**Device:** Pixel 6a and Compose Preview

To help us triage faster, please check to make sure you are using the [latest version](https://github.com/material-components/material-components-android/releases) of the library.

We also happily accept [pull requests](https://github.com/material-components/material-components-android/pulls).

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 with the provided ListItem snippet in Compose Preview or on the Pixel 6a using the stated Android and Material library versions. Compare the icon alignment for list items at and above 88dp with the specification; done means the icon is top-aligned at that height while shorter items remain middle-aligned.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, kotlin
Domain
design, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.