Animated elements…

They’re fun, beautiful, and hold a power of persuasion that all static UI elements wish they could have.

Now for any beginner, building animations that make on-screen objects animate seem like as complex as rocket science, except that it’s not.

In fact, it’s possible to add different animations using Android view animations.

Android View Animation

Android view animation is the basic animation in the Android system. It allows developers to perform tween animation on view objects easily. Furthermore, an Android view animation can perform a series of simple transformations sequentially as well as simultaneously.

With Android view animation, you can make animation on view objects such as button objects, ImageView, or TextView.

Today, we’ll see how to use Android view animations to make animation on view objects.

Let’s Get Started

Create a new project “Android View Animations”

Select Target android device.

Add an activity to mobile -> Select Empty Activity.

Customize the Activity.

Create Java class name “EffectAdapter”

package com.androidviewanimations;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.androidviewanimations.library.Techniques;

public class EffectAdapter extends BaseAdapter {

private Context mContext;

public EffectAdapter(Context context) {
mContext = context;
}

@Override
public int getCount() {
return Techniques.values().length;
}

@Override
public Object getItem(int position) {
return Techniques.values()[position].getAnimator();
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
if (convertView == null)
convertView = LayoutInflater.from(mContext).inflate(R.layout.item, null, false);

TextView t = (TextView) convertView.findViewById(R.id.list_item_text);
Object obj = getItem(position);
int start = obj.getClass().getName().lastIndexOf(".") + 1;
String name = obj.getClass().getName().substring(start);
t.setText(name);
convertView.setTag(Techniques.values()[position]);
return convertView;
}
}

Add “easing” and “library” into project as library from here.

MainActivity

package com.androidviewanimations;

import android.animation.Animator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.androidviewanimations.library.Animo;
import com.androidviewanimations.library.Techniques;

public class MainActivity extends Activity {

private ListView mListView;
private EffectAdapter mAdapter;
private TextView textView;
private Animo.AnimString rope;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mListView = (ListView) findViewById(R.id.list_items);
textView = (TextView) findViewById(R.id.textView);

mAdapter = new EffectAdapter(this);
mListView.setAdapter(mAdapter);

mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if (rope != null) {
rope.stop(true);
}
Techniques technique = (Techniques) view.getTag();
rope = Animo.with(technique)
.duration(1200)
.repeat(Animo.INFINITE)
.pivot(Animo.CENTER_PIVOT, Animo.CENTER_PIVOT)
.interpolate(new AccelerateDecelerateInterpolator())
.withListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {

}

@Override
public void onAnimationEnd(Animator animation) {

}

@Override
public void onAnimationCancel(Animator animation) {
Toast.makeText(MainActivity.this, "canceled previous animation", Toast.LENGTH_SHORT).show();
}

@Override
public void onAnimationRepeat(Animator animation) {

}
})
.playOn(textView);
}
});
findViewById(R.id.textView).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (rope != null) {
rope.stop(true);
}
}
});
}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
if (hasFocus) {
rope = Animo.with(Techniques.FadeIn).duration(1000).playOn(textView);// after start,just click mTarget view, rope is not init
}
}
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="15dp"
android:text="@string/app_name"
android:textSize="24sp"/>

<ListView
android:id="@+id/list_items"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>

layout_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list_item_text"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="left|center_vertical"
android:padding="10dp"
android:textColor="@android:color/black"
android:textSize="16sp"/>

And done!

And done!

Once you successfully implement this code, you can easily make animations on view objects. Though, if you’d like to get to more advanced level, or make your Android application with advanced animations, you may hire Android app development company to add animations on view object.

Download a copy of Android animation example from Github.