Perhaps when programming Android, we will often encounter many problems with the correct UI display to support all or most of the models on the market today. One of the most difficult problems is probably drawing the UI in full-screen mode, we have to deal with the Status bar and the Navigation Bar overlapping.
You will find it familiar when looking at this illustration:
Or in the Navigation bar
On forums like StackOverFlow, many solutions have been launched, such as the margin toolbar, fab … according to a certain number of dp. This can solve the problem on machines with rabbit ears
But with the machine without rabbit ears, the toolbar will be dropped by a distance, causing loss of aesthetics
General workaround with Window Inset
Window Insets
Describes a set of insets for window content.
To better understand Window Inset, you can refer to d.android at https://developer.android.com/reference/android/view/WindowInsets and today I want to go directly to how you use inset to View margin resolution
1 2 3 4 5 6 7 | ViewCompat.setOnApplyWindowInsetsListener(viewBinding.root) { _, insets -> val params = toolbar.layoutParams as ViewGroup.MarginLayoutParams params.setMargins(0, insets.systemWindowInsetTop, 0, 0) view.layoutParams = menuLayoutParams insets.consumeSystemWindowInsets() } |
You add the above line to the Activity or Fragment’s onResume method. It will set a callback, when the screen has finished calculating the lengths of the navigation bar or status bar, the callback will be called again, along with the inset value. Now you just need to setMargin for toolbar or fab
1 2 3 4 5 | // margin top val params = view.layoutParams as ViewGroup.MarginLayoutParams params.setMargins(0, marginTop, 0, 0) view.layoutParams = menuLayoutParams |
For generalization, you can write View Extensions:
1 2 3 4 5 6 7 8 9 10 11 12 | fun View.setMarginTop(marginTop: Int) { val menuLayoutParams = this.layoutParams as ViewGroup.MarginLayoutParams menuLayoutParams.setMargins(0, marginTop, 0, 0) this.layoutParams = menuLayoutParams } fun View.setMarginBottom(margin: Int) { val menuLayoutParams = this.layoutParams as ViewGroup.MarginLayoutParams menuLayoutParams.setMargins(0, 0, 0, margin) this.layoutParams = menuLayoutParams } |
and done, the code should look like this at the end:
1 2 3 4 5 | ViewCompat.setOnApplyWindowInsetsListener(mBinding.root) { _, insets -> mBinding.toolBar.setMarginTop(insets.systemWindowInsetTop) insets.consumeSystemWindowInsets() } |
At this point, you have mastered the inset already
Hope the article can help you!