Wednesday, June 19, 2013

ANDROID TRAFFIC LIGHT ANIMATION

In this tutorial we will go into the ANIMATIONS side of Android.

Lets take the example of Traffic Light.

SITUATION:

1.Traffic Light works with respect to time(some amount of milliseconds)
2.Three lights correspondingly to change the transactions.
3. Light should change automatically.



Lets proceed to the deployment process

STEP 1:Open Eclipse and Select NEW--->PROJECT--->ANDROID APPLICATION PROJECT.

STEP 2:A window appears and include Project Name as Traffic light(Remember first letter should always be in uppercase) and package name as com.sai.trafficlight(YOUR CHOICE)

Then proceed to the main window of our project.

In the left pane i.e PROJECT EXPLORER pane, under the res folder,create a new folder named Drawable to have the Nine Patch (PNG)images of the TRAFFIC LIGHTS.

DRAWABLE FOLDER CONTAINS THE FOLLOWING ITEMS


----->IC LAUNCHER

--->RED.PNG

----->RED2.PNG

----->RED_YELLOW.PNG

-------->YELLOW.PNG

----------->GREEN.PNG

Along with these it contains the XML i.e the animation list.

TAFFICLIGHTS.XML:(source file for the layout folder)

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="false">
  <item android:drawable="@drawable/red" android:duration="2000" />
  <item android:drawable="@drawable/red_yellow" android:duration="2000" />
  <item android:drawable="@drawable/green" android:duration="2000" />
  <item android:drawable="@drawable/red2" android:duration="2000" />
 <item android:drawable="@drawable/yello"android:duration="2000"/>
  
</animation-list>

Here the png images glows for 2000 mill seconds and then changes automatically as in the TRAFFIC LIGHT.

Next,res/layout:

LAYOUT.XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:orientation="vertical">

    <ImageView 
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/trafficlights" />

</LinearLayout>


Next move on the src folder where the Main_Activity java file exists.

package com.sai.traffic;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.view.Menu;
import android.widget.ImageView;

public class MainActivity extends Activity {
AnimationDrawable lightsAnimation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView lights = (ImageView)findViewById(R.id.iv);-->USING R.ID
lightsAnimation= (AnimationDrawable)lights.getDrawable();--->USING get()
}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
// TODO Auto-generated method stub
super.onWindowFocusChanged(hasFocus);>
                 //oncreate()method which keeps the particular window focused//
lightsAnimation.start(); ----->Animation begins
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

Thus Android Animation has been made easily.

https://drive.google.com/folderview?id=0B2IcKyXPw18dbGRiMVlrZWt5M2c&usp=sharing

2 comments: