Warning: Creating default object from empty value in /home/agilemed/aendeavors.com/wp-includes/ms-load.php on line 138

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/agilemed/aendeavors.com/wp-includes/ms-load.php:138) in /home/agilemed/aendeavors.com/wp-content/plugins/amazon-product-in-a-post-plugin/amazon-product-in-a-post.php on line 102

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/agilemed/aendeavors.com/wp-includes/ms-load.php:138) in /home/agilemed/aendeavors.com/wp-content/plugins/amazon-product-in-a-post-plugin/amazon-product-in-a-post.php on line 102
Android Programming: Basic Animation » Agile Tech




Android Programming: Basic Animation

Saving space is a constant necessity of programming on mobile platforms. While mobile devices are extremely convenient, providing a large amount of computing power in an easy-to-carry size, the screen size can make it difficult to use complex applications. One benefit of both the iPhone/iPod and the Android platforms is the ability to use animations and views to provide additional screen real estate. On the Android platform, the easiest way to do this is by using the ViewFlipper widget. This is the method we use in our AgileMedCalc application to provide equation information along with the calculators.

To use this approach, the ViewFlipper widget is added similar to a layout in the application’s XML view. Each widget or layout within the ViewFlipper will be rotated through when the showNext() property is called by the application. Because of this, if you want to have more than one widget within a single view, you will need to have additional layouts added:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   3:     android:orientation="vertical"
   4:     android:layout_width="fill_parent"
   5:     android:layout_height="fill_parent">
   6:     <ViewFlipper
   7:         android:id="@+id/flipper"
   8:         android:layout_width="fill_parent"
   9:         android:layout_height="fill_parent">
  10:         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  11:             android:orientation="vertical"
  12:             android:layout_width="fill_parent"
  13:             android:layout_height="fill_parent">
  14:             <TextView
  15:                 android:id="@+id/albuminLbl"
  16:                 android:layout_width="wrap_content"
  17:                 android:layout_height="wrap_content"
  18:                 android:text="nAlbumin (g/dL):"
  19:                 android:gravity="center_vertical" />
  20:             <EditText
  21:                 android:id="@+id/albumin"
  22:                 android:layout_width="fill_parent"
  23:                 android:layout_height="wrap_content"
  24:                 android:singleLine="true"
  25:                 android:layout_toRightOf="@+id/albuminLbl" />
  26:             <ImageView
  27:                 android:id="@+id/viewInfo"
  28:                 android:layout_width="wrap_content"
  29:                 android:layout_height="wrap_content"
  30:                 android:src="@drawable/questionicon"
  31:                 android:layout_below="@+id/calc"
  32:                 android:layout_alignParentRight="true" />
  33:         </RelativeLayout>
  34:         <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  35:             android:orientation="vertical"
  36:             android:layout_width="fill_parent"
  37:             android:layout_height="fill_parent">
  38:             <TextView
  39:                 android:id="@+id/calcInfo"
  40:                 android:layout_width="fill_parent"
  41:                 android:layout_height="wrap_content"
  42:                 android:text="Corrected Calcium = Measured Calcium + (0.8 * (Normal Albumin - Measured Albumin))nNormal Albumin = 4.0" />
  43:             <ImageView
  44:                 android:id="@+id/done"
  45:                 android:layout_width="wrap_content"
  46:                 android:layout_height="wrap_content"
  47:                 android:src="@drawable/backicon"
  48:                 android:layout_below="@+id/calcInfo"
  49:                 android:layout_alignParentRight="true" />
  50:         </RelativeLayout>
  51:     </ViewFlipper>
  52: </RelativeLayout>

In the above code, our ViewFlipper has 2 RelativeLayouts. This allows us to switch between one layout or the other, thereby switching the entire layout’s contents with very little code. In our Java class, we add the following code to bind to our buttons (or in our case, an ImageView):

   1: private void setFlipper(){
   2:     ViewFlipper infoFlipper = (ViewFlipper)findViewById(R.id.flipper);
   3:     infoFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
   4:     infoFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
   6:     final ImageView info = (ImageView)findViewById(R.id.viewInfo);
   7:     info.setOnClickListener(new View.OnClickListener() {
   8:         public void onClick(View v)
   9:         {
  10:             infoFlipper.showNext();
  11:         }
  12:     });
  13:     final ImageView done = (ImageView)findViewById(R.id.done);
  14:     done.setOnClickListener(new View.OnClickListener() {
  15:         public void onClick(View v)
  16:         {
  17:             infoFlipper.showNext();
  18:         }
  19:     });
  20: }

After adding our ViewFlipper object, we set a couple of animations on when the view moves in or out (we’ll talk more about this in a second). In addition, we set our onClickListeners to show the next view with infoFlipper.showNext(). This way, when a user clicks the icon, it will slide out the calculator and slide in the equation info.

This can be done either with or without fancy animations. Several animations are included with the Android SDK (SDKpathsamplesApiDemosresanim). To use these, simply copy the animation from the SDK path into your application by creating the resanim folder and pasting the animation file. Once this is done, you can access the animation like any other resource (such as R.anim.push_left_in). The details in these files can be customized to your liking to add different effects to the animation.

While the above examples are more complicated than doing a single view, it is much easier and saves a lot of typing when compared to making several different intents to display the same information. It also makes the applications look “shiny” which makes the GUI a little more friendly.

Leave a Reply

Your email address will not be published.


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>