Immersive Android Application using Ionic Framework

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:-

cd IonicNativeSampleApp
npm install

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.

ionic cordova plugin add cordova-plugin-fullscreen
npm install --save @ionic-native/android-full-screen

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

ionic generate page ImmersiveView

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.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ActionSheetDemoPage } from '../pages/action-sheet-demo/action-sheet-demo';
import { ImmersiveViewPage } from '../pages/immersive-view/immersive-view';


/**
* List of Native Plugins
*/
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ActionSheet } from '@ionic-native/action-sheet';
import { AndroidFullScreen } from '@ionic-native/android-full-screen';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
ActionSheetDemoPage,
ImmersiveViewPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
ActionSheetDemoPage,
ImmersiveViewPage
],
providers: [
StatusBar,
SplashScreen,
ActionSheet,
AndroidFullScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }

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.

<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>ImmersiveView</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="goToFullScreen()">Go Full Screen</button>
<button ion-button (click)="showSystemhttp://thewebjuice.com/wp-admin/post-new.php#UI()">Show System UI</button>
<button ion-button (click)="leanMode()">Get into Lean Mode</button>
<button ion-button (click)="showUnderStatusBar()">Extend your app under status bar</button>
<button ion-button (click)="showUnderSystemUI()">Get under System UI</button>
</ion-content>

The controller or the component goes as follows:-

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AndroidFullScreen } from '@ionic-native/android-full-screen';

/**
* Generated class for the ImmersiveViewPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-immersive-view',
templateUrl: 'immersive-view.html',
})
export class ImmersiveViewPage {

constructor(private androidFullScreen: AndroidFullScreen, public navCtrl: NavController, public navParams: NavParams) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad ImmersiveViewPage');
}

/** Get into Immersive Mode */
goToFullScreen() {
this.androidFullScreen.isImmersiveModeSupported()
.then(() => this.androidFullScreen.immersiveMode())
.catch((error: any) => console.log(error));
}

/** Shows the System UI */
showSystemUI(){
this.androidFullScreen.showSystemUI();
}

/** Hide System UI until user Interacts */
leanMode(){
this.androidFullScreen.leanMode();
}

/** Helps you to extend your app under the status bar */
showUnderStatusBar(){
this.androidFullScreen.showUnderStatusBar();
}

/** Get under the system UI */
showUnderSystemUI(){
this.androidFullScreen.showUnderSystemUI();
}
}

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
  1. 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
  1. Extend app under Status Bar
  2. showUnderSystemUI() Helps to let your application to come under the system UI as demonstrated below
Application Under the System UI
  1. 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,


Originally published at The Web Juice.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.