Why does alert box look like old Android?

Ionic Framework ionic-v3
1

Why does the alert in my Ionic 2 app look like an old Android version and how can I change this?

Note: this is just calling JavaScript: alert() function, NOT the Alert component! I am doing this on purpose.

I’m concerned that the browser version/sdk it’s building to is out of date. DO NOT suggest to me to use a component, I already know about this.

For comparison, here’s what an alert looks like from my chrome browser:

1 Like
2

alert() is not the same as Alerts Component

3

I didn’t say it was. You misunderstand my concern.

4

But if you are using alert() function ofcourse you will get the default alert from Android xd.

5

Yes, I know that but you haven’t understood my question I think. The alert SHOULDN’T look like that. Any other browser alert from a web app/web site has a more modern styling.

So I’m concerned that the web-view that is in my app is not up-to-date, so maybe something is wrong with my ionic 2 build setup.

Make more sense now?

6

I don’t think this a ionic issue. What android version you have?

7

See my updated question. I’m on Android 6 marshmallow. This has to be a configuration issue with cordova/ionic 2 etc.

8

Set
theme="@android:style/Theme.DeviceDefault.Light.NoActionBar"
In platforms/android/AndroidManifest.xml

11

Thank you, this worked. Could you please explain to me if this has any bearing on the webview being used or can I safely ignore this from now on?

12

@Daveshirman So just a little background on whats going on here.

Chances are you have an older version of cordova-cli and cordova-android. There was an older version of cordova-android that manually set the native UI theme behind the scenes for older devices. With new version of cordova-android, this is not an issue.

image
Screen Shot 2016-03-22 at 2.34.10 PM.png794×1309 30 KB

You can either removed the bit of xml @shakogegia suggested, or update the cordova-android version.

13

Don’t think so? See my cordova version in my npm list output (6.0.0):

Davids-Air:DoStuff daveshirman$ npm list -g --depth=0
/usr/local/lib
├── acs@1.2.0
├── alloy@1.7.35
├── angular2@2.0.0-beta.8
├── bower@1.7.7
├── cordova@6.0.0
├── es6-promise@3.1.2
├── UNMET PEER DEPENDENCY es6-shim@0.35.0
├── ionic@2.0.0-beta.19
├── ionic-framework@2.0.0-beta.2
├── ios-deploy@1.8.5
├── ios-sim@5.0.7
├── npm@3.8.0
├── UNMET PEER DEPENDENCY reflect-metadata@0.1.3
├── rxjs@5.0.0-beta.2
├── titanium@5.0.6
├── typedphonegap@0.0.3
└── UNMET PEER DEPENDENCY zone.js@0.6.2
14

Right, but if the project is a bit older,

ionic platform ls

It could be in there. Either way, you could remove the bit of xml @shakogegia suggested and be all set

15 
Davids-MacBook-Air:DoStuff daveshirman$ ionic platform ls
Installed platforms: android 4.0.2, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, osx, webos

FYI - I already did as suggested, but just wanted to get to the root of the issue.
Thanks.

16