Thursday, 27 August 2009

It's not just any AR it's Location Based Augmented Reality

There's a lot of talk out there at the moment on this subject, so I couldn't resist writing a few lines on it myself. Augmented reality has been around for some time, but with the introduction of smart phones with Cameras, GPS, built in compasses and acceleromters, it seems that AR is finally ready to hit the big time and find its way into the every day life of the mobile phone user.

For me there seems to be two distinct types of AR. The first is AR that uses fiducial markers, motion tracking and computer vision. These applications take a fair amount of processing power and are not really suited to mobile phones. An example of this type of AR can be seen here. The second is the Location Based AR. This seems to be driving the new interest in AR and there are a number of new Applications emerging for both Android devices and the iPhone. These types of AR applications don't need to use motion tracking or complicated computer vision systems. These applications use GPS and the built in compass of mobile devices to locate the distance and direction of POI (Points Of Interest). These points of interested are then displayed over the live camera view giving general information on the POI plus indications of its distance and direction. POIs can be anything, from twitter users, houses for sale, to interesting historical buildings.

One of the first AR applications for Android devices that i became aware of was Enkin, but since then Wikitude and Layar seem to be the two main front running Location based AR applications available for Android. Wikitude gives the user information on general points of interest around their present location, such as interesting historical buildings, while the examples on Layar show services giving details of houses for sales and nearby twitter users. Both websites seem to be offering APIs to allow third party developers to build their own versions of AR applicaitons.

AR is still commercially in it's first stages, but the possibilities seem almost limitless and who knows where future advances in technology could take this interesting area. For now I'm going to stick with Location based AR, and the compass, GPS , accelerometer and camera APIs in the Android developer docs. I'll let you know how it goes....

Monday, 24 August 2009

Android Animations 3D flip

In this post we are going to look at how to create a 3D flip animation, with a FrameLayout.

In the first few posts I've written on Android and animations we have only looked at the predefined animations supplied in the android.view.animations package. In fact we've only used the translate animation, but as I've mentioned before there are also rotate, scale and alpha animations.

In this tutorial i want to take a further look at animations and how we can created our own custom animations using the Android library. I've going to base the tutorial on some of the examples that can be found in the samples folders that are downloaded with the android SDK. These are some great examples, but unfortunately they seem to lack a little on documentation and explanation as to how, and what, the code is doing. Hopefully by the end of this tutorial things should be a little clearer.

Before we start here's an example of the end result of our 3d flip:











So lets get started. First Create a new Android project in Eclipse with these setting:
Project name: Flip3d
Application Name: Flip3d
package name: com.example.flip3d
Activity: Flip3d

I've used some firefox image icons to animate, they are part of a very good and free icon set that can be found here. If you just want the images i've used they can be found here and here. Download these images and place them in the res/drawable folder of the Flip3d project.

Lets start with defining a layout that we can use. As I mentioned we are going to use a FrameLayout. As with the ViewFlipper the FrameLayout can contain a number of child views, but unlike ViewFlipper, FrameLayout stacks it's child views on top of each other with the most recent added child on top. Initially without any intervention all the child views of the FrameLayout are visible, but don't worry about that for now, we will solve this at a later stage. In the FrameLayout we will define two child views, these are the views that we will animate between. In res/layout edit the main.xml file so that it looks like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include android:id="@+id/notelist" layout="@layout/first_view" />
<include android:id="@+id/notelist" layout="@layout/second_view" />
</FrameLayout>
This is the frame layout and we've specified that it contains two child views, first_view and second_view. Lets Create these views. In res/layout create two files first_view.xml and second_view.xml. The first view file needs to look like this:
<RelativeLayout android:id="@+id/Layout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<mageView
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:id="@+id/ImageView01"
android:layout_height="wrap_content"
android:src="@drawable/firefox"
>
</ImageView>
</RelativeLayout>
And second_view.xml contains this xml:
<RelativeLayout android:id="@+id/Layout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:id="@+id/ImageView02"
android:layout_height="wrap_content"
android:src="@drawable/firefox_alt"
>
</ImageView>
</RelativeLayout>
These two views are almost identical and only contain two different images that we will flip between.Now we have our layouts defined we need to write some Java to implement our 3d flip. Create a Java class called Flip3dAnimation in the com.example.flip3d package and cut and paste in this code:
package com.example.flip3d;

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class Flip3dAnimation extends Animation {
private final float mFromDegrees;
private final float mToDegrees;
private final float mCenterX;
private final float mCenterY;
private Camera mCamera;

public Flip3dAnimation(float fromDegrees, float toDegrees,
float centerX, float centerY) {
mFromDegrees = fromDegrees;
mToDegrees = toDegrees;
mCenterX = centerX;
mCenterY = centerY;
}

@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mCamera = new Camera();
}

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = mFromDegrees;
float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);

final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;

final Matrix matrix = t.getMatrix();

camera.save();

camera.rotateY(degrees);

camera.getMatrix(matrix);
camera.restore();

matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);

}

}
Custom Animation class

This class extends the Animation class and implements the applyTransformation method. Each Animation has a transformation object that Defines the transformation to be applied at a point in time of the Animation. When this animation is running the applyTransformation method will be called a number of times to allow us to calculate the transformation to be applied. Each time applyTransformation is called the interpolation value passed in will be increased slightly starting at 0 and ending up at 1. So our float 'degree' at line LINE NUMBER will increase slightly each time this method is called.

The main steps that happen in the applyTransformation are:

Calculate the degrees rotation for the current transformation
Get the tranformation matrix for the Animation
Generate a rotation matrix using camera.rotate(degrees)
Apply that matrix to the Animation transform
Set a pre translate so that the view is moved to the edge of the screen and rotates around it centre and not it's edge
Set a post translate so that the animated view is placed back in the centre of the screen.

Camera in android.graphics

You can see that we also use the android.graphics.Camera class, don't get this confused with camera class in android.hardware which is used to control the Camera on the android device. The Camera class in the android.graphic package is very different, it is used to calculate 3d transformations that can then be applied to animations. This Camera class represents a virtual view as if we were looking at our Android views through a camera. As we move our virtual camera to the left , we have the effect of the android view moving to the right , and if we rotate our virtual camera, we have the effect of rotating our Android view. Here the Camera class is use to calculate a rotate transformation about the Y axis, it does this every time the applyTransformation method is called and so gives each incremental transformation that is needed to give a smooth rotation effect. Camera uses transformation matrices to store and calculate transforms. It's not really necessary to have an in depth knowledge of how transformation matricies work, but a good article on them can be found here. The article is based around flash, but the same principles apply.

Now that we've got our rotation animation we need to come up with a plan of how to use it. We currently have two images but just rotating these isn't going to give us the effect we want. So what we need to do is hide the second image and display only the first. We will then rotate this image through 90 degree until it's edge on and we can no longer see it. At this point we will make the first image invisible and the second image visible, we will start the animation of the second image at a 90 degree angle and then roatate round until it is fully visible. To go back from the second to the first image we will just reverse the process.

We'll start with our main Activity class Flip3d.java:

package com.example.flip3d;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.widget.ImageView;

public class Flip3d extends Activity {


private ImageView image1;
private ImageView image2;

private boolean isFirstImage = true;


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

image1 = (ImageView) findViewById(R.id.ImageView01);
image2 = (ImageView) findViewById(R.id.ImageView02);
image2.setVisibility(View.GONE);

image1.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
if (isFirstImage) {
applyRotation(0, 90);
isFirstImage = !isFirstImage;

} else {
applyRotation(0, -90);
isFirstImage = !isFirstImage;
}
}
});
}

private void applyRotation(float start, float end) {
// Find the center of image
final float centerX = image1.getWidth() / 2.0f;
final float centerY = image1.getHeight() / 2.0f;

// Create a new 3D rotation with the supplied parameter
// The animation listener is used to trigger the next animation
final Flip3dAnimation rotation =
new Flip3dAnimation(start, end, centerX, centerY);
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
rotation.setAnimationListener(new DisplayNextView(isFirstImage, image1, image2));

if (isFirstImage)
{
image1.startAnimation(rotation);
} else {
image2.startAnimation(rotation);
}

}
}
In the main activity class we have the usual onCreate method. In this method we get references to the two images that we are displaying. Here we also set the visibility of our second image to View.Gone. The final thing to be done in onCreate is to set up a click listener for our fist image (we don't need a click listener for the second image). In the click listener we have a boolean, isFirstImage, which tells us which image is currently visible, if it's true the first image is visible and if false the second image is visible. Depending on which image is visible, we call the applyRotation method with different start and end values, since we rotate the first image in a different direction to the second image.

The applyRotation method is fairly straight forward, we find the centre of our image, create a new instance of our Flip3dAnimation, and apply and start it for the visible image. Well, there's a little more yet... As you may have already noticed we've only done half the animation here, from 0 to 90 degrees, we still have another 90 degrees to go, and we still have to swap the images over half way through. So this is were we need an Animation listener, which we are going to call DisplayNextView. Create a class of this name and paste in this code:
package com.example.flip3d;

import android.view.animation.Animation;
import android.widget.ImageView;

public final class DisplayNextView implements Animation.AnimationListener {
private boolean mCurrentView;
ImageView image1;
ImageView image2;

public DisplayNextView(boolean currentView, ImageView image1, ImageView image2) {
mCurrentView = currentView;
this.image1 = image1;
this.image2 = image2;
}

public void onAnimationStart(Animation animation) {
}

public void onAnimationEnd(Animation animation) {
image1.post(new SwapViews(mCurrentView, image1, image2));
}

public void onAnimationRepeat(Animation animation) {
}
}
The DisplayNextView Animation Listener is very simple and just listens for the end of the rotate animation, Since out first rotate animation only goes from 0 to 90 onAnimatonEnd method will be called when our first image is at 90 degrees. So now we need to Swap the images and this is were out SwapViews class comes in. So create a class called swap views and paste in this code:
package com.example.flip3d;

import android.view.View;
import android.view.animation.DecelerateInterpolator;
import android.widget.ImageView;

public final class SwapViews implements Runnable {
private boolean mIsFirstView;
ImageView image1;
ImageView image2;

public SwapViews(boolean isFirstView, ImageView image1, ImageView image2) {
mIsFirstView = isFirstView;
this.image1 = image1;
this.image2 = image2;
}

public void run() {
final float centerX = image1.getWidth() / 2.0f;
final float centerY = image1.getHeight() / 2.0f;
Flip3dAnimation rotation;

if (mIsFirstView) {
image1.setVisibility(View.GONE);
image2.setVisibility(View.VISIBLE);
image2.requestFocus();

rotation = new Flip3dAnimation(-90, 0, centerX, centerY);
} else {
image2.setVisibility(View.GONE);
image1.setVisibility(View.VISIBLE);
image1.requestFocus();

rotation = new Flip3dAnimation(90, 0, centerX, centerY);
}

rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new DecelerateInterpolator());

if (mIsFirstView) {
image2.startAnimation(rotation);
} else {
image1.startAnimation(rotation);
}
}
}
SwapViews does exactly what its name suggests and swaps the images, setting one image to invisible and the other to visible depending on which image was already visable, but it also does one last important thing, and that is to create and apply the last half of the animation.

You should now have a working flip animation. This technique can also be applied to ViewGroups , so it could be used as a way to transition between different views. There are a few more things that we can do to this animation to improve it such as adding a depth effect, but I'll leave that to another post. Like I mentioned earlier, this example is based on the samples that are in the downloadable SDK files, so have a look at these samples as well.

Wednesday, 12 August 2009

More on Android Animations

In a post I wrote a while back, Android transitions- slide in and slide out, I gave an example of defining some translate animations in Java. I metioned at the time that it was also possible to define these in XML. So here's a little more on that..

First of all lets just take a look at the kind of animations that we are dealing with here. Google has two main types of animations
frame by frame which use drawable objects, and tweening animations, that act on views and view groups. The animations that i used in the previous post acted on view groups and view and were of the tweening type, so thats' what i'm going to talk about in this post.

Let's take another look at one of the original translate animations that we created:
private Animation inFromRightAnimation() {

Animation inFromRight = new TranslateAnimation(
Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f,
Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f
);
inFromRight.setDuration(500);
inFromRight.setInterpolator(new AccelerateInterpolator());
return inFromRight;
}
Here you can see that we have defined a translate animation. There are four main types of animations defined for tweening animations they are Rotate, Alpha (controls transparency) , Scale (for size control), and translate which controls movement of the views and view groups. It is of course possible to define you own animations, but we'll keep that for another post...

So back to the translate animation. This animation is use to take a view from right of the visible screen and move it to the left until it appears on the screen. We create a new transaltion called infromRight using the TranslateAnimation constructor. Eight arguments are passed into the constructor, and they controll the X from and to positions, and the Y from and to position. Four of the Translate animation construtor arguments specify how the to and from positions should be interpreted in our case we specified
Animation.RELATIVE_TO_PARENT,which means that our from and to float values will be multiplied by the height or width of the parent of the object being animated. With these arguments we specify that we want out animation to start from a X position one width times the parent and end at a X position zero times the parent. We don't specify any numbers for the Y to and from since we do not want to move our view in that direction.

Once we have created our animation we then set the duration of the animation and the Interpolator algorithm to use, i.e. do we want the animation to happen at a constant speed or accelerate etc...

Ok, so that's our translate animation in Java now lets have a look at what it looks like in XML:



<translate android="http://schemas.android.com/apk/res/android"
fromxdelta="100%p" toxdelta="0%p" duration="500"
interpolator="@android:anim/accelerate_interpolator">

Here we define our from x position as 100%p , the p stands for relative to parent. We also set the duration and the interpolator. I saved this file in a res/anim folder in my android project and called it in_from_right.xml. To use it in our original Slide.java activity all we have to do is replace:

flipper.setInAnimation(inFromRightAnimation());
with:
flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.in_from_right));
Of course we also need to define and pass in a context.

You can also define Android Rotate , Alpha and Scale animations in XML, once you understand the basics it's quite straight forward. Have fun with the animations... :)

Tuesday, 11 August 2009