Lecture 6 - How GUI Works, Custom Views

< CS193A Android Programming

How GUI Works

BasicView Example Code

invalidate() logic, UI Thread Queue

package edu.stanford.nick;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

// Simple example of a view which draws custom pixels.
public class BasicView extends View {

	// paint = color font etc. state for drawing
	private Paint mLinePaint;
	private Paint mTextPaint;
	// our "data model" one number -- we draw this
	private int mCount;
	/** Constructor takes in context (activity).
	 Note that we do one-time setup here (there is no onCreate() for views).
	public BasicView(Context context) {

		// Set up a couple paint objects -- see onDraw().
		mLinePaint = new Paint();
		mLinePaint.setARGB(200, 0, 255, 0);

		mTextPaint = new Paint();

	 The key view method.
	 Sent to the view when it should draw itself to the given canvas.
	 Essentially maps data-model -> pixels
	public void onDraw(Canvas canvas) {
		// See how big we are. 0,0 is our upper-left.
		int width = getWidth();
		int height = getHeight();
		// Draw a line from upper left to lower right
		canvas.drawLine(0, 0, width-1, height-1, mLinePaint);
		// Draw a rect around our border
		canvas.drawRect(0, 0, width-1, height-1, mLinePaint); // left top right bottom
		// Draw the current count as large red text, 25% below our top edge.
		canvas.drawText("Count:" + mCount, 30, height * 0.25f, mTextPaint);

	/** Increments the count (and prompts a redraw). */
	public void increment() {
	/** Gets current count. */
	public int getCount() {
		return mCount;
	/** Sets count and prompts a re-draw. */
	public void setCount(int count) {
		mCount = count;


package edu.stanford.nick;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;

// Activity for BasicView example
public class BasicViewActivity extends Activity {

	public void onCreate(Bundle savedInstanceState) {

		LinearLayout container = (LinearLayout) findViewById(R.id.container);

		// Create BasicView (final so can refer to from anon inner class below)
		final BasicView view = new BasicView(this);
		view.setLayoutParams(new LinearLayout.LayoutParams(

		// Add it at end of linear layout "container" in main.xml layout

		Button button = (Button) findViewById(R.id.button1);
		button.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {

				// This represents doing something slow for 500ms  the UI thread --
				// a bad practice, but shows how invalidate() works.
//				try {
//					Thread.sleep(3000);
//				}
//				catch (InterruptedException e) {}
//				// Then increment again.
//				view.increment();


Got this far. Used to have MonkeyView here, but it was improved and extended and presented in the next lecture.