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 that draws a rectangle and an arc:

package org.pollett.graphicstest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.content.Context;
import android.view.View;
import android.graphics.*;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.ArcShape;


public class GraphicsTest extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //notice we are not using a layout!! We roll our own view.
        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);
	    	
	    }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.graphics_test, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

GraphicsTestView Screenshot

I apologize for the hideous color choice for the arc.

Quiz

Which of the following is true?

NSData's dataWithContentsOfURL method can be used to do a query of a REST Web service and get the results back.
An XMLHttpRequest can be used for full duplex communication.
In Android, to handle list item click events we implement the OnListClickListener interface's onListItemClick method.

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="50dp"
    android:src="@drawable/shape_1"
    />

<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:src="@drawable/line"
    />
    
<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:src="@drawable/shape_2"
    />
    
<ImageView 
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    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.
Since someone asked last day, recall px == one pixel, dp == device independent pixel (used to be called dip in old versions of Android), sp == scale independent pixel (used with fonts so will appear same physical size across devices).

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 com.example.graphicstest3;

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

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import android.graphics.drawable.AnimationDrawable;
import android.util.Log;
import android.widget.ImageView;


public class GraphicsTest3 extends ActionBarActivity {

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

      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();
      }
   }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.graphics_test3, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

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;
	    }
    }
    
}

Android Graphics

Outline