Android image Transition for Animation

Simple Animation in Android

Basic animation can be achieved in following different ways.

1. Use Transition of images.
2. Frame Animation.
3. Others (Tween Animation & NinePatchDrawable & ShapeDrawable)

Use Transition of images.

This type of animation shows cross-faded animation between the first and second layer. We can provide two different images for the transition & provide interval between their transitions.

Sample:

• Create transition xml.

Store this file with any name in your drawable folder. E.d. splash_animation.xml

<transition xmlns:android="http://schemas.android.com/apk/res/android">   <item android:drawable="@drawable/splash1"></item>   <item android:drawable="@drawable/splash2"></item> </transition>

 

• Create a layout with ImageView that will have this transition.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/widget28"     android:layout_width="fill_parent" android:layout_height="fill_parent"     android:orientation="vertical"     xmlns:android="http://schemas.android.com/apk/res/android">     <ImageView android:id="@+id/splashImgView"         android:layout_width="fill_parent" android:layout_height="fill_parent"         android:background="#ffccccff" android:padding="10px"         android:layout_gravity="center_horizontal">     </ImageView> </LinearLayout>

 

• Write code to fetch transaction and use it in one of the Image View.

public class TransitionAnimationActivity extends Activity {     /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.splashlayout);         // Show A Transitions for Splash image here.         TransitionDrawable transition = (TransitionDrawable) getResources()                 .getDrawable(R.drawable.splash_animation);         //Set interval for the transition between two image.         transition.startTransition(5000);         //Fetch imageView from your layout and apply transition on the same.         ImageView imageView= (ImageView) findViewById(R.id.splashImgView);         imageView.setImageDrawable(transition);     } }

I wish i could take screen shot of that animation but sorry i can’t.

Next time i’ll describe how to achieve FRAME ANIMATION when you have more than one images to be shown.

Taking Screenshots on your Android Phone

A few weeks ago, I dabbled around with trying to write a screenshot application for Android. Turns out that it is not possible due to security. Your screenshot code can only take snap screens that are within the same application. That pretty much sucks. I think it is doable in other way around.

It is possible, however, to take screenshots through the DDMS tool (Dalvik Debug Monitoring Service).

Install the Android SDK.
Enable USB debugging on your phone.
Run ddms from the tools directory of the Android SDK.
Select your phone from the list on the left.
Go to the menu and select Device, then Screen capture.

Create Icon with Text Using GridView and Layout Inflater

How to create Icon With text like home screen, here is my example screen:

To do something like this we need to use GridView and make The Icon with text using the XML layout and then using LayoutInflater to read the XML and put it into the Adapter. Lets begin with the icon.xml(we put it into /res/layout/) that will be the view to show ImageView and Text together.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/widget44" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:layout_x="201px" android:layout_y="165px" android:gravity="center_horizontal"> <ImageView android:id="@+id/icon_image" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageView> <TextView android:id="@+id/icon_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:gravity="center_horizontal" android:textColorHighlight="#656565"> </TextView> </LinearLayout>

Here we put the ImageView and TextView into Linear Layout. In line 7 and 8 we define how big is our icon with layout_x and layout_y. Thats all, this icon.xml file next we will use in the Adapter to fill in our GridView.

Lets go to our GridView XML. I name it main_switch.xml, this locate in /res/layout/.

<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/GridView01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:numColumns="auto_fit" android:columnWidth="60dp" android:stretchMode="columnWidth" android:gravity="center"> </GridView>

n this XML file we define the main layout of our screen, and how will be the grid will be display. This will be load to our main Activity.

Lets go to our Activity Class

 

public class MainSwitch extends Activity{ GridView grid_main; @Override public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.main_switch); grid_main = (GridView)findViewById(R.id.GridView01); grid_main.setAdapter(new ImageAdapter(this)); } public class ImageAdapter extends BaseAdapter{ Context mContext; public static final int ACTIVITY_CREATE = 10; public ImageAdapter(Context c){ mContext = c; } @Override public int getCount() { // TODO Auto-generated method stub return 5; } @Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub View v; if(convertView==null){ LayoutInflater li = getLayoutInflater(); v = li.inflate(R.layout.icon, null); TextView tv = (TextView)v.findViewById(R.id.icon_text); tv.setText("Profile "+position); ImageView iv = (ImageView)v.findViewById(R.id.icon_image); iv.setImageResource(R.drawable.icon); } else { v = convertView; } return v; } } }

Line 4 – line 10 : we overide onCreate() from the Activity class, here we setContentView() to main_switch.xml, get the GridView and then fill it with the ImageAdapter class that extend from BaseAdapter. line 24-41 : we define the view that will display on the grid, we use LayoutInflater to get view from icon.xml file that we already define before. We also can manipulate both ImageView and TextView with what parameter that we want to set, for example we can set the text or change the ImageView Resource, etc. line 18-21 : we set how many icon we want to display. Hope it works for you :)