I am currently using Ionic 3 and I found a pretty weird bug(?). On android I use the fullscreen option in the config.xml and also in the app.component.ts file
config.xml:
<preference name="FullScreen" value="true" />
app.component.ts:
keyboard.disableScroll(true);
keyboard.hideKeyboardAccessoryBar(true);
this.androidFullScreen.isImmersiveModeSupported()
.then(() => this.androidFullScreen.immersiveMode())
.catch((error: any) => console.log(error));
statusBar.hide();
statusBar.overlaysWebView(false);
And it is working well until I start using an input and when the keyboard shows up the status bars are also get visible until a minimize the app and open again.
Here is a gif about the promlem:
I figured it out.
So the problem was the cordova plugin not installed properly and also throw an error because of some permission thing. If this also happening with your application just run this:
ionic cordova build android --verbose
This will also throw a permission error, but it will output the folder where you don't have the right permission and after run on the folder:
sudo chmod 755
Related
I am having problem in resolving the white screen in the ionic mobile app.
I followed the below steps:
Ionic Start
Project Name: Test
Framework: Angular
Starter template : conference | A kitchen-sink application that shows off all Ionic has to offer
Ionic Serve : This is executing successfully and app is successfully in browser
Build the cordova app to create www folder:
ionic cordova prepare android
ionic build cordova
This creates the www folder
Then i am using Intel XDK tool : To create the package
Then i am using https://build.phonegap.com/ to create the .apk
.apk is successfully created
Once i install the app in android mobile phone : App is opening and splash screen is shown successfully
12: But the issue is after splash screen, i am seeing white screen and nothing is happening after that
My config.xml has below info:
The same config file if used in ionic 2, it is working fine.
Please help.
Config.XML Message is as below:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" android-versionCode="1" version="0.0.1" id="com.test.game" >
<!-- This file was generated by the Intel XDK Cordova Package Build tool. -->
<name>Game</name>
<description>Play game in your mobile phone</description>
<author></author>
<content src="index.html"/>
<preference name="android-build-tool" value="gradle" />
<platform name="android" >
<access origin="*"/>
</platform>
<preference name="StatusBarBackgroundColor" value="#fa8039" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="phonegap-version" value="cli-6.5.0" />
<preference name="xwalkMultipleApk" value="false" />
<plugin name="cordova-plugin-device" spec="1.1.2"/>
<plugin name="es6-promise-plugin" spec="4.2.2"/>
<plugin name="cordova-admob-sdk" spec="0.20.2"/>
<plugin name="cordova-connectivity-monitor" spec="1.2.2"/>
<plugin name="cordova-google-play-services" spec="25.0.0"/>
<plugin name="cordova-libgoogleadmobads" spec="https://github.com/appfeel/google-iosadmobads#master"/> <!-- If available via Cordova registry; consider changing to an NPM reference. -->
<plugin name="phonegap-admob" spec="4.2.1"/>
<plugin name="cordova-plugin-x-socialsharing" spec="5.0.12"/>
<plugin name="cordova-plugin-inappbrowser" spec="1.4.0"/>
<plugin name="cordova-plugin-market" spec="1.2.0"/>
<plugin name="cordova-plugin-whitelist" spec="1.2.2"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="UIwebviewbounce" value="false"/>
<preference name="webviewbounce" value="false"/>
<platform name="android" >
<preference name="android-minSdkVersion" value="16"/>
<preference name="android-targetSdkVersion" value="29"/>
<preference name="android-installLocation" value="auto"/>
<preference name="android-signed" value="true"/>
<preference name="Orientation" value="default"/>
<preference name="AndroidLaunchMode" value="singleTop"/>
<preference name="Fullscreen" value="false"/>
</platform>
<preference name="SplashScreenDelay" value="10000" />
<splash platform="android" src="package-assets/3204261.png" density="ldpi" width="320" height="426" orientation="portrait"/>
<splash platform="android" src="package-assets/3204701.png" density="mdpi" width="320" height="470" orientation="portrait"/>
<splash platform="android" src="package-assets/4806401.png" density="hdpi" width="480" height="640" orientation="portrait"/>
<splash platform="android" src="package-assets/7209601.png" density="xhdpi" width="720" height="960" orientation="portrait"/>
<icon platform="android" src="package-assets/36AS.png" density="ldpi" width="36" height="36"/>
<icon platform="android" src="package-assets/48AS.png" density="mdpi" width="48" height="48"/>
<icon platform="android" src="package-assets/72AS.png" density="hdpi" width="72" height="72"/>
<icon platform="android" src="package-assets/96AS.png" density="xhdpi" width="96" height="96"/>
<config-file platform="android" parent="/manifest/application" mode="merge">
<activity android:launchMode="singleTop" />
</config-file>
</widget>
Below is the chrome->console error. I am not able to resolve this warning.
Chrome->Console
Below is the error i am getting now after running command:
ionic cordova platform add browser
ionic cordova run browser
chrome->console
Step 1:In config.xml, verify your existing information and provide the below only:
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />
Step 2: In app.component.ts, update the below:
initializeApp() {
this.platform.ready().then(() => {
setTimeout(() => {
this.splashScreen.hide();
}, 1000);
});
}
This should resolve the issue. The Splash will remain active and spinner will also remain active till the homepage is displayed. There won't be any white screen after splash.
You can debug it from android studio bottom bar run, logcat, build etc..
Other hand you can debug it from google chrome just type: chrome://inspect
and you can see the following:
(if your app is running in android studio emulator or connected phone)
You should click on inspect and will see something like this:
Here on console tab you can check what causes the white screen error.
I have a cordova project and I installed the StatusBar plugin to color the status bar of the device in the Android platform. The plugin displays the correct status bar color if I run the project on an AVD (pic1), but when I run it on the device it does not appear to work.
I also noticed that when I run the project on device with the plug in uninstalled the view takes up the entire screen, but if I run it with the plugin installed there is black space between the app view and the top and bottom of the phone's nav bar and status bar (pic2).
Device: Samsung S9 running Android 8.0.0 (Oreo)
Cordova version: 8.0.0
StatusBar plugin version: 2.4.2
Cordova whitelist plugin: 1.3.3
index.js:
var app = {
// Application Constructor
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
// deviceready Event Handler
//
// Bind any cordova events here. Common events are:
// 'pause', 'resume', etc.
onDeviceReady: function() {
this.receivedEvent('deviceready');
StatusBar.backgroundColorByHexString("#CF4D4D");
},
// Update DOM on a Received Event
receivedEvent: function(id) {
}
};
app.initialize();
I've tested your code and it works fine on 4 different devices with Android 5, 6, 7 and 8.1, so it's clearly a bug in the plugin. (probably device specific or vendor specific)
So report it on https://issues.apache.org/jira/browse/CB providing all the possible information. (The information on this "question" should be enough)
You can set them in your config.xml too:
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#CF4D4D" />
<preference name="StatusBarDefaultScrollToTop" value="false" />
If that helps you in any way.
I have an error when I run my app on ionic cordova run android.
My error is : Connection to the server was unsuccessful. (file ///android_asset/www/index.html)
I try to resolve it with forums that exists with this solution :
1)Rename your index.html to “main.html”
2)Create a new “index.html” and put the following content into it:
<!doctype html>
<html>
<head>
<title>title</title>
<script>
window.location='./main.html';
</script>
<body>
</body>
</html>
Or modify in the config.xml this line :
<preference name="SplashScreenDelay" value="3000" />
to this line :
<preference name="SplashScreenDelay" value="70000" />
But when I run my app after saving my new code, the error still appear and when I return into my code, I see that the code is still the same and not has been modified (even if I modified it like I sayed previously !)
Someone know how to resolve my problem ?
Thanks in advance,
Caroline
I had that error with one application and I solved it with Crosswalk.
ionic plugin add cordova-plugin-crosswalk-webview
After installation you may have to adjust the design but the error will no longer appear.
More about Crosswalk.
Optional config.xml settings:
<preference name="loadUrlTimeoutValue" value="60000" />
<preference name="AutoHideSplashScreen" value="false" />
Try updating your Cordova android platform:
ionic platform remove android
ionic platform add android
Add and Remove android platform
ionic platform rm android
ionic platform add android
It's not really an answer but it allowed me to see my app without the error message.
When I run my app with the terminal ionic cordova run android the error still persist.
But if I run my app with Android Studio it's works !
I have an Ionic project and I installed this plugin to scan qrcodes:
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
But when I run the app on a samsung s5 device with Android 6.0 I get a camera error:
"Sorry, the Android camera encountered a problem. You may need to restart the device"
Any ideas of what causes this issue?
I have tested with:
ionic run android -l -c
ionic run android
This is my code executed when I press a button:
$scope.scanBarcode = function() {
$ionicPlatform.ready(function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
console.log("Barcode text -> " + imageData.text);
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled); // prints: cancelled
}, function(error) {
console.log("An error happened -> " + error);
});
});
};
For this issue you can try either of below solutions:
1) It is permission issue with android 6. So to fix the issue configure platform to android 5.0.
OR if you are using MI note 4 you can try below additional steps:
There is another permission required in MIUI secruity system and after enabling it, camera started working.
Following are the steps you can follow to update the setting:
1) Go to Security.
2) Click on “Permissions” and again select “Permissions”
3) Now from the list, click on “Camera”.
4) It will list all the apps installed. Look for your app and enable the permission.
Reff: http://sforsuresh.in/cordova-sorry-android-camera-encountered-problem/
This is what solved my problema, in the config.xml file in the "android" platform section I put:
<platform name="android">
<preference name="android-targetSdkVersion" value="22"/>
</platform>
I'm trying to change the color of the native status bar in an ionic app, but I can't get it to work. I've installed cordova-plugin-statusbar, and it installs fine. The following code works perfectly:
if (StatusBar) {
StatusBar.hide();
}
But trying to use any other of the available functions, for example:
if (StatusBar) {
StatusBar.backgroundColorByHex('#RRGGBB');
}
doesn't work, the just app uses the standard statusbar.
I've also added <preference name="StatusBarOverlaysWebView" value="true" /> to config.xml, as well as setting it programmatically at runtime.
Cordova is version 5.1.1, Ionic is version 1.5.5 and I'm using Android 21 for testing. Has anyone experienced the same problem or know how to fix it?
See me original solution at Can't get cordova-plugin-statusbar to set color on Android
Add the plugin. Run shell command:
$ cordova plugin add cordova-plugin-statusbar
Edit your config.xml:
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#BE1912" />
'#BE1912' is the default color (on app starts).
Change in run time from your java script code:
if (window.cordova && StatusBar)
{
StatusBar.backgroundColorByHexString('#BE1912');
}
Could you try removing the status bar plugin and reinstalling like so:
ionic plugin rm org.apache.cordova.statusbar
ionic plugin add https://github.com/apache/cordova-plugin-statusbar.git
The same has been reported at the ionic issue tracker
Gil's solution doesn't work for me (I've a Samsung Galaxy S7 Edge).
onDeviceReady: function () {
app.receivedEvent('deviceready');
console.log(StatusBar);
if (window.cordova && StatusBar) {
StatusBar.backgroundColorByHexString('#BE1912');
}
},