I am building an android webapp using cordova and framework7 for an existing drupal site. I'm currently using cordova-plugin-splashscreen for the app's spashscreen. I am able to enable or disable the spinner but not change the color of it.
I want to change the color of the spinner and also change the position to bottom of the screen.
I have tried the solution in this
link, but its not working. please don't mark this as duplicate and give a solution.
This is the part where i include the spinner in config.xml
<preference name="loadUrlTimeoutValue" value="700000" />
<preference name="ShowSplashScreenSpinner" value="true"/>
<preference name="SplashScreenSpinnerColor" value="#242424"/>
<plugin name="cordova-plugin-splashscreen" spec="~3.2.2" />
<engine name="android" spec="~6.0.0" />
Note: In the cordova site, the SplashScreenSpinnerColor preference is given as a quirk for windows.
Related
I am developing (and near to the release) of a Cordova App for iOS and Android.
I am trying to use cordova-plugin-ionic-webview in order to use the latest WebView engines.
I am able to use this plugin on iOS but on Android the App crashes on launch.
MY CONFIG.XML:
<allow-navigation href="cordovaios://*" />
<allow-navigation href="cordovaandroid://*" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
<preference name="Hostname" value="my-backend-url-to-avoid-CORS.com" />
<preference name="iosScheme" value="cordovaios" />
<preference name="Scheme" value="cordovaandroid" />
<preference name="ScrollEnabled" value="true" />
<preference name="MixedContentMode" value="0" />
<preference name="AllowBackForwardNavigationGestures" value="true" />
<preference name="Allow3DTouchLinkPreview" value="false" />
<preference name="WKSuspendInBackground" value="false" />
<preference name="KeyboardAppearanceDark" value="false" />
LOGS:
5726-5770/mycertificate.enterprise D/SERVER: Handling local request: cordovaandroid://my-backend-url-to-avoid-CORS.com/static/js/10.601e7973.chunk.js
5726-5773/mycertificate.enterprise E/chromium: [ERROR:render_process_host_impl.cc(4070)] Terminating render process for bad Mojo message: Received bad user message: Origin is invalid
5726-5773/mycertificate.enterprise E/chromium: [ERROR:bad_message.cc(23)] Terminating renderer for bad IPC message, reason 123
NOTE:
This config works fine on iOS. On Android I can't use this plugin due to this Hostname/Origin issue.
That custom scheme does not appear to be supported (just try to find something alike that in the source code). It is also beyond my understanding, for what one even would even need to register a custom protocol handler, while never leaving that WebView? The usual purpose is: to open another application.
<preference name="Scheme" value="https" />
<allow-navigation href="https://my-backend-url-to-avoid-CORS.com/*"/>
Unfortunately there is a lot of mismatching between the Cordova Android Platform version and plugins versions, which lead to some waste of time for nothing. Said so, for similar problemas I had like this I simply fixed them downgrading the version of Cordova or Android or the Plugin (or use the same version of android the plugin is using in their code example).
I installed Cordova plugin:
cordova-plugin-crosswalk-webview
Everything works fine with this plugin, but then I installed
cordova plugin add cordova-plugin-splashscreen
for creating splashscreen. In file config.xml in widget section I put this code:
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
Build was successful. After start application it shows splashscreen (for 5 second), but when splashscreen is disappear, it shows just white page instead my app. After I remove webview plugin - everyting works fine. How can I fix that problem?
I have a Cordova app running Cordova CLI 6.4.0. During load, there is a blank white screen for a solid 4-6 seconds on load after the splash screen. This same thing happens during app reload. No events fire from the app, either before or inside platform.ready event. After searching there seems to be some success by people for similar issues, all centered around the splash screen the below config options, none of the suggestions or ideas have worked.
Update
I seem to have made some progress and I think I understand more of what's going on here. Per another post here I added the below lines to my config.xml
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000"/>
The behavior now, with those two, is that the Splash Screen is displayed (for a long time, usually around 9 seconds), then the Splash goes away and my app loads. So it's no longer a white screen of evil but just a very slow to load app that is my problem.
/Update
Splash Screen -> 4-6 seconds blank white screen -> Then the app loads and deviceReady fires. This happens with SplashScreenDelay=2000
Or it will not show the splash screen at all and instead have 8-9 seconds of the blank white screen before the app loads. This happens with SplashScreenDelay=0
I have console.logs in my main app's constructor and on platform.ready, neither fire until the white screen of doom is resolved and gone away.
I have tried the below options
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="2000" />
and
<preference name="SplashScreenDelay" value="0" />
It's very confusing because it's not actually my app that's being slow... it's just the loading bits, with a blank white screen between the splash page and app load before anything else happens. I'm open to trying out any ideas as it's basically un-releasable in this state.
This does not happen at all on iOS, with the build and settings all identical, it's an Android specific issue. The device I am running on is a Moto E2.
I am using Ionic and below is a list of included plugins, as it seems that's the most likely culprit at this time. I will have to test everything out without certain plugins to see how it performs.
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-facebook4 1.7.4 "Facebook Connect"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"
And here's my full icon/splash definitions.
<platform name="android">
<allow-intent href="market:*" />
<icon platform="android" src="resources/icon.png" />
<icon platform="android" qualifier="ldpi" src="resources/icons/android/icon-36-ldpi.png" />
<icon platform="android" qualifier="mdpi" src="resources/icons/android/icon-48-mdpi.png" />
<icon platform="android" qualifier="hdpi" src="resources/icons/android/icon-72-hdpi.png" />
<icon platform="android" qualifier="xhdpi" src="resources/icons/android/icon-96-xhdpi.png" />
<icon platform="android" qualifier="xxhdpi" src="resources/icons/android/icon-144-xxhdpi.png" />
<icon platform="android" qualifier="xxxhdpi" src="resources/icons/android/icon-192-xxxhdpi.png" />
<splash platform="android" src="resources/splash.png" />
<splash platform="android" qualifier="ldpi" src="resources/screens/android/screen-ldpi-portrait.png" />
<splash platform="android" qualifier="mdpi" src="resources/screens/android/screen-mdpi-portrait.png" />
<splash platform="android" qualifier="hdpi" src="resources/screens/android/screen-hdpi-portrait.png" />
<splash platform="android" qualifier="xhdpi" src="resources/screens/android/screen-xhdpi-portrait.png" />
</platform>
When you build the apk-file, be sure to include "--prod" in the command:
ionic cordova build --release --prod android
This optimizes performance and decreases boot-time from 15 seconds (debug build) to 3 seconds (production build) in our app.
Found one some other SO answer, but I have solved with the below
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000"/>
The app still takes forever to load (usually around 9 seconds), but I avoid the white screen nonsense at least.
We can fast the loading of application by reducing the assets. But if it is not possible then we can atlease improve User experience(instead of showing blank screen, we can show splashscreen until all assets were loaded).
In config.xml, set auto splashscreen to false.
<preference name="AutoHideSplashScreen" value="false" />.
Create a separate javascript file for App specific events and link this file in index.html
in the javascript file, Catch DeviceReady event. In DeviceReady event handler, hide splash screen. See the code below.
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
//You can register other plugin specific events here and handle them.
},
onDeviceReady: function() {
navigator.splashscreen.hide();
}
}
};
app.initialize();
I have experienced this with Cordova before. I believe one way I solved it was to initially load an empty page, then redirect to the actual app page. You might give that a try? (It's possible that you will need to wait for the deviceready event before redirecting, not sure)
i have really searched about the problem but didn't find the correct solution that's why again here..
i have a Ionic+ Cordova project i want to show Splash Screen on android. project include a
res folder and inside that a drawable folder where i have placed my screen.png which i want to show.
but the problem is the file is not showing .
what is the problem how to show
i have include below line of code in config.xml which is inside of root folder
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="20000" />
<preference name="auto-hide-splash-screen" value="false" />
and my splash screen is here
platforms/android/res/drawable/screen.png
before app load a black than white backgound shows..
You need to install the splashscreen plugin in order to use it.
You can write the preferences in the config.xml, but I would recommand to do use the platform tag. Also make sure that you provide a splashscreen for each resolution in the drawables folder
<platform name="android">
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1500" />
</platform>
Did you add the SplashScreen to AndroidManifest.xml ?
I'm using phonegap to basically let me make a web page that seems like an app, and the page fine in the native browser on android, works fine in the emulator, but when it comes to the app (which is the same resolution as the emulator) there is simply a white blank page..
Any ideas?
I've installed the apk before and uninstalled it.. might it have something to do with this?
Make sure that your Activity does not have the:
setContentView(R.layout.activity_main);
Perhaps, your layout is empty and that line still exists together with the:
super.loadUrl("file:///android_asset/www/dummy.html");
You can also include a config.xml file in your /res/xml folder (/res/xml/config.xml)
Here is a sample of a basic one:
<?xml version="1.0" encoding="utf-8"?>
<cordova>
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<log level="DEBUG"/>
<preference name="useBrowserHistory" value="true" />
<preference name="exit-on-suspend" value="false" />
<plugins>
<plugin name="App" value="org.apache.cordova.App"/>
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>
I've had similar trouble when I first started experimenting with phonegap.
Also, make sure that the cordova-2.2..jar is in your libs folder and it is also referenced in your build path.
Hope that helps.