How to acheive creating an Android and iOS-specific layout

ionic-v1
1

So I read this post from the ionic guys from a week ago: http://ionicframework.com/blog/ionic-lab/
In the picture you can see that android and iOS have a very different look and feel, even though (I suppose) the layouts files are the same.

How can I apply these look and feels to my app?

2
3

I can’t speak for how they did it, but there is a class added to the body tag called “platform-ios” or “platform-android” depending on which device you are using. I use sass to override specific classes based on the platform.

So for example I would put this in my sass file (scss) to remove the borders on the item class for android (like the picture)

.platform-android {
   .item {
     border: none;
   }
}

If you are using css you could do it like this

.platform-android .item {
  border: none;
}
4

We do something similar to @brandyshea except that we inject a stylesheet at build time (using grunt) depending on the platform.

See: http://mcgivery.com/using-the-ionic-framework-with-grunt-and-phone-gap-build/

1 Like
5

Well maybe I should specify a bit was my question really was. I know that it is theoretically possible to add different styles to android and ios.

But is there a prebuilt style as seen in the picture,
or do I have to set the android-specific font and tabs manually?

Because for me it seems kinda obvious that you could just write <ion-tabs> and then the tabs would look appropriate to the platform.

tl;dr: Is this very style in this very layout in the picture custom or does it belong to the ionic framework?

1 Like
6

Yes, it comes out of the box.

If you view their tabs and side menu example (http://codepen.io/ionic/full/odqCz/) and emulate an Android device in Chrome via device emulation, you’ll see the tabs at the top instead of at the bottom.

7

You can use the .platform-android, .platform-ios, etc. classes in CSS. Also, in beta 14 there is an $ionicConfigProvider, check it out here: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/. You can use it to determine where the tabs should be etc.

I’ve included my own app below to demonstrate using the .platform classes to change my title colour. Beta 14 automatically puts tab on top for Android, so I didn’t need to use the $ionicConfigProvider.

Android:

image
unnamed.jpg506Ă—900 42.4 KB

iOS:

image
image.png864Ă—1228 73.5 KB

Hope this helps :)!

8

I am currently also trying to achieve something very similar to the layout in the original post. What would be the best way to conditionally hide icons if the platform is Android? I tried using ng-class to conditionally set the tabs-icon-top class on the ion-tabs element, but since each ion-tab has an icon attribute defined, it only shows icons and hides the text. Using ng-attr-icon didn’t seem to work either.

I was eventually able to achieve this by having two separate templates with the corresponding differences stated explicitly, but I would rather not do that.