Android hardware button weird behaviour with two ion-tabs on same app

ionic-v1
1

Hey,

I’m getting some weird behaviour with Android hardware back button.

I have 3 tabs on my app and if I’m on my first tab which is home page, back button closes the app and that is normal. Same happens also on second tab-page when it should go back to first page, but on third tab-page back button goes to first tab-page when it should go to second tab-page because I navigate through them all from first tab to the last tab.

Update, found the reason below:
I’m not getting the same behaviour if I start new ionic tabs project, but I don’t see any differences either.

Anyone know why this happens because I don’t know where to even look? Controllers and app are fine as far as I know because I compared them to the starter project.

2

Are you overriding the back button anywhere, or clearing the history stack?

3

Thx for reply.

No I’m not because I want to avoid that.

But I just found out the reason why that was happening. I’m using tabs for navigation and as an abstract state. Index has only ion-nav-view. On my second tab page I have 5 more tabs on top only for that page and when I have these on the second page it breaks the back button behaviour (closes the app) and works normally if I remove them.

Here is the structure for tabs:

<ion-nav-bar class="bar-energized">  
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-refresh"></button>
    <button class="button button-icon icon icon-right ion-android-more-vertical"></button>
  </ion-nav-buttons>
</ion-nav-bar>

<ion-tabs class="tabs-striped tabs-icon-top tabs-energized">
  <!-- Dashboard Tab -->
  <ion-tab title="Etusivu" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view 
  </ion-tab>

  <!-- Charts Tab -->
  <ion-tab title="Mittaristo" icon-off="ion-stats-bars" icon-on="ion-stats-bars" href="#/tab/charts">
    <ion-nav-view name="tab-charts"></ion-nav-view>
</ion-tab>

  <!--Third-->
  <ion-tab title="Laskut" icon="ion-cash" href="#/tab/laskut
     <ion-nav-view name="tab-laskut"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Here is the structure for second tab page with 2 tabs but I have 5 of them similarly:

<ion-view view-title="Charts">
  <ion-tabs class="tabs-striped tabs-energized tabs-top tabs-icon-top">
  
    <ion-tab title="Chart 1" icon="ion-arrow-graph-up-left">
        <!-- Tab 1 content -->           
         <ion-content class="padding">
         </ion-content>       
    </ion-tab>
   
    <ion-tab title="Chart 2" icon-on="ion-ios-pie" icon-off="ion-ios-pie-outline">
        <!-- Tab 2 content -->
        <ion-content class="padding">
       </ion-content>
    </ion-tab>
          
 </ion-tabs>
</ion-view>

So am I doing something wrong?

4

Hmm are you able to put this in a Codepen so we can see a working example?

5

Well the problem is that it breaks only on device because of the Android hardware button. I’m not using emulators much because I run tests directly on Nexus 9 or on my HTC One M8.

I don’t have project files at home so I did another project based on starter project tabs with similar structure. It can’t be tested on Codepen because there is no Android back button. I have also this starter project installed on my phone atm with the same behaviour happening.

6

The Codepen was more so to see the structure. :blush:

I’m not super familiar with tabs, but I believe it is being caused by the ionTabs creating their own navigation stack.

It would take some restructuring but you could use the css classes for tabs to get around this: http://ionicframework.com/docs/components/#tabs

I’m not sure if this is considered an issue or not, maybe @mhartington can answer that.

1 Like
7

I tried using those but I just couldn’t think of a way to get similar usability with them.
IonTabs would be much better because I need tabs for five different charts and IonTabs are perfect for that because they are so simple and require only one view for all of them.

I don’t know did you/anyone notice that I also use on that second tab page above each tab content ion-header-bar because without it tab-content would go under tab-bar.

I’m not sure either if I’m just using tabs here wrong way or not.

Hoping to get an answer from someone before I change anything.

Thank you anyway! :smile: