I have read the other questions but nothing helped. A bar like this one but with no label, icon and grey instead of black still appears on top of my phonegap app running in the phonegap tester on my phone and listening on my ip.
Here is my code:
My page is simply an iframe with no style applied.
config.xml outside of www folder contains this (sorry but for some reason I was not able to format code to the block):
...
<preference name="fullscreen" value="true"/>
...
<gap:config-file platform="android" parent="/manifest">
<supports-screens
android:xlargeScreens="true"
android:largeScreens="true"
android:smallScreens="true" />
<application android:theme="#android:style/Theme.Light.NoTitleBar">
<activity android:theme="#android:style/Theme.Light.NoTitleBar.Fullscreen">
</activity>
</application>
</gap:config-file>
<gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>
<gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>
<gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>
<gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>
<gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>
<gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>
<gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>
<gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>
The config.xml inside the www folder contains the same properties as well.
Does anyone have any idea on what the problem might be? I need this to run in complete absence of any extra headers. I want to run this simply with the iframe...
If you're using Xamarin, try
RequestWindowFeature(WindowFeatures.NoTitle);
and if you're using Java, it should be something like
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
in your OnCreate() method.
I recently dealt with this in C# and I sourced the Java solution from here How to hide the title bar for an Activity in XML with existing custom theme
Related
And by "custom splash graphic" I just mean my own image. No matter what I try I it always just shows the little phonegap robot. Note that I'm only concerned with Android here. Here's what I've done:
installed the plugin via command line
ran my original image through this converter to get it as a collection of the appropriate Android sizes
replaced the files in these path with my own (yes, I renamed my own files to these names):
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/ldpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/mdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/hdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/xhdpi.png" />
replaced the files in these paths to my own even though it shouldn't have anything to do with splash image:
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/xhdpi.png" />
At this point I honestly don't even see where the default phonegap robot image file could be hiding in my project or what in config.xml is pointing to it.
Have you added the default splash screen location like so
<preference name="SplashScreen" value="screen"/>
also as per the new updated docs seen here http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens
the gap:splash is be deprecated and you are supposed to use just the splash tag
I have found that if you add the plugin using npm in phonegap buil it does not work so the following will not work
<plugin name="cordova-plugin-splashscreen" source="npm"/>
and so you have add the plugin the old way so the followin works
<plugin name="br.com.paveisitemas.splashscreen" spec="2.1.1" source="pgb" />
Please note that in the past splash screens were specified with the gap:splash element and the platform specified with gap:platform. This is still supported but we recommend moving to splash and platform.
In my case what I was seeing was, in fact, not the splash but rather the background image set in index.css. So while the app shows it loads the robot image... which is not the splash.
I'm building a iOS and Android app (with ionic framework and Adobe Phonegap Build), but can't seem to get the splash screens showing up in Android here's my config.xml:
<gap:plugin name="org.apache.cordova.splashscreen" version="0.3.4" />
<preference name="show-splash-screen-spinner" value="true" />
<preference name="auto-hide-splash-screen" value="true" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1000" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="icons/splashscreen/port-ldpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="icons/splashscreen/port-mdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="icons/splashscreen/port-hdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="icons/splashscreen/port-xhdpi.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xxhdpi" src="icons/splashscreen/port-xxhdpi.png" />
The splash screen images are sizes like this:
port-ldpi.png = 240x320
port-mdpi.png = 320x480
port-hdpi.png = 480x800
port-xhdpi.png = 720x1280
port-xxhdpi.png = 1280x1920
The path to the images are correct. On iOS it working without any problems.
Any suggestions how to solve this problem? :S
You don't have the default splash tag which is
<gap:splash src="splash.png" />
It's in the documentation: http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens
You can look at my example demos.
https://github.com/jessemonroy650/Phonegap-Splashscreen-Test
It works for both Android and iOS. Implemenation notes are included.
NOTE: AndroidManifest.xml is NOT needed.
Also the splash image MUST be the correct size or at least the correct size ratio so it can stretch it.
Example:320x240 will work for 640x480, etc. Otherwise, you need to use a 9-patch image. I have not tested 9-patch.
I created custom icons and splash screens for my phonegap android application. I created the phonegap application by using 'phonegap create' and I replaced all the stock icons and splash screens with custom made icons and splash screens.
Below is my folder structure of the images and splash after executing 'phonegap create' command
-myproject
--www
---icon.png
---res
----icon
-----android
------icon-36-ldpi.png
------icon-48-mdpi.png
------icon-72-hdpi.png
------icon-96-xhdpi.png
----screen
-----android
------screen-hdpi-landscape.png
------screen-hdpi-portrait.png
------screen-ldpi-landscape.png
------screen-ldpi-portrait.png
------screen-mdpi-landscape.png
------screen-mdpi-portrait.png
------screen-xhdpi-landscape.png
------screen-xhdpi-portrait.png
Below is the config.xml
<icon src="www/icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
Now I execute the 'phonegap build android' I dont see all the icons and splash screens are not copied to platforms\android\res folder. I only see the stock phonegap icons and splash screens.
I dont want to manually copy the icons and splash screens for each platform. It should happen automatically while building the phonegap for a target platoform. How should I do that.
Problem solved after moving the config.xml inside www folder and removed all www/ references in config.xml.
I.e,. the image paths should be relative where the config.xml exists.
Other way (works for me) using gap:density="ldpi" without moving any file
<icon gap:platform="android" gap:qualifier="ldpi" gap:density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" gap:density="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" gap:density="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" gap:density="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
I'm working on an application for Android using phonegap 3.5.0 - my testing device is a Samsung Galaxy Tab (GT-P5100) with Android 4.1.2 .
Half a year ago I did my first tests with phonegap. I remember the splashscreen loading at startup with the following line in the config.xml
<gap:splash gap:platform="android" src="res/screen/android/screen-xhdpi-portrait.png" />
Now with the hard- and software mentioned above it's not working anymore...
I tried the following:
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="android" gap:density="ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:density="mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:density="hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:density="xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="android" src="res/screen/android/screen-xhdpi-portrait.png" />
and of course:
<gap:plugin name="org.apache.cordova.splashscreen" />
Any suggestions? Thanks!
P.S.: Not working on Sony Xperiia Z1 Android 4.4.4, too.
For Phonegap vesions above 3.5 require splashscreen plugin in order to load the splashscreen.You can download from here (https://github.com/apache/cordova-plugin-splashscreen/blob/master/doc/index.md).
Also you can use native java code to display the splash screen
//splash.java
public class Splash extends Activity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//show your splash screen for three seconds
setContentView(R.layout.splash);
public void run() {
try{
sleep(3000);
}catch(InterruptedException e){
e.printStackTrace();
}finally {
//launch the mainactivity after three seconds
Mainactivity.class is your phonegap default javafile
Intent mainactivity = new Intent(Splash.this,Mainactivity.class);
startActivity(mainactivity);
}
#Override
protected void onPause() {
// TODO Auto-generated method stub
super.onPause();
finish();
}
}
NOTE:set Splash.java to launcher activity and made appropriate changes in manifest file
I've tried:
changing the file at myapp/platforms/android/res/drawable/icon.png
editing the tag in www/config.xml
minor sacrifices
thanks!
If you have correctly updated your icon files in platforms/ios/YourAppName/Resources/icons and you still can't see the change then make sure you:
Completely remove the app from your device
In Xcode go to Product > Clean and then re run your app.
You need to replace all icon files in res folder.
Once you done, just clean your eclipse project and run.
although you accepted a different answer, that did not help me so for some of you reading this please note the following:
the accepted answer will work most probably only if u build ur
app locally
u do not need to overwrite the default platform icons
... phonegap lets you overwrite everything from the config.xmlfile
you need to use something like this in you config.xml:
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="img/icons/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="img/icons/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="img/icons/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="img/icons/android/icon-96-xhdpi.png" />
<icon gap:platform="ios" height="57" src="img/icons/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="img/icons/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="img/icons/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="img/icons/ios/icon-72-2x.png" width="144" />
<icon gap:platform="winphone" src="img/icons/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="img/icons/windows-phone/icon-173-tile.png" />
please note that the path is img/bla-bla-bla ... it can be whatever
you want ... BUT ... that path it is relative to you www folder ...
so it will actually map to www/img/bla-bla-bla
hope this helps someone ... i found it the hard way :)
Rares