Basic Graphics Android

We start our discussion of graphics in Android by looking at how to draw 2D shapes.
The android.graphics package is what we'll use to do this.
This package supports such things as bitmaps, canvases, drawing primitives, and paint facilities.

Here is a simple example from the book that draws a rectangle and an arc:

package org.pollett;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.graphics.*;
import android.graphics.drawable.ShapeDrawable;

public class GraphicsTest extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new GraphicsTestView(this));
    }
    
    
    private static class GraphicsTestView extends View
    {
    	private ShapeDrawable mDrawable =
    		new ShapeDrawable();
        /* Drawable's are objects which can be drawn on a Canvas
           ShapeDrawable is used to draw primitive shapes such as:
           ArcShape, OvalShape, PathShape, RectShape, RoundRectShape
           A Canvas is the object provided by Android on which
           a view tries to draw itself. In addition to ShapeDrawable,
           there are other subclasses of Drawable like PictureDrawable,
           RotateDrawable, ScaleDrawable, ClipDrawable,GradientDrawable, etc
           Some of these we will see when we consider the XML approach to
           graphics 
         */
    	
    	public GraphicsTestView (Context context) 
    	{
    	   super(context);
    	   setFocusable(true);
    	   this.mDrawable.getPaint().setColor(0xFFFF0000); 
               //argb where a is alpha (transparency)
    	}

	    @Override
	    protected void onDraw(Canvas canvas)
	    /* the onDraw method is where a view draws itself
               this is our first time overriding it.
             */
	    {
	    	int x = 10;
	    	int y = 10;
	    	int width = 300;
	    	int height = 50;
	    	this.mDrawable.setBounds(x, y, x + width, y + height);
	    	this.mDrawable.draw(canvas);
	    	
	    	ArcShape arc = new ArcShape(45,90); //start angle, sweep angle
	    	ShapeDrawable test = new ShapeDrawable(arc);
	    	
	    	Paint p = test.getPaint();
	    	p.setColor(0xFF00FFFF);

	        p.setStyle(Paint.Style.STROKE);

	    	test.setBounds(10, 70, 310, 370); 
                //Top-Left, Bottom Right of rectangle to draw into
	    	test.draw(canvas);
	    	
	    }
    }
}

GraphicsTestView Screenshot

Drawing with XML

In the last example, we dynamically created the GraphicsTestView in our activity's onCreate methods.
Another way to create 2D Graphics is to draw using XML.
There are two steps to this: (1) We add ImageView's to our programs layout. (2) We create xml file which have our shapes in them.

To start let's create a new layout:

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
<LinearLayout 
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:src="@drawable/shape_1"
    />

<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:src="@drawable/line"
    />
    
<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:src="@drawable/shape_2"
    />
    
<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:src="@drawable/shape_3"
    />    
</LinearLayout>
</ScrollView>

To see that this is actually using a ScrollView copy and paste the shapes above multiple times. Then notice you can scroll up and down through the shapes in the resulting project.

Making Shapes

We next turn to the XML code for a four shapes:

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       type="oval"
     >
     <solid android:color="#00000000" />
     <padding android:left="10sp" 
         android:right="10sp" 
         android:top="4sp"
         android:bottom="4sp"
     />
     <stroke android:width="1dp" android:color="#FFFFFFFF" />     
</shape>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       type="oval"
     >
     <solid android:color="#FF0000FF" />
     <stroke android:width="4dp"
             android:dashWidth="1dp"
             android:dashGap="2dp" 
             android:color="#FFFFFFFF" />     
     
     <padding android:left="7sp" 
         android:right="7sp" 
         android:top="7sp"
         android:bottom="7sp"
     />
     <corners android:radius="4dp" />     
</shape>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       type="oval"
     >
     <gradient android:startColor="#FFFF0000"
               android:endColor="#88FF00FF" 
     />
     
     <padding android:left="7sp" 
         android:right="7sp" 
         android:top="7sp"
         android:bottom="7sp"
     />
     <corners android:radius="8dp" />     
</shape>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       type="oval"
     >
     <solid android:color="#FFFFFFFF" />
 
      <stroke android:width="1dp" android:color="#FFFFFFFF" 
            android:dashWidth="1dp"
             android:dashGap="2dp"      
      />     
    
     <size android:height="23dp" />
 </shape>

Screenshot XML Graphics

Image of a four ovals with different borders

Animation

Animation on Android can be done either via XML or using the Graphics API.
In XML you can create a sequence of drawable resources and have Android display these one after another.
To start you create a file in res/anim to drive the animation my_animation.xml

Then in your layout you could display the animation as an ImageView just as we did in the last example, referring to it as the @+id/my_anim . We will locate this resource in code in a minute.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ImageView  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_centerHorizontal="true"    
    android:id="@+id/my_anim"
    />
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

The content of the animation file look like:

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

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
       id="selected" android:oneshot="false"
     >
    <item android:drawable="@drawable/ball1" android:duration="50" />  
    <item android:drawable="@drawable/ball2" android:duration="50" />
    <item android:drawable="@drawable/ball3" android:duration="50" />  
    <item android:drawable="@drawable/ball4" android:duration="50" />  
    <item android:drawable="@drawable/ball5" android:duration="50" />
    <item android:drawable="@drawable/ball6" android:duration="50" />             
</animation-list>

Driver Class

Here is the class that drives the animation:

package org.pollett;

import java.util.Timer;
import java.util.TimerTask;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;

public class AnimationTest extends Activity {
	@Override
	   public void onCreate (Bundle icicle)
	   {
	      super.onCreate(icicle);
	      setContentView(R.layout.main);
	      ImageView img = (ImageView)findViewById(R.id.my_anim);     
	      img.setBackgroundResource(R.anim.my_animation);
	      MyAnimationRoutine mar = new MyAnimationRoutine();
	      MyAnimationRoutine2 mar2 = new MyAnimationRoutine2();
	      
	      Timer t = new Timer(false);
	      t.schedule(mar, 100);
	      Timer t2 = new Timer(false);
	      t2.schedule(mar2, 5000);
	      
	   }
	   
	   
	   class MyAnimationRoutine extends TimerTask
	   {
	      @Override
	      public void run()
	      {
	    	  Log.i("AnimationTest","hello");
	         ImageView img = (ImageView) findViewById(R.id.my_anim);
	         AnimationDrawable frameAnimation = (AnimationDrawable)
	            img.getBackground();
	         frameAnimation.start();
	      }
	   }
	   
	   class MyAnimationRoutine2 extends TimerTask
	   {
	      @Override
	      public void run()
	      {
	         ImageView img = (ImageView) findViewById(R.id.my_anim);
	         AnimationDrawable frameAnimation = (AnimationDrawable)
	            img.getBackground();
	         frameAnimation.stop();
	      }
	   }
}

Screenshot AnimationTest

A Second Android Animation example

Each Activity in Android has a message queue.
Messages sent to this queue can be handled by using an android.os.Handler
The next piece of code demonstrates using messages together with a thread to make the screen appear like a Battlestar Galactica Cylon.

package org.pollett;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.ArcShape;
import android.graphics.drawable.shapes.OvalShape;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;

public class AnimationTest3 extends Activity {

	protected static final int GUIUPDATEID = 0x1FF;
	AnimRunnable animRunnable;
	GraphicsTestView myGraphicsView;
	
	Handler myGUIUpdateHandler = new Handler() {
		public void handleMessage(Message msg) 
		{			
			switch(msg.what) 
			{
				case AnimationTest3.GUIUPDATEID:
					myGraphicsView.invalidate();
				break;
			}
		}
	};
 
	@Override
    public void onCreate(Bundle savedInstanceState) 
	{
        super.onCreate(savedInstanceState);
        myGraphicsView = new GraphicsTestView(this);
        setContentView(myGraphicsView);
        
        new Thread(new AnimRunnable(this)).start();
    }
    
    private static class AnimRunnable implements Runnable
    {
    	AnimationTest3 myAnimation;
    	public AnimRunnable(AnimationTest3 myAnim)
    	{
    		myAnimation = myAnim;
    	}
		public void run() 
		{
                   while(!Thread.currentThread().isInterrupted()) 
                   {
                      Message message = new Message();
                      message.what = AnimationTest3.GUIUPDATEID;
                      myAnimation.myGUIUpdateHandler.sendMessage(message);

                      try
                      {
                         Thread.sleep(100);
                    
                      } 
                      catch(InterruptedException e)
                      {
                         Thread.currentThread().interrupt();
                      }
                   }
		}
    	
    }
    private static class GraphicsTestView extends View
    {
    	private ShapeDrawable myDrawable;
    	int ovalX;
    	int ovalY;
    	int direction;
    	
    	public GraphicsTestView (Context context) 
    	{
    	   super(context);
    	   setFocusable(true);

	       OvalShape oval = new OvalShape();
	       myDrawable = new ShapeDrawable(oval);
    	   myDrawable.getPaint().setColor(0xFFFF0000);
    	   ovalX = 10;
    	   ovalY = 10;
    	   direction = 5;
    	}
    
	    @Override
	    protected void onDraw(Canvas canvas)
	    // the onDraw method is where a view draws itself
	    {
	    	int width = 50;
	    	int height = 20;
	    	myDrawable.setBounds(ovalX, ovalY, ovalX+ width, ovalY + height);
	
	    	myDrawable.draw(canvas);
	    	if(ovalX < 10 || ovalX > 250) 
	    	{
	    		direction = -direction;
	    	}
	    	ovalX +=direction;
	    }
    }
    
}

Graphics Android

Outline