• TextView
• EditText
• Button
• Spinner
• DatePicker

• Modularize repeated code
• Access protected methods
• Optimize rendering speed
• Complete control with draw, measure and layout

• Shortcut View and ViewGroup
• Custom View
• Custom ViewGroup

Modularize repeated code

• Subclass existing widget
• Group existing widgets into compound control

<TextView
  android:id="@+id/date"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

TextView dateView = (TextView) findViewById(R.id.date);
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
String today = dateFormat.format(Calendar.getInstance().getTime());
dateView.setText(today);

package com.sqisland.android.dateview;

public class DateView extends TextView {
  public DateView(Context context) {
    super(context);
  }

  public DateView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public DateView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }
}

public class DateView extends TextView {
  public DateView(Context context) {
    super(context);
    setDate();
  }

  public DateView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setDate();
  }

  public DateView(
      Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setDate();
  }
}

private void setDate() {
  SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
  String today = dateFormat.format(Calendar.getInstance().getTime());
  setText(today);  // self = DateView = subclass of TextView
}

public class DateActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    DateView dateView = new DateView(this);
    setContentView(dateView);
  }
}

public class DateActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
  }
}

<com.sqisland.android.dateview.DateView
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

• onLayout
• onMeasure
• onDraw / dispatchDraw

• requestLayout up to ViewRoot
• measure all children
• layout all children

Customize size and appearance of the View

• onMeasure - how big?
• onDraw - what to show?

void onMeasure(int widthMeasureSpec, int heightMeasureSpec);

• Measure its own size according to measure spec
• Call setMeasuredDimension to store results

• UNSPECIFIED - anything goes!
• AT_MOST - as large as the specified size
• EXACTLY - as given by parent

public void onMeasure(int widthSpec, int heightSpec) {
  super.onMeasure(widthSpec, heightSpec);
  int size = Math.min(getMeasuredWidth(), getMeasuredHeight());
  setMeasuredDimension(size, size);
}

void onDraw(Canvas canvas);

• drawLine
• drawRect
• drawCircle
• drawPath
• drawText
• drawBitmap

• clipRect
• translate
• rotate
• scale
• skew
• save
• restore

Container for positioning child views

• onMeasure - how big are the children?
• onLayout - where are the children?
• dispatchDraw - adjustments before or after drawing the children

• SurfaceView
• Always square

public void onDraw(Canvas canvas) {
  canvas.drawColor(mBackgroundColor);
  drawGuidelines(canvas);
  drawCharacter(canvas);
  drawAnimation(canvas);
  drawPenStrokes(canvas);
  drawStrokeNumbers(canvas);
}

// CharacaterActivity.java
mCharacterArea = (CharacterArea) findViewById(R.id.sketch_pad);

mStrokeNumbersCheckBox = (CheckBox) findViewById(R.id.stroke_numbers_checkbox);
mStrokeNumbersCheckBox.setOnCheckedChangeListener(new OnCheckedChangeListener() {
  public void onCheckedChanged(CompoundButton view, boolean isChecked) {
    mCharacterArea.toggleStrokeNumbers();
  }
});

// CharacterArea.java
public void toggleStrokeNumbers() {
  mShowStrokeNumbers = !mShowStrokeNumbers;
}

public void drawStrokeNumbers(Canvas canvas) {
  if (!mShowStrokeNumbers) {
    return;
  }
  // Proceed to draw stroke numbers
}

public void registerListener(Listener listener) {
  mListeners.add(listener);
}
public void unregisterListener(Listener listener) {
  mListeners.remove(listener);
}
private void notifyPenStrokeComplete(PenStroke penStroke) {
  for (Listener listener : mListeners) {
    listener.onPenStrokeComplete(penStroke);
  }
}

public interface Listener {
  public void onPenStrokeComplete(PenStroke penStroke);
}

public void onPenStrokeComplete(PenStroke penStroke) {
  boolean pass = (penStroke.grade == PenStroke.Grade.PASS);
  if (mMonkeyView != null) {
    mMonkeyView.setImageResource(pass ?
        R.drawable.happy_monkey : R.drawable.sad_monkey);
  }

  // Just a bit more, wrong stroke etc
  String feedback = getFeedback(penStroke.grade);  
  mFeedbackView.setText(feedback);
}

• ACTION_DOWN
  • stopAnimation()
  • new PenStroke()

• ACTION_DOWN / ACTION_MOVE / ACTION_UP
  Add point to PenStroke

• ACTION_UP
  • Grade stroke
    • Update feedback
    • PASS: Show next stroke
    • FAIL: startAnimation()

• Shortcut View and ViewGroup: Modularize repeated code
  • Subclass existing widget
  • Group existing widgets into compound control
  
  
• Custom View
  • onMeasure: Customize size
  • onDraw: Customize appearance
  
  
• Custom ViewGroup
  • onLayout: Position the children
  • dispatchDraw: Adjustment before/after drawing the children

• BookshelfGridView
  • onDispatchDraw
• CharacterArea
  • onMeasure
  • onDraw
  • onTouchEvent
  • Custom listener

• http://is.gd/DeepDiveComp
• http://is.gd/AndroidCustomComp
• http://eepurl.com/lR5uD
• http://blog.sqisland.com
• http://twitter.com/chiuki

 
Don't forget to download Monkey Write!