Phonegap - add a splash screen for Android app - android

Could anybody please advise how I can add a splash screen to my HTML5 Phonegap based Android App. I just want it to display for 5 seconds on load. Also - can anybody advise what dimensions the splash screen should be.

In order to have a splash screen in a PhoneGap Android application you need to put your splash.png file into res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi, res/drawable-xhdpi. Where those directories represent low, medium, high and extra large dots per inch. You'll need to resize you splash.png (the file name is important here) for each directory or Android will stretch it for you.
The sizes of each image should be:
xlarge (xhdpi): at least 960 x 720
large (hdpi): at least 640 x 480
medium (mdpi): at least 470 x 320
small (ldpi): at least 426 x 320
Then in your main Java class, the one that extends DroidGap, you'll need to add one line and modify another. First add:
super.setIntegerProperty("splashscreen", R.drawable.splash);
this line should show up under super.onCreate but before super.loadUrl. Then you'll need to modify your loadUrl method to pause for 5 seconds before loading up the main page. It would look like this:
super.loadUrl("file:///android_asset/www/index.html", 5000);
That should do it for you.
I've recently made some updates to how the SplashScreen works on PhoneGap Android. The main app now loads while the splash screen is being shown. This is a big improvement over the previous blocking splash screen call. Read more about the changes on my blog.

Phonegap (Apache Cordova) documentation has enough details about the splash screen and different resolutions for both Android and iOS at one place.
http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html

In my Phonegap app, Android version, Eclipse debugger throws tantrums if you set the splash screen or even the 'loading' dialog before calling loadUrl.
Both will work in the actual app installed on a device, but they will break your debugging. So I've put them behind loadUrl, where they can do no harm and still show well before the app itself.
public class App extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html",5000);
super.setStringProperty("loadingDialog", "Starting your app...");
super.setIntegerProperty("splashscreen", R.drawable.splash);
...
}...

I have also face this issue in Phonegap Android, but now I got solution.
super.setIntegerProperty("splashscreen", R.drawable.splash);(find image under drawable folder named splash,so put splash.png under drawable folder)
super.loadUrl("file:///android_asset/www/index.html",15000);(splash screen will show 15 sec.
Please edit your main Java file under src folder in your project directory:
public class radiobiafra extends DroidGap
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html",15000);
}
}

Using Cordova >= 3.6, and building your app with the Cordova Command-Line Interface, it's possible to configure the splash screen from the config.xml file. This is an example for Android:
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<preference name="SplashScreenDelay" value="10000" />
There is also a dedicated plugin to show/hide the splash screen programmatically.
See the Cordova documentation for more information.

This will probably meet your needs. It lets you customise and add all the relevant config.xml setting, images and splashscreens in a nice intuitive interface.
I recommend downloading the file and installing manually. The web based air installer doesn't seem to work.
https://aj-software.com/apps/configap.html

Related

PhoneGap - Preventing Screen Orientation Changes

I've used a plugin to try and lock the screen orientation within my PhoneGap app:
cordova-plugin-screen-orientation
Within my app page I have the following code extract:
// Once DOM is loaded...
$(document).on('pagecreate', function() {
window.screen.lockOrientation('portrait'); // Seems to set variable but not LOCK screen?
var orient = screen.orientation; // Works
alert(orient); // Works
window.addEventListener("orientationchange", function(){ // Works
alert(screen.orientation); // e.g. portrait // Works
});
... Other code etc.
As you can see from the comments the plugin seems to be installed correctly as I am successfully calling portrait-primary, landscape-secondary etc. as I rotate my phone. The issue seems to be the function isn't LOCKING the screen?
Any help would be GREATLY appreciated!
Try setting this attribute in your config.xml.
<preference name="Orientation" value="portrait" />

IOS Cordova Lock SplashScreen Orientation

Background
I'm using Cordova to deploy javascript to iOS devices. Along with this, I'm using the CDVSplashScreen plugin in order to show my own splashscreen.
What I need help with
I want to be able to lock only the Launch/Splash Screens and then allow the app to reorient as it will for all other views.
What I've tried
I've added the following to my config.xml file:
<preference name="SplashScreen" value="screen" />
<preference name="orientation" value="portrait" />
<preference name="SplashScreenDelay" value="1000000" />
And I added the following code to both the CDVSplashScreen.m and CDVViewController+SplashScreen.m files:
-(NSUInteger)supportedInterfaceOrientations {
return UIInterfaceOrientationMaskPortrait;
}
The Results:
What I've added to the config.xml file appears to have locked the Launch Screen in portrait mode...however, after the SplashScreen appears, the view will rotate freely to landscape mode.
I don't believe that the supportedInterfaceOrientations function is doing anything at all where it's at - it only works in the mainViewController (but then the entire app is stuck in Portrait mode).
My Plea
Has anyone used this unique conglomeration of plugins before with the same requirement of a locked SplashScreen before? How did you solve it?
I haven't checked, but you could try the following:
Lock the orientation in Xcode to your needs. (Xcode -> General -> Deployment info)
Put an event handler in your javascript:
window.addEventListener("orientationchange", function() {
// Do some DOM-/CSS-manipulation depending on the value in window.orientation
}, false);
Or you could use CSS to make changes:
#media screen and (orientation: portrait) {
/* rotate your container */
}
#media screen and (orientation: landscape) {
/* rotate your container */
}
But I'm not sure that the device is firing the event.
Thank you guys for your suggestions. I ended up setting the orientation in the following function in the MainViewController:
- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
self.acceptedOrientation = UIInterfaceOrientationMaskPortrait;
}
return self;
}
This seemed to lock the SplashScreen in portrait mode for me.

Hide splashscreen phonegap v3

I am trying to make sure that my splash screen does not show in iOS phonegap v3
I have tried the following as suggested in their documentation:
Which includes installing the splash plugin
I immediately call hide
navigator.splashscreen.hide()
project layout
¬ res
¬ icon
config.xml
<gap:plugin name="org.apache.cordova.splashscreen" />
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
<param name="ios-package" value="CDVSplashScreen" />
</feature>
Notice there is no splash folder. Yet, the splash screen will always show and also display the default phonegap splash screen rather than skipping it.
Worth mentioning I am building via https://build.phonegap.com
Are you sure that the deviceready event is firing before you are calling navigator.splashscreen.hide()? Calling .hide() immediately after that event is fired should yield the result you are looking for.
Also, you can try replacing the splashscreen plugin altogether for cordova's new alternative:
cordova.exec(null, null, “SplashScreen”, “hide”, [])
The cordova.exec command hooks straight into the different devices native environments.
The parameters explained in more detail:
function(winParam) {} - Success function callback. Assuming your exec call completes successfully, this function will be invoked (optionally with any parameters you pass back to it)
function(error) {} - Error function callback. If the operation does not complete successfully, this function will be invoked (optionally with an error parameter)
"service" - The service name to call into on the native side. This will be mapped to a native class.
"action" - The action name to call into. This is picked up by the native class receiving the exec call, and, depending on the platform, essentially maps to a class's method.
[/* arguments */] - Arguments to get passed into the native environment
I think - stress think - that you can't do this. You could fake it perhaps by using a splash screen of a single color that matches the color of your app.

splash screen not working on Samsung galaxy android 4.1.1

I am facing one typical issue where our application(built with cordova 3.4.0) working for all versions from 2.3.x to 4.4.x however on following device because of splash screen plugin the app is not able to load
Samsung Android SGH-1747M
Version 4.1.1
When we remove splash plugin it works fine.
Issue : We have a splash screen open for 30 seconds before we redirect user to our login page (load from server side)
If we add splash plugin it doesn't load the login page it shows half black and half white screen forever, but if i remove splash screen plugin it works.For all other versions app working fine with splash screen plugin.
Thanks in advance for your help.
Since its 4.1.1 i am not able to get stack trace or logging statements on aLogcat , but below is the onCreate method that we have
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (appView == null) {
init();
}
appView.setWebChromeClient(new CordovaChromeClient(this, appView));
String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath();
appView.getSettings().setAllowFileAccess(true);
super.loadUrl(getString(R.string.app_url), 30000);
}
and using the same cordova pluing for splash screen as standard one (cordova version 3.4.0)
<preference
name="SplashScreen"
value="splash"/>

White notification icon for Android with Phonegap Build and PushPlugin

I'm messing around with Phonegap using Adobe's Build service and I was wondering if (and if so, how) I could make my notifications display a white icon (as Google describes here). I'm using the PushPlugin but I couldn't find any documentation on this. At the moment my app just displays the launcher icon next to the notification content.
So does anyone know if there's some way to enable an alternate notification icon with the PushPlugin, am I stuck with the launcher icon or is there another plugin with this feature?
Thanks!
I have never used Phonegap build - I do the build process manually on my machine. Anyway, I think you should find the GCMIntentService.java file under src/com/plugin/gcm. In that file, search for the following line of code:
.setSmallIcon(context.getApplicationInfo().icon)
This may be replaced by the icon you want. If you place an icon named "notification.png" in the /res/drawable folder, you could change the code line to:
.setSmallIcon(your.package.name.R.drawable.notification);
The new "phonegap-plugin-push" plugin has excellent support for notification icons for the new Lollipop.
Build an icon that has color on a transparent icon first. Per google's guidelines all notifications will display white on the notification tray.
So build the icon and then specify it as follows. "icon" specifies the image.
Place copies of "myicon" with appropriate resolutions in /platforms/android/res/drawable-RES/ folders as follows:
mdpi - 22x22 area in 24x24
hdpi - 33x33 area in 36x36
xhdpi - 44x44 area in 48x48
xxhdpi - 66x66 area in 72x72
xxxhdpi - 88x88 area in 96x96
Now in your JS, specify your icon. The "iconColor" is optional and will specify the background when you swipe down.
var push = PushNotification.init({
"android": {
"senderID": "<<SENDER_ID>>",
"icon": "myicon",
"iconColor": "#123456"
},
In your push payload you can now-override the icon that is specified on swipe down by adding an "image" parameter. Image can either be a resource, it can reference "www/image/image.png", or can be a full URL.
The "plugin docs" are excellent, I recommend reading them. Hope this is useful to somebody.
Set this on your PhoneGap or Cordova config.xml
<preference name="android-targetSdkVersion" value="20"/>
This is for the new plugin - phonegap-plugin-push
Might work for the old PushPlugin as well.
Android has set guidelines for the notification icon for Lollipop and above. The icon needs to be purely white and transparent.
What I did:
Generated different sizes for my logo image (lets name it "notif.png") which had transparent back, using this tool. Remember to have a transparent back image, if you dont have a transparent image, android will just show white icon only. Lets assume the generated icon's name is "ic_notif".
Copy the respective size images to res/drawables folder.
In the push JS code, give the value "ic_notif" to "icon" property. And "grey" to "iconColor" property like this: PushNotification.init({"android":{"senderId":"XX","icon":"ic_notif","iconColor":"grey"}});
Test your notification using this tool.
Android API 21+ uses only white color for small icon.
Changing target SDK Version makes your compiler to use elder SDK so U`ll be cut in new SDK features.
So the best way is to have two icons: small and big one (when bar is dragged down)
For a time, you can set your android-targetSdkVersion to API 20.
This version don't use the new features, that broke the old resources.
For me the solution works when combining two answers from here:
First I set the target sdk version
<preference name="android-targetSdkVersion" value="20"/>
And then I edited the plugin code as suggested here, in GCMIntentService class I modified the setNotificationSmallIcon method to be:
private void setNotificationSmallIcon(Context context, Bundle extras, String packageName, Resources resources, NotificationCompat.Builder mBuilder, String localIcon) {
mBuilder.setSmallIcon(getApplicationContext().getApplicationInfo().icon);
}
or if you want to set a custom icon then use
private void setNotificationSmallIcon(Context context, Bundle extras, String packageName, Resources resources, NotificationCompat.Builder mBuilder, String localIcon) {
mBuilder.setSmallIcon(<your.package.name>.R.drawable.<notification-drawable-name>);
}
I also faced too many problem in this but after searching all over the internet i found different solutions for this issue.Let me sum up all the solutions and explain:
Note:This solution is for Phonegap cordova users
Example
<preference name="android-targetSdkVersion" value="20"/>
You need to set your android-targetSdkVersion value to less than 21.
So after setting this value Notification icon image will appear till Android 6(Marshmallow), It won't work in Android 7(Nougat).
This solution worked for me.
Change the statusbarStyle in your config file.
Example
<preference name="StatusBarStyle" value="lightcontent" />
But this solution will work only when your app is opened.
So, I guess this solution is not the best solution but it worked for many users.
Make your icon transparent.
This solution worked for many people.
Actually the thing is, In the development of Native aplication we need to provide them three images:
(a)App icon
(b)Notification icon
(c)Status bar icon image, but in case of Hybrid mobile application development there is no option to do so.
So make your icon transparent and this solution will solve your problem.
And I am sure one of the above solution will work for your issue.
With the recent update to PhoneGap Builder to version 2 (and CLI v7.0.1), I'm now able to get white notification icons to appear correctly with cordova-plugin-push.
I first created my .png icons (with transparency) in GIMP. I then put them in my project at /www/res/notify_icon/android/
Here are the relevant excerpts of my config.xml file:
<widget id="com.myapp.app" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<preference name="phonegap-version" value="cli-7.0.1" />
<preference name="pgb-builder-version" value="2" />
...
<plugin name="phonegap-plugin-push" source="npm" spec="~2.0.0-rc5">
<param name="SENDER_ID" value="1xxxxxxxxxx0" />
</plugin>
...
<platform name="android">
<resource-file src="google-services.json" target="google-services.json" />
<resource-file src="www/res/notify_icon/android/notify_icon-36-ldpi.png" target="res/drawable-ldpi/notify_icon.png" />
<resource-file src="www/res/notify_icon/android/notify_icon-48-mdpi.png" target="res/drawable-mdpi/notify_icon.png" />
<resource-file src="www/res/notify_icon/android/notify_icon-72-hdpi.png" target="res/drawable-hdpi/notify_icon.png" />
<resource-file src="www/res/notify_icon/android/notify_icon-96-xhdpi.png" target="res/drawable-xhdpi/notify_icon.png" />
<resource-file src="www/res/notify_icon/android/notify_icon-144-xxhdpi.png" target="res/drawable-xxhdpi/notify_icon.png" />
<resource-file src="www/res/notify_icon/android/notify_icon-192-xxxhdpi.png" target="res/drawable-xxxhdpi/notify_icon.png" />
...
</platform>
</widget>
Here is the where I initialize push:
document.addEventListener("deviceready", function() {
var push_options = {
android: {
senderID: "1xxxxxxxxxxx0",
sound: true,
vibrate: true,
icon: 'notify_icon',
iconColor: '#66CC00'
},
browser: {},
ios: {
senderID: "1xxxxxxxxxxx0",
alert: true,
badge: true,
sound: true
},
windows: {}
};
var push = PushNotification.init(push_options);
You just need to the change the
android-targetSdkVersion
in your config.xml file.
<preference name="android-targetSdkVersion" value="20" />
20 android sdk version support the logo in Android. So you have to change the android sdk version in your code.
If you're using Build's PushPlugin; local modifications to .setSmallIcon()#100 will be lost.
Unless you build locally or use an alternative GCM plugin, you're restricted to modifying:
title extras.getString("title")
message extras.getString("message")
msgcnt extras.getString("msgcnt")

Categories

Resources