Default Tab layout changed beta7 on Android Device

Hi

I just upgraded to beta 7 and noticed the tab layout on the physical android device looks different. It is still the same as before (ie. beta 6) on physical iOS 7 and also same as before on chrome during dev.

See screen shots for change.

Screen shot for beta 7 on Android 4.3 physical device

the look and feel I’m after and how it worked in beta 6 and still works in beta 7 on iOS and chrome

My tab code looks like this:

<ion-tabs class="tabs-icon-top tabs-calm tabs-default">

  <!-- Home Tab -->
  <ion-tab title="Home" icon="icon icon-calm ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>

  <!-- Contacts Tab -->
  <ion-tab title="Contact" icon="icon ion-location" href="#/tab/contact">
    <ion-nav-view name="contact-tab"></ion-nav-view>
  </ion-tab>

  <!-- Map Tab -->
  <ion-tab title="Map" icon="icon ion-map" href="#/tab/map">
    <ion-nav-view name="map-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Anyone else seeing this - any ideas

My have to revert to beta 6 and was a few days from publishing

Update: I have also tried removing the tabs-default from ion-tabs directive and still same issue

Another update:
I took a look at changes in beta 7 and pretty sure this have to do with platform specific styling now in beta 7 - see list of changes.

digging deeper I find in platform.js that the style tabs-striped is added for android default style - assume this causes it.

knowing the problem now and assuming this is how ionic intend to go forward - does anyone know how to set the default back - so app will look same on ios and android

Just updating to promote and see if anyone has an answer

cheers
Darren

Hey there,

in order to achieve the consistent tab styling, you need to set $ionicTabsConfig to an empty string. This code snippet should give you the general idea on how to modify your existing code:

angular.module('yourApp', ['ionic'])
.run(function ($ionicTabsConfig) {
  // Default to ios tab-bar style on android too
  $ionicTabsConfig.type = '';
});

Cheers

Many thanks @aidentailer

Simply and neat and worked a treat - thanks

Note can also use same approach to set the navbarconfig and navbarview properties

many thanks … the problem was solved

far as I can see the source code of the default tabs using ionicframework for android devices

Terrific.
I have solved the problem.
Thanks for your help.