material-components / material-components/material-components-android
[MaterialCheckbox] CheckBox text is misaligned with the checkmark icon by 1px
Nobody has claimed this yet.
- Dominant language
- Java
- Stars
- 17.4k
- Forks
- 3.2k
- PR merge metrics
- No merged PRs in 30d
Description
I'm not sure this is intentional or not, but here's a Checkbox currently looks with a text specified. This screenshot is from the latest M3 Catalog app.
As you can see, the baseline is not aligned with the checkmark icon, but it is on the material design reference. Here's how it looks on the guideline page:
To workaround this issue, I'm currently using app:lastBaselineToBottomHeight="7sp" on the checkbox. I've added an extra 1sp to optically align it from the icon baseline of 6sp.
By the way, android:lastBaselineToBottomHeight shows up as an attribute whereas the app one doesn't, but it works anyway.
I've checked this issue on:
Android API version: 21+
Material Library version: 1.7.0+
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 reproducing the checkbox in the M3 Catalog app on Android API 21+ with Material Library 1.7.0 or later, then inspect the MaterialCheckbox text and icon baseline handling, including lastBaselineToBottomHeight. Done means the checkbox text baseline aligns with the checkmark as shown in the Material Design reference and the relevant android/app attributes behave consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100