Android 15 update with EdgeToEdge: Solving UI Overlaps
A New Engineer's encounter with EdgeToEdge: Solving UI Overlaps in Android 15
Overlapping Navigation bars with the new update?
As a fresh Android engineer, I've been thrown into the deep end with the recent Android 15 update. Google's push for a more immersive experience, while great for user interface fluidity, has introduced some frustrating challenges. One of the biggest issues was the overlap between navigation bars and the system bar, rendering them unusable in many apps.
My first few weeks were spent tackling these Android 15 bugs. While the QA engineers were seeing the UI issues clearly on their physical devices, I was left grappling with what felt like a "ghost issue" 👻 – I couldn't reproduce it on my end.
After reading up on the new updates, I adopted a brute force approach, making small, targeted code changes to address the problem. I then had QA test multiple builds to see if anything had shifted. While not the most elegant solution, it was the only option I had at the time.
To my relief, this approach seemed to work! However, after some refactoring and rebasing, I realized that not all of my changes were based on the updated branch that handled the Android 15 update. 😅 This revelation was a turning point.
By switching my branch, I was finally able to witness the UI issues firsthand, even if they weren't exactly identical to what QA had shown. The important thing was that I was on the right track.
Armed with this new understanding, I dove into the codebase, searching for the files responsible for the navigation bar overlap. Some files used Jetpack Compose, which was a straightforward fix after consulting the documentation.
The real challenge, though, was the remaining files written in XML, especially those using PreferenceScreen. These screens had built-in padding and margins, meaning I needed to add the system bar space not to the preference screen itself, but to the fragment inflating the XML file.
My biggest takeaway from this experience? Always ensure your code is based on the correct branch, the one that contains the relevant updates. In other words, make sure your code is based off of or “git checkout” from any branch that holds any code that is necessary for your changes to do their job. Don't be afraid to try a brute force approach if you need to, and definitely don't hesitate to ask for help. It was a coworker who pointed me towards edgeToEdge, which eventually led me to the solution.
Was my approach the most efficient? Maybe, maybe not. I'm still learning, but I was definitely proactive about tackling this challenge. Would I have done anything differently? Perhaps, but I'm proud of the progress I made and the lessons I learned.
One thing is clear: documentation is a lifeline! Make sure you're utilizing it effectively and keeping up with the latest updates in your chosen tech stack. The implementation of your potential edgeToEdge design issues will be the subject of my next article. Stay tuned, subscribe, and feel free to ask any questions in the comments!