Hi, I’m new to Ionic Framework and I have been using it for the last 3 weeks.
I noticed that when I am running the example application “Tabs” on the Ionic Lab (no code modification at all), the title bar for Android is in the middle of the navbar vertically. However, when I am running the same application on my Moto G (1st gen, Android 5.0.1), the title bar is a bit below the vertical center.
When I am using my other projects which has a button on the navbar, the button text is also not in the middle vertically. It seems it is caused by the same problem (navbar height is not as big as the true native navbar).
I have tried adding Crosswalk Browser as well, but it doesn’t make any difference.
In addition, according to my observation, it seems that the navbar is shorter than a real native Android app. I compared the height with the navbar found in the “Settings” of my Moto G. That is why the title is not in the middle of the navbar.
Does anyone know why this happen and how to solve it?
Is this because different device renders the UI differently?
Or is it the expected UI by the Ionic Team?
Here are some screenshots from both Ionic Lab and my Moto G (I intentionally changed the background color so it’s easier to see the text position):
Ionic Lab:
Moto G:
Thanks!