How To Avoid Android System Navigation Bar Overlapping Views at the bottom

Android’s UI layout control is quite different from the one in iOS. It has the status bar, navigation bar and default title bar to be handled. Now sometimes you may want to keep the navigation bar at the bottom but it overlaps your bottom-most view like this:

Navigation bar overlapping a view

There is a simple work-around to that:

Adding android:layout_marginBottom=”?android:attr/actionBarSize” to the bottom-most view

Just doing so, the bottom of the screen will become like this:

View at the bottom not being overlapped

I tested it and it works just fine on LinearLayout and ConstraintLayout from API level 21+

That’s it.

Happy coding.

Let me know if you find better solution or approach in the comment section below. ;)

Find me at Twitter @rick3817