Default Tab layout changed beta7 on Android Device

ionic-v1
1

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

2

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

3

Many thanks @aidentailer

Simply and neat and worked a treat - thanks

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

4

many thanks … the problem was solved

5

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

6

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