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

Question

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:

Answer 1

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

Answer 2

I have tested the followings on my android and the title is centered with other buttons such as back button, etc.

Not too sure if it works on iOS devices
Hopefully this helps:

<ion-toolbar>
    <ion-title style="width: 100%; position: absolute; left: 0; height: 0;">
        Title
    </ion-title>
</ion-toolbar>

Answer 3

Adding mode="ios" does work. To simplify you can add mode="ios" to the main HTML tag in the index.html and this will be applied to the entire app so you don't have to add this to each individual HTML page.