1,251 Views

Immersive Android Application in Ionic

What is Immersive Android Application?

In android immersive mode is where one can open an application in fullscreen mode to give users an immersive experience. From UX point of view, it is an excellent way to represent important information to showcase. Immersive mode allows us to present our important information to user without much distractions from the platform.

Before we begin go through the images below to understand what immersive applications look like.

android-kitkat-immersive-mode
Immersive Application before and after

I know, I know, this is just a full-screen application. In ionic, this full-screen experience is made available using the Cordova/PhoneGap plugin full-screen for android.

In the next step we are going to create a Ionic application and make it immersive. If you have not already gone through the installation and creating an application process for Ionic applications, please go through our Getting started with Ionic tutorial

Lets get started building a fullscreen application in Ionic

Lets start by creating our sample application

ionic start ion-fullscreen blank
cd ion-fullscreen

This will create an ionic application using blank template made available by Ionic Team and install all required packages.

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 add this plugin to our apps module. Go ahead and import the Android Full Screen into the app module and pass it to providers array as shown below.

Open src/app/app.module.ts and update as

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

// native plugins
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AndroidFullScreen } from '@ionic-native/android-full-screen';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

Various functions exposed by Android fullscreen plugin

To explore the various functions provided by the plugin, we are adding few buttons and related functions to handle button clicks in our home page. So let’s begin.

Open src/pages/home/home.html and update as

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Immersive App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="goToFullScreen()">Go Full Screen</button>
  <button ion-button (click)="showSystemhttps://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>

Open src/pages/home/home.ts and update as

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

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

  }


  goToFullScreen() {
    this.androidFullScreen.isImmersiveModeSupported()
      .then(() => this.androidFullScreen.immersiveMode())
      .catch((error: any) => console.log(error));
  }

  showSystemUI(){
    this.androidFullScreen.showSystemUI();
  }

  leanMode(){
    this.androidFullScreen.leanMode();
  }

  showUnderStatusBar(){
    this.androidFullScreen.showUnderStatusBar();
  }

  showUnderSystemUI(){
    this.androidFullScreen.showUnderSystemUI();
  }
}

Let us understand each functions and how they work.

  1. The first function isImmersiveModeSupported() helps to detect whether the OS has a facility of the full-screen implementation and the function immersiveMode() openes up the entire application in full screen. Have a look at the GIF shown underneath.
    giphy-5
  2. showSystemUI() function helps to get back to the normal view. We have shown both the scenario above. We can also observe that if we try to pull from the top the top and the bottom menu are visible again.
  3. leanMode() function to open the application in the lean mode, this enables us to see the application in full-screen Immersive mode until a user interacts with the application, as shown below.
    lean
  4. showUnderStatusBar() function helps to extend application application under the status bar, as shown below
    giphy-2-1
  5. showUnderSystemUI() function helps application to come under the system UI as shown below
    giphy-1-1

Now you understand clearly about different modes and functionality in the application.

Happy coding immersive apps.

Related Posts

Android Launcher App in React Native

A simple custom Android launcher app built with React Native. Find in GitHub A custom Android Launcher made with ReactNativehttps://github.com/lohanidamodar/RNLauncher5 forks.16 stars.0 open […]

This post is trending.

Let’s Make Desktop Application With Ionic 2 and Electron: Part 2

In part 1 of this tutorial we were able to Create an Ionic 2 project and serve Install electron dependencies in our […]

Advancde Ionic Components

If you are a Ionic developer, beginner or expert, you will love this project. Publicly being developed in github, ionic3-components repository hosts […]

%d bloggers like this: