Header and tab bar on android

1

I have forced the tab bar to show up at the bottom on android, but how do I remove the bold black line on the currently selected tab?

Also on android the title on header is left-aligned. Can I center-align it like it does on iOS?

2

If you use the ion-header-bar directive, ionic will automatically style the components to match the device os. You can force it to use the default center align by either forcing the entire app to adhere to ios style or you can just use the regular ionic css header component.

3

Thanks, how about the tab bar buttons?

4

In that case, I would recommend forcing the entire app to adhere to the ios style.

.config(function() {
  //Set platform UI to android
  ionic.Platform.setPlatform('android');
})

Example codepen demonstrating that for forcing android style.

1 Like
5

After setting it to ios, the top nav bar becomes like this…
image

6

Does that happen on the browser as well? or just on simulator/device?

7

This happens on all simulators and devices, no matter they are on ios or android.

8

Hi I also have the same issue.
Did you find a solution for black line issue?