Ionic/Cordova Change Android Navigation Bar color

cordova-plugin-navigationbar-color
change navigation bar color android
ionic navigation bar
ionic 4 navigation bar color
ionic navigation bar example
change bottom navigation bar color android
cordova android hide status bar
navigation bar button color android

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:

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

Of / How to change Android's NavigationBar color in Ionic / Cordova?, And the tab bar background is not white, but almost black ( #212121 ). And on Android with the Navigation Bar at the very bottom, it looks ugly. Do keep in mind this will cause issues with the ios version as this is an older version of the plugin itself. It however works perfectly on android. This will only change color of status bar on splash screen. To keep the color changed you need to keep the following code in your app.component.ts file.

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

Ionic/Cordova Change Android Navigation Bar color, 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  I'm developing Android application using Ionic 1 Framework. On using the app on mobile the color of notification bar is not changing it remains default. Is there any specific setting or plugin

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

$toolbar-background: #009241;

based from this

cordova-plugin-navigationbar-color, cordova · navigationbar · ecosystem:cordova · cordova-android. Install. npm i cordova-plugin-navigationbar-color. Weekly Downloads. 440  Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

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

Change Navigation bar Color on Android Lollipop? - ionic-v1, How can we change the navigation bars color on android lollipop and [image] I know that we can change the status bar color/ColorPrimaryDark using apache's cordova-plugin-statusbar - Mirror of Apache Cordova. The Android 5+ guidelines specify using a different color for the statusbar than your main app color (unlike the uniform statusbar color of many iOS apps), so you may want to set the statusbar color at runtime instead via StatusBar.backgroundColorByHexString or StatusBar.backgroundColorByName. One way to do that would be:

Navigation Bar, The NavigationBar plugin allows you to hide and auto hide the android navigation bar. ionic cordova plugin add cordova-plugin-navigationbar npm install  Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

armespavong/ionic-plugin-navigation-bar-color: Control , Change color of navigation bar (Android) for your app in each page. Install. This plugins needs "cordova-plugin-navigationbar-color" npm i --save cordova-plugin-​  The Android 5+ guidelines specify using a different color for the statusbar than your main app color (unlike the uniform statusbar color of many iOS apps), so you may want to set the statusbar color at runtime instead via StatusBar.backgroundColorByHexString or StatusBar.backgroundColorByName. One way to do that would be:

Cordova Plugin Statusbar - Statusbar, cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git On iOS, set the background color of the statusbar by a hex string (#RRGGBB) at startup. to the "statusTap" event (described below) and customize the behavior instead. The Android 5+ guidelines specify using a different color for the statusbar  Ionic is the app platform for web developers. Navigation Bar Header Color. Improve this doc Cordova plugin to change color of header in Android Multitask View

Comments
  • Seems to be broken for ionic 4, any alternative?
  • 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
  • @amitairos that's not possible unless there is a native solution in which case you would need to find or write a cordova plugin
  • @SurajRao I am aware of this. Do you know of such a cordova plugin?
  • @amitairos I am not aware of one. Also, this seems very device specific,
  • Any resolution on this?
  • See my response to @SaEChowdary
  • 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