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

   <style name= "Appbasetheme" parent= "Android:Theme.Holo.Light.NoActionBar.TranslucentDecor" >        <!-- Customize your theme here. -  </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

<item 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 bar            window.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);            Transparent navigation bar            window.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);            Set Contentview to Fitssystemwindows            viewgroup Contentview = (viewgroup) Findviewbyid (Android. r.id.content);            View childat = contentview.getchildat (0);            if (Childat! = null) {                childat.setfitssystemwindows (true);            }            Coloring the StatusBar            view view = new view (this);            View.setlayoutparams (New Viewgroup.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     * @return status bar Height *     /    private static int Getstatusbarheight (Context context) {        //Get status bar height        int resourceId = Context.getresources (). Getidentifier (" Status_bar_height "," Dimen "," Android ");        Return Context.getresources (). Getdimensionpixelsize (resourceId);    }

The dynamic get Navigationbarheight function is as follows

    /**     * Get navigation bar Height     *     * @param context     * @return navigation Bar Height */public    static int 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);            Sets the status bar color Window.setstatusbarcolor (colour);            Sets the navigation bar color window.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 void Initwindows () {window window = GetWindow (); int color = 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);            Sets the status bar color Window.setstatusbarcolor (colour);            Sets the navigation bar color window.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 bar window.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);            Transparent navigation bar window.addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); Set Contentview to fitssystemwindows viewgroup Contentview = (viewgroup) Findviewbyid (Android.            R.id.content);            View childat = contentview.getchildat (0);            if (Childat! = null) {Childat.setfitssystemwindows (true);            }//Give StatusBar color view view = new view (this);            View.setlayoutparams (New Viewgroup.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