Skip to content

Add full support for edge-to-edge #279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 29, 2025
Merged

Add full support for edge-to-edge #279

merged 1 commit into from
Jul 29, 2025

Conversation

chenxiaolong
Copy link
Contributor

This commit replaces the use of android:fitsSystemWindows with inset callbacks to fully implement support for edge-to-edge introduced in API 35. While this makes the code a bit more verbose, this fixes a few UI-related bugs and quirks:

  • The top and bottom of the list of settings no longer get "stuck" behind the status and navigation bars.
  • The side of the list of settings no longer overlaps the physical notch on phones.
  • The status bar, in light mode, no longer shows white text on a white background. This is not easily fixable without edge-to-edge support and was the main reason for implementing this change.

This commit also includes a couple minor toolbar changes:

  • MainActivity's toolbar now stays locked in place instead of scrolling off screen on smaller devices.
  • SettingsActivity now shows a toolbar for consistency with MainActivity.

The changes are most visible on API 35 and 36 devices. These are screenshots from my Pixel 9 Pro XL:

API 36 - Main activity - Before and after

Changes:

  • The button proportions changed slightly because they use ConstraintLayout based on percentages and the toolbar is now always pinned to the top (doesn't scroll with the content on small screens).
  • The light theme status bar text is no longer white-on-white.
  • The toolbar is no longer cut off when the device has a physical notch.
Screenshots (click to expand): api_36_main_portrait_light_before api_36_main_portrait_light_after
api_36_main_portrait_dark_before api_36_main_portrait_dark_after
api_36_main_landscape_light_before api_36_main_landscape_light_after
api_36_main_landscape_dark_before api_36_main_landscape_dark_after

API 36 - Settings activity - Before and after

Changes:

  • The top setting is no longer covered by the status bar and the bottom setting (after scrolling to the bottom) is no longer covered by the navigation bar.
  • The sides of the settings no longer overlap the notch.
  • The light theme status bar text is no longer white-on-white.
  • There is now a toolbar.
Screenshots (click to expand): api_36_settings_portrait_light_before api_36_settings_portrait_light_after
api_36_settings_portrait_dark_before api_36_settings_portrait_dark_after
api_36_settings_landscape_light_before api_36_settings_landscape_light_after
api_36_settings_landscape_dark_before api_36_settings_landscape_dark_after

API 36 - About activity - Before and after

Changes:

  • The light theme status bar text is no longer white-on-white.
  • (Dark theme is identical.)
Screenshots (click to expand): api_36_about_portrait_light_before api_36_about_portrait_light_after
api_36_about_portrait_dark_before api_36_about_portrait_dark_after
api_36_about_landscape_light_before api_36_about_landscape_light_after
api_36_about_landscape_dark_before api_36_about_landscape_dark_after

I'm always terrified of making UI changes in case they break in older versions of Android. Since the androidx appcompat library has different implementations of enableEdgeToEdge() for API <21, 21, 23, 26, and 29, I tested each of those versions. I didn't do a before/after comparison here. I only checked to make sure nothing looked wrong or ugly.

API 19

Screenshots (click to expand): api_19_main_portrait api_19_main_landscape
api_19_settings_portrait api_19_settings_landscape
api_19_about_portrait api_19_about_landscape

API 21

Screenshots (click to expand): api_21_main_portrait api_21_main_landscape
api_21_settings_portrait api_21_settings_landscape
api_21_about_portrait api_21_about_landscape

API 23

Screenshots (click to expand): api_23_main_portrait api_23_main_landscape
api_23_settings_portrait api_23_settings_landscape
api_23_about_portrait api_23_about_landscape

API 26

Screenshots (click to expand): api_26_main_portrait api_26_main_landscape
api_26_settings_portrait api_26_settings_landscape
api_26_about_portrait api_26_about_landscape

API 29

Screenshots (click to expand): api_29_main_portrait api_29_main_landscape
api_29_settings_portrait api_29_settings_landscape
api_29_about_portrait api_29_about_landscape

@chenxiaolong
Add full support for edge-to-edge
dcc3cf1 
This commit replaces the use of android:fitsSystemWindows with inset
callbacks to fully implement support for edge-to-edge introduced in API
35. While this makes the code a bit more verbose, this fixes a few
UI-related bugs and quirks:

* The top and bottom of the list of settings no longer get "stuck"
  behind the status and navigation bars.
* The side of the list of settings no longer overlaps the physical notch
  on phones.
* The status bar, in light mode, no longer shows white text on a white
  background. This is not easily fixable without edge-to-edge support
  and was the main reason for implementing this change.

This commit also includes a couple minor toolbar changes:

* MainActivity's toolbar now stays locked in place instead of scrolling
  off screen on smaller devices.
* SettingsActivity now shows a toolbar for consistency with
  MainActivity.

Signed-off-by: Andrew Gunnerson <accounts+github@chiller3.com>
@tmo1
Copy link
Owner

tmo1 commented Jul 24, 2025

This looks great - thanks once again! I'm just going to examine the code and do a little testing of my own, and then merge assuming I don't encounter any problems.

I'm always terrified of making UI changes in case they break in older versions of Android. Since the androidx appcompat library has different implementations of enableEdgeToEdge() for API <21, 21, 23, 26, and 29, I tested each of those versions. I didn't do a before/after comparison here. I only checked to make sure nothing looked wrong or ugly.

I'm always terrified of doing any UI coding period :|

BTW, I think you'll find this discussion interesting.

@tmo1 tmo1 merged commit edc6886 into tmo1:master Jul 29, 2025
5 checks passed
@chenxiaolong chenxiaolong deleted the edge-to-edge branch July 29, 2025 15:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@chenxiaolong @tmo1