What are window insets? Window insets gives us the size of system view that we would need here. How do we know how much marginTop do we need to give to the content view? There are many ways to do that but i’m going to go with the most definitive approach which has worked for me on a variety of devices. Right? But now comes the million dollar question. Ok, what do we need to shift it down? Margin.a marginTop will do. Shift the content The actual content of your app layout needs to be shifted down so that it doesn’t overlap with the status bar icons. This guy is overlapping with the system bar icons and this kind of UI makes me as an user uncomfortable. what's up with the Floating Action Button.

SYSTEM_UI_FLAG_LIGHT_STATUS_BAR makes sure that the status bar icons are drawn in such a way so that they are fully visible in light mode.Ĭool.so, now our status bar looks pretty good on most of the API levels.

How to fix it? Again, setSystemUiVisibility to the rescue. Problem on marshmallow and above devices: The system bar icons are all white which may not look good if the general colour scheme in your layout is also light. However, this API is available on or above API 21. I think setStatusBarColor() needs no explanation. SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN helps keep the content from resizing when the system bars hide and show while going in and out of full screen mode. System UI elements are elements like status bar, naviagtion bar etc. What is systemUiVisibility? Using this method, we can control the visibility of the system UI drawn by the system. So, we first remove this flag.įLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS flag tells the system that our window is responsible for drawing the background for system bars. What are these different flags you can apply to a window? If FLAG_TRANSLUCENT_STATUS is enabled, translucent status bar will be shown which we don’t want. All these windows on a single screen are managed by WindowManager. The navigation bar also has a different window where it draws the back button, the home button etc. The status bar is given a window where the system draws things like time, battery, notification icons etc. The activity is given a window where it draws the view hierarchy specified by us. Each of these components are given a window to draw themselves into. Each of these components have a different window. What is a Window? When you open any standard app, you would see a status bar, a navigation bar, and the actual activity.

React app overlaps status bar ios