Ionic2 ion-header not displaying well on android emulator

Ionic Framework ionic-v3
1

image

i have made simple ion-navbar , in the header i made 3 buttons , when i running on the browser it is normally working , i test it on an emulator it looks like that .

<ion-header>
  <ion-navbar color="leo">
    
    <button ion-button menuToggle  >
      <ion-icon name="menu"></ion-icon>
     </button>
<ion-title>{{ appName }}</ion-title>
<ion-buttons end >
      
      <button ion-button  (click)="goContactPage()" >
        <ion-icon name="chatboxes"></ion-icon>
      </button>
    
      <button ion-button  (click)="presentPopover($event)"> 
    <ion-badge   *ngFor="let n of nbr" color="danger" >{{n.total}}</ion-badge> 
  </button>

      <button ion-button  (click)="goAbout()"   >
        <ion-icon name="calendar"></ion-icon>
        </button>

       
  </ion-buttons>
   
  </ion-navbar>
</ion-header>
2

Hum. Swap out the button that has the badge with a temp button and see if it renders correct with that placeholder. If it does then the badge is messing something up. If it does not, then you know it is three buttons.

You might also want to inspect the width of the title element and maybe override the value.

3

i have resolved the issue by using ion-segment , it renders the hoped result