Ionic - Change app top bar color

Asked

Viewed 1,910 times

1

Hello, I’m developing an application with Ionic3 and when I start the app in the emulator runs nice, but it is common in the applications the black bar stay in the header color but in a darker tone. How to do this?

inserir a descrição da imagem aqui

Another thing, when I simulate in iOS the top bar is on the elements of the application, how to fix?

inserir a descrição da imagem aqui

ionic ionic3

  • Sorry to ask upon your question, that layout you produced or is something that already comes in Ionic ... !!! i move with angular and React and we always have to install kkk

  • 1

    Hello, the layout of this header (buttons, seachbar and cart) was created by me, but it uses ready components of Ionic, the property of positioning the element is the own framework (use Start and End to position the elements), some styling as in the case of the balloon trolley made manually (SCSS), but the components are practically ready for use.

1 answer

3


You can change the color of the top bar and fix the bar on IOS with the plugin cordova-plugin-statusbar. Include in config.xml the property StatusBarOverlaysWebView to change the color and the StatusBarOverlaysWebView as false so that the top menu does not stay over your app on IOS.

Install the plugin:

ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar

Include in app.module.ts:

import { StatusBar } from '@ionic-native/status-bar';
...
providers: [
  StatusBar,
...

Include in config.xml:

<platform name="android">
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>

<platform name="ios">
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>

  • Hello Renata, thanks for the feedback, I performed the procedure as directed, but the test with "Ionic serves --lab" does not show the change. I think I will have to install an emulator for the desired platform (android and Ios), you use some specific, which?

  • 1

    One of the emulators I use is the Ionic Devapp, which is an app you install on your phone. By connecting your phone to the same network as your computer, type Ionic serves -c on the command line. Ionic Devapp is very useful for testing some native plugins.

  • Thanks Renata, I’m doing the tests here, thanks a lot for the direction.

Browser other questions tagged ionic ionic3

You are not signed in. Login or sign up in order to post.