Android Button Animation Example

Button Animation in Android

Here Below Example shows Animate Button in Android

1. translate
2. alpha
3. scale
4. rotate
5. complex

Example :

First Create Below Animation files and place in (res/anim folder)

For Translate Animation(anim_translate.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="500"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
</set>

For Alpha Animation(anim_alpha.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="500"
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>

For Scale Animation(anim_scale.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:fromXScale="1.0"
        android:toXScale="3.0"
        android:fromYScale="1.0"
        android:toYScale="3.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="500"
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>


For Rotate Animation(anim_rotate.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator" >

    <rotate
        android:duration="500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:toDegrees="360" />

</set>

For Complex Animation

Merge all above 4 animations

Android UI Layout(main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <Button
            android:id="@+id/translate"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:text="Translate"
           />

        <Button
            android:id="@+id/alpha"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:text="Alpha"
           />

        <Button
            android:id="@+id/scale"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:text="Scale"
           />

        <Button
            android:id="@+id/rotate"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:text="Rotate"
           />

        <Button
            android:id="@+id/complex"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="3dp"
            android:text="Complex"
           />
    </LinearLayout>

</RelativeLayout>

Android Activity Class(AndroidAnimButtonsActivity.java)

package com.androidsurya.androidbuttonanimation;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.widget.Button;

public class AndroidButtonAnimation extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final Animation animTranslate = AnimationUtils.loadAnimation(this,
R.anim.anim_translate);
final Animation animAlpha = AnimationUtils.loadAnimation(this,
R.anim.anim_alpha);
final Animation animScale = AnimationUtils.loadAnimation(this,
R.anim.anim_scale);
final Animation animRotate = AnimationUtils.loadAnimation(this,
R.anim.anim_rotate);

Button btnTranslate = (Button) findViewById(R.id.translate);
Button btnAlpha = (Button) findViewById(R.id.alpha);
Button btnScale = (Button) findViewById(R.id.scale);
Button btnRotate = (Button) findViewById(R.id.rotate);
Button btnComplex = (Button) findViewById(R.id.complex);
btnTranslate.setOnClickListener(new Button.OnClickListener() {

@Override
public void onClick(View view) {
view.startAnimation(animTranslate);
}
});

btnAlpha.setOnClickListener(new Button.OnClickListener() {

@Override
public void onClick(View view) {
view.startAnimation(animAlpha);
}
});

btnScale.setOnClickListener(new Button.OnClickListener() {

@Override
public void onClick(View view) {
view.startAnimation(animScale);
}
});

btnRotate.setOnClickListener(new Button.OnClickListener() {

@Override
public void onClick(View view) {
view.startAnimation(animRotate);
}
});
btnComplex.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View view) {
AnimationSet sets = new AnimationSet(false);
sets.addAnimation(animAlpha);
sets.addAnimation(animScale);
sets.addAnimation(animRotate);
view.startAnimation(sets);
}
});
}
}

Register Android Activity in Android Manifest File

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name="com.androidsurya.androidbuttonanimation.AndroidButtonAnimation"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

Output Screen Shot:

Custom ListView with Image and Text in Android

Listview is nothing but a A view that shows items in a vertically scrolling list.
Here we will see how to show android custom listview(with image and text)

UI layout(activity_main.xml)

activity_main.xml file contains listview object which is used to display listview

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/banner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Select your Favorite Social Network"
        android:textSize="15sp" />

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/banner" >
    </ListView>

</RelativeLayout>

(listview_row.xml)

Here (listview_row.xml) layout for ListView rows in a XML file and keep it in res/layout folder.
provides data to each row in ListView.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/icon_id"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" />

    <TextView
        android:id="@+id/title_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon_id"
        android:paddingBottom="10dp"
        android:text="Title"
        android:textColor="#3399FF"
        android:textSize="14dp" />

    <TextView
        android:id="@+id/description_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title_id"
        android:layout_toRightOf="@+id/icon_id"
        android:paddingLeft="10dp"
        android:text="Description"
        android:textColor="#CC0033"
        android:textSize="12dp" />

</RelativeLayout>

Row.java

This class is usefull to store the data for each row in ListView.

package com.androidsurya.androidcustomlistview;

public class Row {
private int imageId;
private String title;
private String desc;

public Row(int imageId, String title, String desc) {
this.imageId = imageId;
this.title = title;
this.desc = desc;
}

public int getImageId() {
return imageId;
}

public void setImageId(int imageId) {
this.imageId = imageId;
}

public String getDesc() {
return desc;
}

public void setDesc(String desc) {
this.desc = desc;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

@Override
public String toString() {
return title + "\n" + desc;
}
}

Android Activity class(CustomListView.java)

package com.androidsurya.androidcustomlistview;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.view.Gravity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class CustomListView extends Activity implements OnItemClickListener {
public static final String[] titles = new String[] { "Facebook",
"Google +", "Orkut", "Twitter" };

public static final String[] descriptions = new String[] {
"Facebook is an online social networking service",
"Google + is an online social networking service",
"Orkut is an online social networking service",
"Twitter is an online social networking service" };

public static final Integer[] images = { R.drawable.facebook,
R.drawable.googleplus, R.drawable.orkut, R.drawable.twitter };

ListView listView;
List<Row> rowItems;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rowItems = new ArrayList<Row>();
for (int i = 0; i < titles.length; i++) {
Row item = new Row(images[i], titles[i], descriptions[i]);
rowItems.add(item);
}

listView = (ListView) findViewById(R.id.listView);
CustomBaseAdapter adapter = new CustomBaseAdapter(this, rowItems);
listView.setAdapter(adapter);
listView.setOnItemClickListener(this);
}

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

@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
// TODO Auto-generated method stub
Toast toast = Toast.makeText(getApplicationContext(), "Item Selected.."
+ (position + 1) + ": " + rowItems.get(position),
Toast.LENGTH_LONG);
toast.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0);
toast.show();
}

}

CustomBaseAdapter.java

CustomBaseAdapter is a Class which implements BaseAdapater 
BaseAdapater is job is display data to each row in ListView.

package com.androidsurya.androidcustomlistview;

import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomBaseAdapter extends BaseAdapter {
Context context;
List<Row> rowItems;

public CustomBaseAdapter(Context context, List<Row> items) {
this.context = context;
this.rowItems = items;
}

/* private view holder class */
private class ViewHolder {
ImageView iconView;
TextView txtTitle;
TextView txtDesc;
}

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;

LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = mInflater.inflate(R.layout.listview_row, null);
holder = new ViewHolder();
holder.txtDesc = (TextView) convertView
.findViewById(R.id.description_id);
holder.txtTitle = (TextView) convertView
.findViewById(R.id.title_id);
holder.iconView = (ImageView) convertView
.findViewById(R.id.icon_id);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}

Row rowItem = (Row) getItem(position);
holder.txtDesc.setText(rowItem.getDesc());
holder.txtTitle.setText(rowItem.getTitle());
holder.iconView.setImageResource(rowItem.getImageId());

return convertView;
}

@Override
public int getCount() {
return rowItems.size();
}

@Override
public Object getItem(int position) {
return rowItems.get(position);
}

@Override
public long getItemId(int position) {
return rowItems.indexOf(getItem(position));
}
}

Register Android Activity in AndroidManifest.xml file

 <activity
            android:name="com.androidsurya.androidcustomlistview.CustomListView"
            android:label="@string/app_name" >

Output Screenshot

Android Image Animation Example

Here Below Example shows Animate Images in Android

1. translate
2. alpha
3. scale
4. rotate
5. complex

Example :

First Create Below Animation files and place in (res/anim folder)

For Translate Animation(anim_translate.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="500"
        android:repeatCount="1"
        android:repeatMode="reverse"/>
</set>

For Alpha Animation(anim_alpha.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="500"
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>

For Scale Animation(anim_scale.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:fromXScale="1.0"
        android:toXScale="3.0"
        android:fromYScale="1.0"
        android:toYScale="3.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="500"
        android:repeatCount="1"
        android:repeatMode="reverse" />
</set>


For Rotate Animation(anim_rotate.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator" >

    <rotate
        android:duration="500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:toDegrees="360" />

</set>

For Complex Animation

Merge all above 4 animations

Android UI Layout(main.xml)

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <ImageView

        android:id="@+id/animatedImage"

        android:layout_width="160dp"

        android:layout_height="160dp"

        android:layout_centerInParent="true"

        android:src="@drawable/androidman" />

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:orientation="horizontal" >

        <Button

            android:id="@+id/translate"

            android:layout_width="60dp"

            android:layout_height="wrap_content"

            android:layout_margin="3dp"

            android:text="Translate"

            android:textSize="7dp" />

        <Button

            android:id="@+id/alpha"

            android:layout_width="60dp"

            android:layout_height="wrap_content"

            android:layout_margin="3dp"

            android:text="Alpha"

            android:textSize="7dp" />

        <Button

            android:id="@+id/scale"

            android:layout_width="60dp"

            android:layout_height="wrap_content"

            android:layout_margin="3dp"

            android:text="Scale"

            android:textSize="7dp" />

        <Button

            android:id="@+id/rotate"

            android:layout_width="60dp"

            android:layout_height="wrap_content"

            android:layout_margin="3dp"

            android:text="Rotate"

            android:textSize="7dp" />

        <Button

            android:id="@+id/complex"

            android:layout_width="60dp"

            android:layout_height="wrap_content"

            android:layout_margin="3dp"

            android:text="Complex"

            android:textSize="7dp" />

    </LinearLayout>

</RelativeLayout>

Android Activity Class(AndroidAnimButtonsActivity.java)

package com.androidsurya.AndroidImageAnimation;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationSet;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

public class AndroidAnimButtonsActivity extends Activity {

ImageView imageView;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

imageView = (ImageView) findViewById(R.id.animatedImage);

final Animation animTranslate = AnimationUtils.loadAnimation(this,

R.anim.anim_translate);

final Animation animAlpha = AnimationUtils.loadAnimation(this,

R.anim.anim_alpha);

final Animation animScale = AnimationUtils.loadAnimation(this,

R.anim.anim_scale);

final Animation animRotate = AnimationUtils.loadAnimation(this,

R.anim.anim_rotate);

Button btnTranslate = (Button) findViewById(R.id.translate);

Button btnAlpha = (Button) findViewById(R.id.alpha);

Button btnScale = (Button) findViewById(R.id.scale);

Button btnRotate = (Button) findViewById(R.id.rotate);

Button btnComplex = (Button) findViewById(R.id.complex);

btnTranslate.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View view) {

imageView.startAnimation(animTranslate);

}

});

btnAlpha.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View view) {

imageView.startAnimation(animAlpha);

}

});

btnScale.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View view) {

imageView.startAnimation(animScale);

}

});

btnRotate.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View view) {

imageView.startAnimation(animRotate);

}

});

btnComplex.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View view) {

AnimationSet sets = new AnimationSet(false);

sets.addAnimation(animAlpha);

sets.addAnimation(animScale);

sets.addAnimation(animRotate);

imageView.startAnimation(sets);

}

});

}

}

Register Android Activity in Android Manifest File

     <activity

            android:name="com.androidsurya.AndroidImageAnimation.AndroidAnimButtonsActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

Output Screen Shot:

SQLiteManager plugin for eclipse - Android

In Eclipse IDE You can see the sqlite database(.db file) in eclipse by opening File Explorer.

Steps to open File Explorer.

Window/Show View/File Explorer

Screenshot










Then to  /data/data/package_name/databases folder

But here we cannot see the tables and table data.

For viewing the table details in Eclipse,you have to include a one plugin to your Eclipse IDE .

Plug in Process

first you can download the jar from below.

Download the jar from the sqlite manager from here. Click Here

Now Place the jar in the folder Eclipse plugins folder (e.g. /usr/lib/eclipse/plugins)

Now Restart the eclipse and now you can see the SqLiteManger plugin on the top right of the File Explorer window.

Screenshot




By clicking the SqLiteManger icon, SqLiteManger Window comes and here we can see the table structure and table data.

Screenshot



NOTE: You can see Database file if the Database file extension should be .db