Hi, I am a newbie at ionic 2.
I have concerned that there are different user interfaces between serve user interface and real user interface at device.
I am testing the app via a command “ionic serve --lab” and it works properly via the serve command.
However when I am trying to execute the app in real device via a command “ionic run android”, the user interfaces are looking different.
Please look at screenshots attached.
Any suggestions will be appreciated.
Thanks.
Please do not ask the same question over and over again. If you don’t receive an answer, bump your previous question and it will move to the top.
Bump == add a replay
1 Like
OK. The last post was temporarily hidden by Akismet. So I have posted here again. Thanks.
Hi, by default the serve command serves to the browser, in case of chrome it shows the style for IOS, but when you deploy to Android the styles changes to adapt to Material Design, which is the default native style for Android, if you want to see how would it look on both devices in the browser use --lab or configure the emulator of chrome with an android devise or an IOS device as needed.
2 Likes
Hi, With the --lab parameter the app looks good at both android and iOS.
Actually the app looks good at real iOS device, but not android device.
Text of buttons is not aligned to center and images (at /img folder) are not even displayed.
I am wondering if I need to add some plugins or change configuration to android.
Thanks.
You shouldn’t need to do that, maybe is an issue with android version, ionic or angular version, or you’re making something funky in the JS, HTML or CSS.
Use ionic info to check some of the versions.
Are you saying the app only looks ugly in a real Android device? all the others are ok?
1 Like
The app looks ugly only in the real Android device while it looks good at browsers and real iOS device.
The below is my ionic information. I hope it will help you to seize my problem.
Your system information:
Cordova CLI: 5.4.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 2.0.0-alpha.49
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.2.4
Xcode version: Xcode 7.2 Build version 7C68
Have you included XWalk on your build set-up? It could be due to the native browser on the android device being outdated…
Chances are you have a custom/outdated version of the Android stock-browser or Chrome. It’s a good practice to also setup Xwalk for your project to ensure that a consistent webview is used for all systems.
1 Like
Basically my setup but in Ubuntu instead of Mac, Android version of your device? maybe setting up CrossWalk (alias XWalk) to solve compatibility issues and improve performance, i wanted to use it but it seems it has some quirks to be able to install it properly, i don’t need the feature that much but it could be your solution.
1 Like
Hi, I have tried to install the crosswalk, but the app with the crosswalk crashes.
Can you please check crash screenshot and logs of following commands?
Thanks.
ionic browser add crosswalk
Adding crosswalk browser
Info
Cordova CLI v5.0 no longer requires you to use the ionic browser command to get Crosswalk installed
The ionic browser command will install Cordova Android, the Crosswalk plugin, the whitelist plugin, and the splashscreen plugin for your convenience.
Due to this, if you need to specify a version of Crosswalk, see this link: GitHub - crosswalk-project/cordova-plugin-crosswalk-webview: Crosswalk WebView Cordova Plugin (UNMAINTAINED)
Enjoy!
Added Android
Added Crosswalk plugin
Added whitelist plugin
Added splash screen plugin
Completed installing Crosswalk
ionic run android
∆ Compiling Sass to CSS
√ Matching patterns: app/app.+(ios|md).scss
∆ Copying fonts
√ Matching patterns: node_modules/ionic-framework/fonts/**/*.ttf
∆ Copying HTML
√ Matching patterns: app/**/*.html
∆ Compiling and bundling with Webpack…
√ Using your webpack.config.js file
√ Sass compilation complete
√ Fonts copied to www/build/fonts
√ HTML copied to www/build
√ Compiling files complete.
Hash: 9794d9c21537a76527b3
Version: webpack 1.12.10
Time: 7366ms
Asset Size Chunks Chunk Names
app.bundle.js 2.58 MB 0 [emitted] main
[0] multi main 76 bytes {0} [built]
+ 353 hidden modules
√ Webpack complete
Running command: /Applications/XAMPP/htdocs/working/time-sheet/angular2/hooks/after_prepare/010_add_platform_class.js /Applications/XAMPP/htdocs/working/time-sheet/angular2
add to body class: platform-android
Running command: /Applications/XAMPP/htdocs/working/time-sheet/angular2/platforms/android/cordova/run
ANDROID_HOME=/Users/admin/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_66.jdk/Contents/Home
WARNING : No target specified, deploying to device ‘192.168.56.101:5555’.
Running: /Applications/XAMPP/xamppfiles/htdocs/working/time-sheet/angular2/platforms/android/gradlew cdvBuildDebug -b /Applications/XAMPP/xamppfiles/htdocs/working/time-sheet/angular2/platforms/android/build.gradle -PcdvBuildArch=x86 -Dorg.gradle.daemon=true
embedded
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
org.xwalk:xwalk_core_library:16+
:preBuild
:compileX86DebugNdk
:preX86DebugBuild
:checkX86DebugManifest
:preArmv7DebugBuild
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles UP-TO-DATE
:CordovaLib:preBuild
:CordovaLib:preDebugBuild
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:compileDebugJava UP-TO-DATE
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:packageDebugJar UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:packageDebugJniLibs UP-TO-DATE
:CordovaLib:packageDebugLocalJar UP-TO-DATE
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:bundleDebug UP-TO-DATE
:prepareAndroidCordovaLibUnspecifiedDebugLibrary UP-TO-DATE
:preArmv7ReleaseBuild
:preX86ReleaseBuild
:CordovaLib:copyReleaseLint UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles
:CordovaLib:preReleaseBuild
:CordovaLib:checkReleaseManifest
:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl
:CordovaLib:compileReleaseRenderscript
:CordovaLib:generateReleaseBuildConfig
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets
:CordovaLib:generateReleaseResValues
:CordovaLib:generateReleaseResources
:CordovaLib:packageReleaseResources
:CordovaLib:processReleaseManifest
:CordovaLib:processReleaseResources
:CordovaLib:generateReleaseSources
:CordovaLib:compileReleaseJavaNote: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
:CordovaLib:processReleaseJavaRes UP-TO-DATE
:CordovaLib:packageReleaseJar
:CordovaLib:compileReleaseNdk
:CordovaLib:packageReleaseJniLibs UP-TO-DATE
:CordovaLib:packageReleaseLocalJar UP-TO-DATE
:CordovaLib:packageReleaseRenderscript UP-TO-DATE
:CordovaLib:bundleRelease
:prepareComAndroidSupportSupportV42311Library
:prepareOrgXwalkXwalk_core_library164542119Library
:prepareX86DebugDependencies
:compileX86DebugAidl
:compileX86DebugRenderscript
:generateX86DebugBuildConfig
:generateX86DebugAssets UP-TO-DATE
:mergeX86DebugAssets
:createXwalkCommandLineFileX86Debug
:generateX86DebugResValues
:generateX86DebugResources
:mergeX86DebugResources
:processX86DebugManifest
:processX86DebugResources
:generateX86DebugSources
:compileX86DebugJavaNote: /Applications/XAMPP/xamppfiles/htdocs/working/time-sheet/angular2/platforms/android/src/org/apache/cordova/splashscreen/SplashScreen.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
:preDexX86Debug
:dexX86Debug
:processX86DebugJavaRes UP-TO-DATE
:validateDebugSigning
:packageX86Debug
:zipalignX86Debug
:assembleX86Debug
:cdvBuildDebug
BUILD SUCCESSFUL
Total time: 39.196 secs
Built the following apk(s):
/Applications/XAMPP/xamppfiles/htdocs/working/time-sheet/angular2/platforms/android/build/outputs/apk/android-x86-debug.apk
Using apk: /Applications/XAMPP/xamppfiles/htdocs/working/time-sheet/angular2/platforms/android/build/outputs/apk/android-x86-debug.apk
Installing app on device…
Launching application…
LAUNCH SUCCESS
Sorry, the logs say nothing to me, i would try inspecting the devise with chrome inspect tool but it only works with Android 4.4 up.
1 Like
The crosswalk worked on real device while it did not work at genymotion.
Anyway there is next issue which image is not showing.
ion-icon.setting:before {
content: url(‘/img/setting.png’) !important;
}
I have the img folder at www and android/assets/www, but the images are not shown at real device though it’s shown at browser.
Any suggestions?
Xwalk also installs the cordova-whitelist plugin, which will restrict the origins of loaded sources because of security considerations.
Have you setup the content origins in the Content Security Policies meta tags? This could be the reason your images are not showing up.
1 Like
The whitelist plugin configuration would helped to me. Anyway the main reason of my case was incorrect path of image files. I had to set relative path as absolute path did not work at real device like below.
ion-icon.synchronize:before {
content: url(‘…/…/img/synchronize.png’) !important;
}