material-components / material-components/material-components-android
[Docs] Describe in detail how to use display cutouts in landscape mode in different scenarios and with each components.
Nobody has claimed this yet.
- 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.**
Most app developers don't know what to do with the display cutout in landscape mode, as a result, it remains unused and has a black color. And it's not surprising, since even on the Material IO website there are literally a couple of paragraphs (https://m3.material.io/foundations/layout/understanding-layout/hardware-considerations#05da90ed-7115-4c32-83c8-3164e00c6dfc) devoted to it without any instructions for each component.
This approach breaks the immersive experience and causes people to use apps less in landscape orientation.
**Describe the solution you'd like**
I'd like you to describe how to use or nicely design a display cutout for apps in landscape orientation for each component. Speaking of components I mean navigation rails, top bars, bottom bars, bottom sheets and so on.
I would also suggest making it so that all components and templates support the use of the display cutout by default.
As a solution, I suggest you keep the padding of the various controls, but extend the components' backerboards to the cutout area.
**Additional context**
In the attached screenshots, I have given examples from Google apps, where in 90% of cases (and not only Google apps) the display cutout is left unused, causing it to be black. In the same screenshots, I have given the desired result of how the cutout should look like in landscape orientation.
I would say that among all Google apps, Google News has the best implementation of landscape orientation using a display cutout.
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 with the linked Material 3 hardware-considerations guidance and organize the requested landscape display-cutout scenarios around navigation rails, top bars, bottom bars, bottom sheets, and other components. Done means the documentation explains how each named component should use or accommodate the cutout, with the proposed backerboard and padding approach clearly addressed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android
- Domain
- documentation, mobile
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100