What is Immersive Android Application?

Android 4.4+ brought with itself an immersive mode where one can open an application in fullscreen mode and give their users an immersive experience. From the standpoint of UX, this is really a good way of representing information wherever one feels it’s important to showcase. We do prefer to show our users information which is important in and immersive mode without distracting them a lot. So let’s have a look at how immersive application looks like. There are various ways in which the Immersive Android Application looks like and there are several settings that can be tweaked in order to make the app easily accessible to various users.

Let’s get started with a few examples of the Immersive Android Application through images. Maybe let’s have a look at the before and after of it.

Immersive Mode Android App Before and After

Immersive Mode Android App Before and After

Yeah Yeah!! I know you guys must be wondering this is just a full-screen application and yes we have a full-screen application and we are agoing to make it happen through a plugin called ionic full-screen plugin for Android.

This true full-screen experience in Android is made available using the Cordova/PhoneGap full-screen plugin for Android.

Getting Started with Full Screen Immersive Android Application

As mentioned earlier, if you have not already gone through the Installation of Ionic Framework, Creating a Sample Application or have not yet cloned the repository of the sample code which is here, please go ahead and do the required. Alternatively, we will also recommend you to go ahead and see the list of Ionic Tutorial in order to jump onto any one you guys are not familiar with Ionic Series.

In order to start building the application lets go to the sample application that we have cloned from here and follow the steps as mentioned below:-

The above two steps will get us all the required node packages required.

Now let’s install the plugin for the Android Full Screen. These commands should install the Cordova plugin along with the ionic-native wrapper.

Now let’s create a blank page for the Full-Screen utility in the app by using the command below:-

This command might create a Module File which we don’t require for now so you can go ahead and safely remove it out. Now go ahead and import the Android Full Screen into the app module as shown below. You can see the AndroidFullScreen in being injected into the app module.

Let’s explore the various functions that are exposed by the Android Full-Screen Plugin. The simple code for the full screen will go as follows, we have mentioned all the possible API calls with different functions. So here goes the HTML that’s the view part as well as the controller part.

The controller or the component goes as follows:-

Now lets us go ahead explain each function and how they work. Let’s get started with the first function  isImmersiveModeSupported() helps in order to detect whether the OS has a facility of the full-screen implementation and the  immersiveMode() opened up the entire application in full screen. Have a look at the GIF shown underneath.

Immersive Android Application

Immersive Android Application

Note: showSystemUI()  is another function that helps you to get back top the normal view. We have shown both the scenario above. You can also observe when we try to pull from the top the top and the bottom menu are visible again.

Now let’s look at the other functions available for Creating Immersive Android Application

  1. leanMode()  Helps in order to open the application in the lean mode, this enables a user to see the application in full-screen Immersive mode until a user interacts with the application, the demo for this is shown below.

    Lean Mode Full Screen Android

    Lean Mode Full Screen Android

  2. showUnderStatusBar()  Helps you to extend your application under the status bar, you can find the demonstration below

    Extend app under Status Bar

    Extend app under Status Bar

  3. showUnderSystemUI()  Helps to let your application to come under the system UI as demonstrated below

    Application Under the System UI

    Application Under the System UI

From the above UI it must be clear how the different modes and functionality in the application work.

Conclusion

This is how Immersive Android Applications are created, with all the above different options you must be excited to checkout and implement few of those in your app wherever there is some important information floating around. Hope to see you guys in the next section where we will be discussing the Android App Permissions. Please do subscribe to the mailing list and let your friends know that Hybrid Applications Rock, big time,


Also published on Medium.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This