• Home

Avoid flickering view title with Ionicframework and Android

For several days I was facing a strange behavior when navigating in my app, especially on Android devices and simulator (I think transitions are different with iOS).

Basically I have a header with always the same string in it (app title) and a subheader with a set of 3 tabs. When I was navigating from one tab to another it was like the app was reloading the view title : the feeling was really sluggish...

On each tabs I had a :

<ion-view view-title="Title">
  <ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon white-icon ion-android-more-vertical" ng-click="openPopover($event)">
    </button>
  </ion-nav-buttons>

To get rid of this flickering/reloading behavior, I deleted those lines in each tabs.

Then in the index.html, inside the ion-nav-bar directive I added :

<ion-nav-back-button></ion-nav-back-button>
      <ion-nav-title>Title</ion-nav-title>
      <ion-nav-buttons side="right">
        <button menu-toggle="right" class="button button-icon icon white-icon ion-android-more-vertical" ng-click="openPopover($event)">
        </button>
      </ion-nav-buttons>

Don't forget to add some controllers to deal with events such as the ng-click here.

No more flickering.

 

Print Email