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.

Immersive Mode Android App Before and After
Immersive Mode Android App Before and After

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.

cd IonicNativeSampleApp
npm install
ionic cordova plugin add cordova-plugin-fullscreen
npm install --save @ionic-native/android-full-screen
ionic generate page ImmersiveView
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 { }
<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>
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();
}
}
Immersive Android Application
Immersive Android Application

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
  1. 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
  1. 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

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,

Interested in friends and am a Web Developer. Design Websites and Web Solutions in major Platforms, SEO Consultant