Pro tip: Compare all nine Android interpolators firsthand.
I wrote an article in November 2013 on using Android's bounce interpolator. Since then, I have received several emails asking about the other eight interpolators supported by Android's SDK. Rather than going through them one at a time, I thought it would be handy just to write an app that allowed a user to play with them all.
This quick project allows you to compare the various interpolators provided by Android firsthand. You can follow along, or download and import the entire project directly into Eclipse.
1. Create a new Android project in Eclipse. Target SDK 14 (ICS) or better.
2. In the /res/values folder, hardcode an array in the string.xml file.
strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">FunWithText</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello World</string> <string name="prompt">Pick One</string> <string-array name="interpolators"> <item>AccelerateDecelerateInterpolator</item> <item>AccelerateInterpolator</item> <item>AnticipateInterpolator</item> <item>AnticipateOvershootInterpolator</item> <item>BounceInterpolator</item> <item>DecelerateInterpolator</item> <item>LinearInterpolator</item> <item>OvershootInterpolator</item> </string-array> </resources>
3. Our layout will consist of a Text View and a Spinner. Find the /res/layout/activity_main.xml file and make the following modifications.
activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textSize="30sp" android:textStyle="bold" android:visibility="invisible" android:text="@string/hello_world" /> <Spinner android:id="@+id/spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:entries="@array/interpolators" android:prompt="@string/prompt" /> </RelativeLayout>
4. We will need to code up our /src/MainAcitvity.java file. Here I am wiring up an OnItemSelected listener to our spinner widget, and using a bit of reflection to create the correct interpolator. I know some Java purists will be quick to point out that Class.forName().newInstance() is not the recommended way to load a class via reflection; however, it is very convenient for the context of what I am doing here, and realistically a production application would be choosing just one or maybe a few concrete implementations of very specific interpolators.
MainActivity.java package com.authorwjf.funwithtext; import android.os.Bundle; import android.view.Display; import android.view.View; import android.view.animation.Interpolator; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.Spinner; import android.widget.TextView; import android.app.Activity; import android.graphics.Point; public class MainActivity extends Activity implements OnItemSelectedListener { private static final long DELAY = 1000; private static final long DURATION = 500; private static final String PACKAGE = "android.view.animation."; private TextView mTextView1; private float getScreenHeight() { Display display = getWindowManager().getDefaultDisplay(); Point size = new Point(); display.getSize(size); return (float) size.y; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTextView1 = (TextView) findViewById(R.id.text_view); ((Spinner)findViewById(R.id.spinner)).setOnItemSelectedListener(this); } @Override public void onItemSelected(AdapterView<?> parent, View view, int pos,long id) { String interpolatorName = (String) parent.getAdapter().getItem(pos); mTextView1.setTranslationY(getScreenHeight()); mTextView1.setVisibility(View.VISIBLE); try { Interpolator interpolator = (Interpolator) Class.forName(PACKAGE+interpolatorName).newInstance(); mTextView1.animate() .setInterpolator(interpolator) .setDuration(DURATION) .setStartDelay(DELAY) .translationYBy(-getScreenHeight()) .start(); } catch (Exception e) { e.printStackTrace(); } } @Override public void onNothingSelected(AdapterView<?> arg0) { // TODO Auto-generated method stub } } Ready to see some view animations in action? Run the app (preferably on a device) and select an interpolator from the drop-down. Each time you do, the "hello world" text will drop out of sight and then animate back into the view. You may need to slow the animation duration down to get a good idea of the differences between some of the more subtle animations.
I encourage you to sprinkle view animations throughout your app when possible. I find view animations are very useful for pointing out touchable areas on the screen, as well as smoothing over the lag when I'm performing background computations.
Source: www.bing.com
Images credited to www.bing.com and www.nikonian.com.my
