Ionic/Cordova Change Android Navigation Bar color

Question

I'm trying to change the color of the Navigation Bar in Android (on the bottom, with the back and home keys) - on phones which do not have hardware home and back keys. in my Ionic app which uses Cordova.

Is there a way to do this?

Example:

Metheglin

Answer 1

Found this awesome cordova plugin that does this beautifully:
https://www.npmjs.com/package/ionic-plugin-navigation-bar-color

Metheglin

Seems to be broken for ionic 4, any alternative? – Dorsett

I can confirm that this plugin is no longer working in Ionic 4. – Comeaux

This plugin looks awesome, but not works with Ionic 5, someone knows similar plugin to Ionic 5? – Lesleylesli

Did anyone found the solution for latest ionic versions? – Saiga

Answer 2

you can use the below style in the required page,add this in the respective scss file and as you asked for android go with this

.toolbar-background-md{
    background-color: 'your color code here';
  }

if you want to maintain same through out the app put this in variable.scss

for ios use the same method but instead of md use ios tag as below

.toolbar-background-ios{
     background-color: 'your color code here';
 }

Silas

I'm sorry, but I didn't mean the toolbar. I meant the actual phone-wide navigation bar, that is presented on devices that do not have hardware keys on the bottom – Metheglin

@Metheglin that's not possible unless there is a native solution in which case you would need to find or write a cordova plugin – Fencible

@SurajRao I am aware of this. Do you know of such a cordova plugin? – Metheglin

@Metheglin I am not aware of one. Also, this seems very device specific, – Fencible

Any resolution on this? – Asleep

Answer 3

Testing working cordova plugin with @ionic/angular 5.6.0: https://github.com/fagundes/cordova-plugin-navigationbar

Ionic:

   Ionic CLI                     : 6.11.10 (C:\Users\admin\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 24 other plugins)

The first method (declare a global variable)

declare const NavigationBar: any;

NavigationBar.backgroundColorByHexString("#FFFFFF", true);

Or using 2 method:

window.NavigationBar.backgroundColorByHexString("#FFFFFF", true);

The navigation bar white background & black color button (inner navigation bar button):

Jemadar

ionic 6? what you talking about? current version is 5.5.4 – Geminius

ok edited. anyway I'm not sure the CLI version is important in this topic, the framework version should – Geminius

@Geminius maybe the cordova version too? because its a cordova plugin. i forgot where the project is, but i will update again, thanks for reminding. – Jemadar

Sure, good point! cordova-android version too should be noted. Thank you! – Geminius

Answer 4

i did something like this in my sass file theme/variable.scss file

$toolbar-background: #009241;

based from this

Rosyrot

See my response to @SaEChowdary – Metheglin

Answer 5

@Amitairos android navigation bar is also called status bar. IONIC native has a plugin for this. Check it out on this link https://ionicframework.com/docs/native/status-bar/.

For Example:- this.statusBar.styleBlackTranslucent(); this will change your status bar color in black. you can also use any color code please check in above link. this will definitely help you.

Hamill

I tested this out and it only colors the status bar on top of the screen. It does not color the navigation bar on the bottom of the screen. Are you sure we're referring to the same thing? I added an image in my question – Metheglin

Its only change the status bar, not the navigation bar in Android – Jemadar