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.