Full-screen immersive transparent status bar effect for Android UI experience

Objective:

After Android 4.4, Google provides immersive full-screen experience, in immersive full-screen mode, the status bar, virtual key dynamic hidden, the application can use the full screen space, according to Google, to give users an immersive experience. After Android 5.0, Google also put forward the concept of colorpalette, so that developers can set the color of the system area, so that the entire APP color style and system color style to maintain unity. Learn how to achieve Android 4.4 + full-screen immersive transparent status bar effects today. Look at the expected effect first:

Let's start by figuring out which part is the status bar and which part is the navigation bar.

The status bar StatusBar as follows

The navigation bar Navigationbar as follows

How is it implemented? 1.) First realize full screen

First: Inheriting topic-specific topics

You can use the Android API above 19. translucentdecor*** related topics, with corresponding translucent effects, Theme.Holo.NoActionBar.TranslucentDecor and Theme.Holo.Light.NoActionBar.TranslucentDecor two themes for new additions, so to create a new values-v19 folder and creating a style s file add the following code

   <name= "Appbasetheme"  parent= "Android: Theme.Holo.Light.NoActionBar.TranslucentDecor ">        <!----   </style>

The second type: How to use code in activity

Android 4.4 Above can add the following code

if (Build.VERSION.SDK_INT >= build.version_codes. KITKAT) {// transparent status bar window.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); // Transparent navigation bar window.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);}

Android 5.0 or above can also use the following code to achieve full-screen

if (Build.VERSION.SDK_INT >= build.version_codes. LOLLIPOP) {window.clearflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS    |  WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); Window.getdecorview (). Setsystemuivisibility ( View.system_ui_flag_layout_fullscreen    | view.system_ui_flag_layout_hide_navigation    | view.system_ui_flag_layout_stable); Window.addflags (WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_ backgrounds);}

Full Screen effect

It is not difficult to find that the status bar occupies the position disappears, and the layout of the app is stacked together, then solve the problem

2.) Resolve status bar placeholder issues

The first: Theme adds the following settings

<name= "android:fitssystemwindows">true</Item  >

The second type: the activity layout root directory adds the following code

Android:fitssystemwindows= "true"

Third: Set through Java code

Rootview.setfitssystemwindows (true);

Fitssystemwindows only works on sdk>=19 system is higher than 4.4 system, this property can give any view settings, as long as this property is set to all the Padding property of this view is invalid. Only when the transparent status bar is set ( StatusBar) or the navigation bar (Navigationbar) This property does not take effect,

If the status bar and navigation bar are set to be transparent, it is equivalent to automatically adding a value equal to the paddingtop of the status bar height to the view, and a paddingbottom equal to the height of the navigation bar, the effect is as follows

3.) Status bar navigation bar set background color

More than 4.4 can be modified Contentview background color, or dynamically add a view to the Contentview

      if(Build.VERSION.SDK_INT >=Build.version_codes. KITKAT) {//Transparent status barwindow.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //Transparent navigation barwindow.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); //set Contentview to FitssystemwindowsViewGroup Contentview =(ViewGroup) Findviewbyid (Android.            R.id.content); View Childat= Contentview.getchildat (0); if(Childat! =NULL) {childat.setfitssystemwindows (true); }            //Coloring for StatusBarView view =NewView ( This); View.setlayoutparams (NewViewgroup.layoutparams (ViewGroup.LayoutParams.MATCH_PARENT, Getstatusbarheight ( This)));            View.setbackgroundcolor (color);        Contentview.addview (view); }

The dynamic get Statusbarheight function is as follows

 /**   * get status bar Height * *   @param   context context *    status bar height  */ private  static  int   Getstatusbarheight (context context) { //  int  resourceId = context.getresources (). GE        Tidentifier ("Status_bar_height", "Dimen", "Android"  return   Context.getresources ().    Getdimensionpixelsize (RESOURCEID); }

The dynamic get Navigationbarheight function is as follows

    /**      * Get navigation bar height     *     @param  Context context     @return  navigation bar height      *    /publicstaticint  getnavigationbarheight (Context Context) {        int resourceId = context.getresources (). Getidentifier ("Navigation_bar_height", " Dimen "," Android ");         return context.getresources (). Getdimensionpixelsize (resourceId);    }

Then Android5.0 above Google provides a new API to update the status bar and the background color of the navigation bar

   if(Build.VERSION.SDK_INT >=Build.version_codes. LOLLIPOP) {window.clearflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); Window.getdecorview (). setsystemuivisibility (View.system_ui_flag_layout_fullscreen|view.system_ui_flag_layout_hide_navigation|view.system_ui_flag_layout_stable);            Window.addflags (WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); //Set the status bar colorwindow.setstatusbarcolor (color); //set the navigation bar colorwindow.setnavigationbarcolor (color); ViewGroup Contentview=( (ViewGroup) Findviewbyid (Android.            R.id.content)); View Childat= Contentview.getchildat (0); if(Childat! =NULL) {childat.setfitssystemwindows (true); }//contentview.setpadding (0, Getstatusbarheight (this), 0, 0);}

So the overall effect is achieved

4.) Paste out the overall Java code implementation method

    Private voidinitwindows () {window window=GetWindow (); intcolor =getresources (). GetColor (Android.        R.color.holo_blue_light); if(Build.VERSION.SDK_INT >=Build.version_codes. LOLLIPOP) {window.clearflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); Window.getdecorview (). setsystemuivisibility (View.system_ui_flag_layout_fullscreen|view.system_ui_flag_layout_hide_navigation|view.system_ui_flag_layout_stable);            Window.addflags (WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); //Set the status bar colorwindow.setstatusbarcolor (color); //set the navigation bar colorwindow.setnavigationbarcolor (color); ViewGroup Contentview=( (ViewGroup) Findviewbyid (Android.            R.id.content)); View Childat= Contentview.getchildat (0); if(Childat! =NULL) {childat.setfitssystemwindows (true); }        } Else if(Build.VERSION.SDK_INT >=Build.version_codes. KITKAT) {//Transparent status barwindow.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); //Transparent navigation barwindow.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); //set Contentview to FitssystemwindowsViewGroup Contentview =(ViewGroup) Findviewbyid (Android.            R.id.content); View Childat= Contentview.getchildat (0); if(Childat! =NULL) {childat.setfitssystemwindows (true); }            //Coloring for StatusBarView view =NewView ( This); View.setlayoutparams (NewViewgroup.layoutparams (ViewGroup.LayoutParams.MATCH_PARENT, Getstatusbarheight ( This)));            View.setbackgroundcolor (color);        Contentview.addview (view); }    }

Summarize:

I am here for a more obvious display effect so the status bar background color and title bar color inconsistent, in the actual development of the general situation we will be set to a unified color, visually feel the whole page more unified, so that users really immersed in the app.

Full-screen immersive transparent status bar effect for Android UI experience