starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-07-25 05:58:34 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

[PR #1582] [MERGED] Fix android system bars overlapping UI #1564 #1574 #1624

New Issue
Closed
opened 2026-04-24 23:59:48 +02:00 by adam · 0 comments
adam commented 2026-04-24 23:59:48 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf-app/pull/1582
Author: @advplyr
Created: 5/22/2025
Status: ✅ Merged
Merged: 5/22/2025
Merged by: @advplyr

Base: master ← Head: handle_android_edgetoedge

📝 Commits (2)

📊 Changes

9 files changed (+62 additions, -22 deletions)

View changed files

📝 android/app/src/main/assets/capacitor.config.json (+4 -0)
📝 android/app/src/main/java/com/audiobookshelf/app/MainActivity.kt (+45 -12)
📝 android/app/src/main/res/layout/activity_main.xml (+1 -0)
📝 android/app/src/main/res/values-v21/styles.xml (+1 -1)
📝 android/app/src/main/res/values/colors.xml (+2 -2)
📝 android/app/src/main/res/values/styles.xml (+1 -1)
📝 capacitor.config.json (+4 -0)
📝 ios/App/App/capacitor.config.json (+4 -0)
📝 plugins/init.client.js (+0 -6)

📄 Description

Brief summary

Fixes android system bars overlapping UI by setting margins using system bar insets.

Which issue is fixed?

Fixes #1564
Fixes #1574

Pull Request Type

Android

In-depth Description

Android 15 enforced edge-to-edge. We can handle it by getting the insets on MainActivity.create and setting margins of the WebView view.
Details on edge-to-edge: https://developer.android.com/develop/ui/views/layout/edge-to-edge

This update sets the color of the status bar and navigation bar to match the Abs app bar color.

In the future we may want to handle edge-to-edge better to allow it to be translucent and use CSS padding instead, so I set the inset values as CSS variables. I tested that those variables are available to use.

How have you tested this?

Tested using Android 15 device emulator and Google Pixel 6.

Screenshots

The Android 15 device with the bottom navigation enabled.
image

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf-app/pull/1582 **Author:** [@advplyr](https://github.com/advplyr) **Created:** 5/22/2025 **Status:** ✅ Merged **Merged:** 5/22/2025 **Merged by:** [@advplyr](https://github.com/advplyr) **Base:** `master` ← **Head:** `handle_android_edgetoedge` --- ### 📝 Commits (2) - [`1cf36e5`](https://github.com/advplyr/audiobookshelf-app/commit/1cf36e55490d6cc23db93795a2320f6c12dfa6c7) Fix android system bars overlapping UI #1564 #1574 - [`8d563dc`](https://github.com/advplyr/audiobookshelf-app/commit/8d563dcfed2101f3a6fba72c88708ce05a4a4411) Remove unnecessary styles.xml ### 📊 Changes **9 files changed** (+62 additions, -22 deletions) <details> <summary>View changed files</summary> 📝 `android/app/src/main/assets/capacitor.config.json` (+4 -0) 📝 `android/app/src/main/java/com/audiobookshelf/app/MainActivity.kt` (+45 -12) 📝 `android/app/src/main/res/layout/activity_main.xml` (+1 -0) 📝 `android/app/src/main/res/values-v21/styles.xml` (+1 -1) 📝 `android/app/src/main/res/values/colors.xml` (+2 -2) 📝 `android/app/src/main/res/values/styles.xml` (+1 -1) 📝 `capacitor.config.json` (+4 -0) 📝 `ios/App/App/capacitor.config.json` (+4 -0) 📝 `plugins/init.client.js` (+0 -6) </details> ### 📄 Description <!-- For Work In Progress Pull Requests, please use the Draft PR feature, see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details. If you do not follow this template, the PR may be closed without review. Please ensure all checks pass. If you are a new contributor, the workflows will need to be manually approved before they run. --> ## Brief summary Fixes android system bars overlapping UI by setting margins using system bar insets. ## Which issue is fixed? Fixes #1564 Fixes #1574 ## Pull Request Type Android ## In-depth Description Android 15 enforced edge-to-edge. We can handle it by getting the insets on `MainActivity.create` and setting margins of the WebView view. Details on edge-to-edge: https://developer.android.com/develop/ui/views/layout/edge-to-edge This update sets the color of the status bar and navigation bar to match the Abs app bar color. In the future we may want to handle edge-to-edge better to allow it to be translucent and use CSS padding instead, so I set the inset values as CSS variables. I tested that those variables are available to use. ## How have you tested this? Tested using Android 15 device emulator and Google Pixel 6. ## Screenshots The Android 15 device with the bottom navigation enabled. ![image](https://github.com/user-attachments/assets/326fc367-a763-489b-b82c-5bed3c72f8e1) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-24 23:59:48 +02:00
adam closed this issue 2026-04-24 23:59:48 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
android
android auto
backlog
bug
enhancement
ereader
help wanted
iOS
progress sync
pull-request
Mirrored from GitHub Pull Request
 sleep timer
unable to reproduce
waiting
No labels pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf-app#1624