Search code examples
ionic-frameworkionic4

Ionic 4 ion-title in toolbar is not centered on android

I am wondering if this a common problem. My ion-title is not centered in the toolbar on android.

I googled it but I couldn't find anything for ionic 4, what I did found was a pretty good solution in ionic 3.

here it is: https://stackoverflow.com/a/30021395/4983589

I am wondering if somebody know how to do this in ionic4?

Here an image how it looks on android:

enter image description here

Solution

  • Ionic v4 keeps toolbar title on left for android devices and on center for IOS devices.

    To use a particular behavior you can use mode="md|ios". md is for android and ios for IOS devices.

    Since you want to make the title on center, you can use mode="ios" which will make the toolbar title to be on center for both android and ios devices.

    This is my header:

    <ion-header>
    <ion-toolbar mode="ios">
        <ion-title>
            Add New Rest
        </ion-title>
        <ion-icon slot="end" name="analytics"></ion-icon>
        <ion-buttons slot="start">
            <ion-buttons slot="start">
                <ion-back-button defaultHref="home"></ion-back-button>
            </ion-buttons>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

    Have a look at the screenshot below enter image description here enter image description here