Animation Examples

Adding Animation will improve your app's quality and look and feel.Animations are especially useful when the screen changes state, such as when content loads or new actions become available. This tutorial shows you how to implement some common types of animations that can increase usability.

Fade-In Animation

Create an XML that defines Animation
              
Create a folder naming anim under res folder. Add your xml file  defining your animation(fade_in.xml) in this folder.
res --> anim --> fade_in.xml

Main Activity.java


package com.example.animation;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class FadeInActivity extends Activity implements AnimationListener {

ImageView animated_Img;
Button btnStart;

// Animation
Animation animFadein;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fadein);

animated_Img = (ImageView) findViewById(R.id.imgView);

btnStart = (Button) findViewById(R.id.btnStart);

// load the animation
animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);

// set animation listener
animFadein.setAnimationListener(this);

// button click event
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animated_Img.setVisibility(View.VISIBLE);

// start the animation
animated_Img.startAnimation(animFadein);
}
});

}

@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation

// check for fade in animation
if (animation == animFadein) {
Toast.makeText(getApplicationContext(), "Animation Stopped",
Toast.LENGTH_SHORT).show();
}

}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub

}

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub

}

}

fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />


</set>

Output

             

Below given are xml files of Other common animations like fade out, rotate, blink, bounce, flip, move, slide up, slide down.

fade_out.xml

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

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

    android:fillAfter="true" >

    <alpha

        android:duration="1000"

        android:fromAlpha="1.0"

        android:interpolator="@android:anim/accelerate_interpolator"

        android:toAlpha="0.0" />

</set>

rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="600"
        android:repeatMode="restart"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/cycle_interpolator"/>


</set>

blink.xml

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

</set>

bounce.xml

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

    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />


</set>

flip.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/linear_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotY="100%"
        android:fillAfter="false"
        android:duration="200" />
    <translate
        android:fromYDelta="1.0"
        android:toYDelta="100%"
        android:duration="300"/>

</set>

move.xml

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

   <translate
        android:fromXDelta="0%p"
        android:toXDelta="75%p"
        android:duration="800" />

</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="0.0" />


</set>

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />


</set>

Read More

Android Text to Speech Example

In this tutorial we are going to implement text to speech in the android application. One of the special feature of android is speech accessibility to speak different language.

User needs to enter a text and press the button to hear it.

File : res/layout/activity_text_to_speech.xml

<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=".Text_to_speechActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Enter the text to speech"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="26dp"
        android:ems="12" />

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@+id/editText1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="67dp"
        android:src="@drawable/speak" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageButton1"
        android:layout_centerHorizontal="true"
        android:text="Speak"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textStyle="bold" />


</RelativeLayout>


File : Text_to_speechActivity.java

package com.mindmedia.text_to_speech;

import java.util.Locale;
import android.app.Activity;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.util.Log;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;

public class Text_to_speechActivity extends Activity implements
TextToSpeech.OnInitListener {
/** Called when the activity is first created. */

private TextToSpeech speech;
private ImageButton speak;
private EditText comment;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_to_speech);

speech = new TextToSpeech(this, this);
speak = (ImageButton) findViewById(R.id.imageButton1);
comment = (EditText) findViewById(R.id.editText1);

// button on click event
speak.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
speak();
}
});
}

@Override
public void onDestroy() {
// Don’t forget to shutdown tts!
if (speech != null) {
speech.stop();
speech.shutdown();
}
super.onDestroy();
}

@Override
public void onInit(int status)
{
if (status == TextToSpeech.SUCCESS)
{
int result = speech.setLanguage(Locale.US);
if (result == TextToSpeech.LANG_MISSING_DATA
|| result == TextToSpeech.LANG_NOT_SUPPORTED) {
Log.e("TTS", "This Language is not supported");
}
else
{
speak.setEnabled(true);
speak();
}
}
else
{
Log.e("TTS", "Initilization Failed!");
}
}

private void speak() {
String text = comment.getText().toString();
speech.speak(text, TextToSpeech.QUEUE_FLUSH, null);
}
}


Note : import android.speech.tts.TextToSpeech is used for speak capability 

Output :

Read More

Image GridView

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.

In this tutorial, we show you how to create an image Gridview.

Copy some images into your project's drawable folder.

File : res/layout/activity_gridview.xml

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

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

    android:id="@+id/gridview"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:columnWidth="120dip"

    android:gravity="center"

    android:horizontalSpacing="2dp"

    android:numColumns="3"

    android:padding="10dp"

    android:stretchMode="columnWidth"

    android:verticalSpacing="2dp" >

</GridView>

File : Gridview_Activity.java

package com.mindmedia.gridview;

import android.os.Bundle;

import android.app.Activity;

import android.content.Context;

import android.view.Menu;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

public class Gridview_Activity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_gridview);

GridView gridView = (GridView) findViewById(R.id.gridview);

// Instance of ImageAdapter Class

gridView.setAdapter(new ImageAdapter(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_gridview, menu);

return true;

}

public class ImageAdapter extends BaseAdapter {

private Context mContext;

// Keep all Images in array

public Integer[] mThumbIds = { R.drawable.pic1, R.drawable.pic2,

R.drawable.pic3, R.drawable.pic4, R.drawable.pic6,

R.drawable.pic7, R.drawable.pic8, R.drawable.pic9,

R.drawable.pic10, R.drawable.pic11, R.drawable.pic12,

R.drawable.pic13 };

// Constructor

public ImageAdapter(Context c) {

mContext = c;

}

@Override

public int getCount() {

return mThumbIds.length;

}

@Override

public Object getItem(int position) {

return mThumbIds[position];

}

@Override

public long getItemId(int position) {

return 0;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView = new ImageView(mContext);

imageView.setImageResource(mThumbIds[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(new GridView.LayoutParams(160, 160));

return imageView;

}

}

}

Output : 

Read More

Spinner View ( Drop down list )

Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.

In Android, you can use “android.widget.Spinner” class to render a dropdown box selection list.

In this tutorial we show you how to do the following tasks :

1. Render a Spinner in XML, and load the selection items via XML file also.
2. Render another Spinner in XML, and load the selection items via code dynamically.
3. Attach a listener on Spinner, fire when user select a value in Spinner.
4. Render and attach a listener on a normal button, fire when user click on it, and it will display selected value of Spinner.

File : res/values/strings.xml

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

<resources>

    <string name="app_name">Spinner Drop down list</string>

    <string name="hello_world">Hello world!</string>

    <string name="menu_settings">Settings</string>

    

    <string name="versions_prompt">Choose a Version</string>

    <string-array name="versions_arrays">

        <item>Cupcake</item>

        <item>Donut</item>

        <item>Eclairs</item>

        <item>Froyo</item>

        <item>Gingerbread</item>

        <item>Honeybee</item>

        <item>Icecream sandwich</item>

        <item>Jellybean</item>

        <item>Kitkat</item>

    </string-array>

</resources>

File : res/layout/activity_spinner.xml

<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"

    android:padding="20dp"

    tools:context=".SpinnerActivity" >

    <Spinner

        android:id="@+id/spinner1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:entries="@array/versions_arrays"

        android:prompt="@string/versions_prompt" />

    <Spinner

        android:id="@+id/spinner2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/spinner1"

        android:layout_below="@+id/spinner1"

        android:layout_marginTop="20dp" />

    <Button

        android:id="@+id/btnSubmit"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/spinner2"

        android:layout_below="@+id/spinner2"

        android:layout_marginTop="20dp"

        android:text="Submit" />

</RelativeLayout>

File : SpinnerActivity.java

package com.mindmedia.spinner;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemSelectedListener;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.Spinner;

import android.widget.Toast;

public class SpinnerActivity extends Activity {

private Spinner spinner1, spinner2;

private Button btnSubmit;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_spinner);

addItemsOnSpinner2();

addListenerOnButton();

addListenerOnSpinnerItemSelection();

}

// add items into spinner dynamically

public void addItemsOnSpinner2() {

spinner2 = (Spinner) findViewById(R.id.spinner2);

List<String> list = new ArrayList<String>();

list.add("Android");

list.add("Iphone");

list.add("Blackberry");

list.add("Windows");

ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,

android.R.layout.simple_spinner_item, list);

dataAdapter

.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

spinner2.setAdapter(dataAdapter);

}

public void addListenerOnSpinnerItemSelection() {

spinner1 = (Spinner) findViewById(R.id.spinner1);

spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener());

}

// get the selected dropdown list value

public void addListenerOnButton() {

spinner1 = (Spinner) findViewById(R.id.spinner1);

spinner2 = (Spinner) findViewById(R.id.spinner2);

btnSubmit = (Button) findViewById(R.id.btnSubmit);

btnSubmit.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(

SpinnerActivity.this,

"Spinner 1 : "

+ String.valueOf(spinner1.getSelectedItem())

+ "\nSpinner 2 : "

+ String.valueOf(spinner2.getSelectedItem()),

Toast.LENGTH_SHORT).show();

}

});

}

public class CustomOnItemSelectedListener implements OnItemSelectedListener {

public void onItemSelected(AdapterView<?> parent, View view, int pos,

long id) {

Toast.makeText(parent.getContext(),

"Version : " + parent.getItemAtPosition(pos).toString(),

Toast.LENGTH_SHORT).show();

}

@Override

public void onNothingSelected(AdapterView<?> arg0) {

// TODO Auto-generated method stub

}

}

}

Output :

Read More