Ionic/Cordova Change Android Navigation Bar color

user_384511 0
Viewed 5311

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:

Colored navigation

cordova-plugins ionic-framework cordova android
5 Answers
user_3845110

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';
 }
user_47367030

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);

enter image description here

Or using 2 method:

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

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

enter image description here

user_74010540

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

$toolbar-background: #009241;

based from this

user_92530410

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

user_75971650
Related