In my Ionic app I was having trouble with the Android tabs on the top because the tabs were overlapping my ion-content. There are two solutions to this.

Solution 1, the correct way to fix this is to conditionally apply a class to your ion-content if the device is Android.


/* www/js/app.js */
.app(function(){
  $rootScope.android = ionic.Platform.isAndroid();
})

Then make sure you inject $rootScope into all of your controllers and in your view do this:


<ion-content ng-class="{'has-tabs-top': $root.android}">

OR

Solution 2 is for if you want something easier and that matches the IOS app as well then just move your tabs to the bottom by adding this line to your apps config function instead


/* www/js/app.js */
.config(function($ionicConfigProvider){
  $ionicConfigProvider.platform.android.tabs.position("bottom");
})


Related External Links: