How to set the whole app in android's style even if on ios in ionic?

How to set the whole app in android’s style even if on ios in ionic2?

1 Like

Is there a specific reason to do so? you should know that the reason they are different is to replicate native elements in each platform so the user experience is standard across both platforms, anyway if you absolutely need to use only the Material Design styles then here’s how to do it with ionic 1, try and see if it works with ionic 2 but changing the ios word by md:

3 Likes

Or just simply copy paste the scss, delete the ios scss and name, the copy from before, ios. Copy the exact name. It should work.

I think it’s better to try and search for a config option, if you override the scss and later you realize you need the ios scss, you would be forced to search for it again from a test project or something.

3 Likes

In ionic2 official doc. There is no any options about set the platform style.

What I want to do is that I want to use the android’s action sheet style in iOS :slight_smile:

2 Likes

I downloaded the GitHub - ionic-team/ionic-preview-app: The Ionic Component Demos and put it to run
So I wanted to force the template for md, reading the doc posted by KimWong, a see this config:
Config - Ionic API Documentation - Ionic Framework

@App({
template: <ion-nav [root]="root"></ion-nav>
config: {
backButtonText: ‘Go Back’,
iconMode: ‘ios’, /* <---- */
modalEnter: ‘modal-slide-in’,
modalLeave: ‘modal-slide-out’,
tabbarPlacement: ‘bottom’,
pageTransition: ‘ios’,
}
})

But i try it and didn’t forced
“(…)\ionic-preview-app\app\app.ts”
@App({
templateUrl: ‘./build/app.html’,
config: {
production: false,
iconMode: ‘md’,
platforms: {
android: {
activator: ‘ripple’,
backButtonIcon: ‘md-arrow-back’
}
}
}
})

The only solution was run the url with query param
http://localhost:8100/?ionicplatform=android

Does anyone know tell me it did not work?

This url says it’s possible to force

You can change the mode that gets assigned in the configuration of your app. Therefore, if you wanted the Material Design md mode on iOS, you could do it.
Platform Specific Styles

1 Like

You can use:

@App({
  templateUrl: 'build/app.html',
  config: {
    mode: 'md'
  }
})

I’m not sure why this isn’t documented, so I created an issue for it:

There is currently no way to set a single component to match the styles of a different platform, but you could override the iOS Sass variables to get close to that of Androids. If this is a feature you’d like - could you create an issue and we can discuss it? Thanks! http://ionicframework.com/submit-issue/

9 Likes

Thanksssssssss you so much and sorry for the late reply because i am busy in these days.

Yes, you are right and i got it.

In Ionic v 2.1.0

you can configure this in app.module.ts as below

imports: [
IonicModule.forRoot(MyApp,{
mode: ‘md’
})
],

15 Likes

Why not let the user decide which design he would prefer?
Is it possible to change the mode at startup, through user settings, or even better, at runtime?

@Emmanerl_FRANCOIS How to do that? can you provide an example , thanx

go to www/build/main.css

then comment out all the css classes starting with .action-sheet-md and then paste the following gist css code…

https://gist.github.com/kishorekumar080297/a16bef44fbc677d8bcce6f9776f5da27

Please try this in your index.html file

I tried the below html code in **_

ionic 4

_** and it works

Use the below one for getting styled your apk same as ios.

<html lang=“en” dir=“ltr” class=“plt-iphone plt-ios plt-phablet plt-mobile ios” mode=“ios”>

Use the below one for getting styled your ios app same as android.

<html lang=“en” dir=“ltr” class=“plt-android plt-mobile md” mode=“md”>

Please try this in your index.html file

I tried the below html code in **_

ionic 4

_** and it works

Use the below one for getting styled your apk same as ios.

<html lang=“en” dir=“ltr” class=“plt-iphone plt-ios plt-phablet plt-mobile ios” mode=“ios”>

Use the below one for getting styled your ios app same as android.

<html lang=“en” dir=“ltr” class=“plt-android plt-mobile md” mode=“md”>

For Ionic 4 check out the “mode” config option described here: https://ionicframework.com/docs/utilities/config#config-options

in Ionic 4, only need …forRoot({mode:‘ios’})… At least, on the browser works just fine and as expected! That config is a game change :smiley:. Thank you!

Just change in app.module.ts file at

IonicModule.forRoot({mode: 'md'})

With {mode: 'md'} this code you can achieve the android style in ios device.

Same way you can make ios style in android just add {mode: 'ios'}

Hope it helps you.