cordova how to create animated splashscreen android
cordova how to create animated splashscreen android
Cordova is a great framework to create hybrid applications for mobile devices. It gives you the flexibility of combining native functionalities such as SQLlite database, GPS etc. with the power of web languages (Javascript) and CSS to create nice user interfaces that look like native. Cordova surely makes its way to be as close to native feel as it can be and I believe that it’s almost there! I’ve been developing native mobile applications for quite long time, and switched to Cordova a few years ago.
In my latest project I am developing an application for Android devices. In this application, I am using the “Splashscreen” plugin. This plugin allows the application to show a static image until Cordova becomes ready and display the main html page of the application. That is great because you can hide behind a nice designed image the loading process of the application from the user. On the other hand, you are limited to display only a static image. That means no animations or something more attractive/fancy for the user’s eye while loading.
In this project I had to find a way to display an animated splashscreen before the application comes to the front. This article is focusing on the path I took to achieve that. So let’s begin! Wait... before starting, I want to note out that this is a working way of doing this, but it’s not The proper or correct or official way, so any better suggestion or ideas is always welcome in the comment section.
Let me start by pointing out the problem again. We want to display an animated splashscreen in a cordova application.
The solution to that, for now, as I can see it, is to use native Android development for the splashschreen part. That way we can create a layout for the splashscreen that will hold our elements (ImageView, TextView etc.) and create animations using Java in our main’s Activity code (CordovaActivity). Then, after the animation completes, we load the main page of our Cordova application (There is a small catch here, that we will see later on this article and how to deal with it).
The above part describes in words how to achieve this. Let’s move to a more interesting part, the code.
Firstly we have to create the XML files needed to perform the animations. To do so, we have to create a directory with the name “anim” inside res folder. For my project I needed a combination of two animations. A fade animation and a translate animation. Either way, we have to create at least on XML file that will hold the animation we want. So, for this project, we create two xml files one with the name “fade.xml” and on with the name “translate.xml” and we add the code written below for each file respectively.
<!--
fade.xml
You can change the values according to your needs
-->
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="3000" />
<!--
translate.xml
You can change the values according to your needs
-->
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:ToXDelta="2%"
android:fromYDelta="100%"
android:toYDelta="0%"
android:duration="2000"
android:zAdjusment="top" />
</set>
Now we have defined our animations. Next we have to create a layout for the Splashscreen view. For that we will need to create one more XML file and save it in the layout folder of the Android project. We will name it “splashLayout.xml” (or however you like). The XML code for this file is:
<!--
splashLayout.xml
You can add any elements you want
-->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="splashLay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="@drawable/splaschback"
android:orientation="vertical" />
<ImageView
android:id="splashImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="22dp"
android:layout_background="@drawable/logo" />
</RelativeLayout>
The layout of the Splashscreen is now ready.
There is a small catch to consider in this setup. Remember Cordova provides the SplashScreen plugin in order to show an image until is ready. The application starts to load when “loadUrl(launchUrl)” is called from our Java Cordova Activity. Then, Cordova loads first the splash that is defined in the configuration file and when is ready shows the main html page. That means that showing a native splashscreen will happen before Cordova is ready. So thinking of it, you will realize that the native splash is more of a screen that is shown before Cordova, rather than a real splash that is used for the purpose it supposed to.
Understanding this, we have to create a static image that will show just like the native splash will be, after the animation on the native side ends. That way, when the animation finishes, the real splash screen will show up but this transition will not be visible to the user. An example is shown in the screencast below
Friday, March 13, 2015
As the screencast shows we show a native splash with fade and translate animation on an imageview. After the animation ends we show the real splash screen, which is a static image that looks like the native splash view when the animation completes. Then, we show the main page of the Cordova application (the notification dialog that pops up indicates that cordova is ready). Now that we cleared the tricky part we move on the native code and show how we create the animations and later call Cordova.
package gr.your.pacjage;
import gr.your.package.R;
import android.os.Bundle;
import org.apache.cordova.*;
import android.view.View;
import android.graphics.PixelFormat;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class CordovaApp extends CordovaActivity
{
public void onAttachedToWindow() {
super.onAttachedToWindow();
Window window = getWindow();
window.setFormat(PixelFormat.RGBA_8888);
}
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
AnimateNative();
//loadUrl(launchUrl);
}
private void AnimateNative() {
Animation anim = AnimationUtils.loadAnimation(this, R.anim.fade);
anim.reset();
RelativeLayout l=(RelativeLayout) findViewById(R.id.splashLay);
l.clearAnimation();
l.startAnimation(anim);
anim = AnimationUtils.loadAnimation(this, R.anim.translate);
anim.reset();
ImageView iv = (ImageView) findViewById(R.id.logo);
iv.clearAnimation();
iv.startAnimation(anim);
anim.setFillAfter(true);
anim.setAnimationListener(new Animation.AnimationListener(){
@Override
public void onAnimationStart(Animation arg0) {}
@Override
public void onAnimationRepeat(Animation arg0) {}
@Override
public void onAnimationEnd(Animation arg0) {
loadUrl(launchUrl);
}
});
}
}
The code above shows how the Cordova Activity should be in order to call the native view first and later load Cordova. As we can see we call “loadURL” onAnimationEnd event. That way when the native view completes our Cordova app shows up.
As I said in the beginning comments and suggestions are welcome. With that approach you can have a working native splash with any animations you want.
By Jc