Customizing the Status Bar

Creating an App

To customize the status bar in an Ionic application, we can use the Cordova status bar plugin. Given an Ionic app with installed platforms (if you haven’t done this before, see this article on customizing the splash screen), install the status bar plugin:

cordova plugin add org.apache.cordova.statusbar

From there, with the ngCordova module installed, we get a new service called $cordovaStatusBar exposed to our controllers.

For example, we can adjust the base style of our status bar:

var app = angular.module('ionicApp', ['ionic', 'ngCordova'])

app.run(function($cordovaStatusbar) {
  $cordovaStatusbar.overlaysWebView(true)

  $cordovaStatusBar.style(1) //Light
  $cordovaStatusBar.style(2) //Black, transulcent
  $cordovaStatusBar.style(3) //Black, opaque
})

We even have the ability to control the color of the status bar, if your platform supports it:

$cordovaStatusbar.styleColor('black')

$cordovaStatusbar.styleHex('#FF0000') //red

Depending on what you’re doing, such as displaying an image gallery, you can hide the status bar:

$cordovaStatusbar.hide()

$scope.toggleStatusbar = function() {
  $cordovaStatusbar.isVisible() ? $cordovaStatusbar.hide() : $cordovaStatusbar.show()
}

Notice that we’ve added a toggle status bar function. This could be useful to show the status bar when an image is tapped on. With the addition of a throttling function and a delay, a very native-like experience can be achieved.

Parting Words

Changing the status bar to suit your needs is very simple, but adds a level of polish to your application. Subtle details matter in creating a native experience, so don’t forget to check out the status bar. For more polish, customize your splash screen.

further reading
Adding an App Icon

Including an app icon is as simple as adding a few lines to a project config.xml

Using the Cordova Camera API

Taking photos and video is an everyday task for most mobile users. Learn how to easily add photo and video functionality to your apps with the Cordova Camera API.

Get building with Ionic today!