Example to draw on custom View

In this exercise, we are going to implement a new custom View. With list of new Item class embeded. The view draw the items in onDraw() methof.

To implement custom View, create a new class MyGraphView.java, to extend View.

package com.example.androidgraphview;

import java.util.ArrayList;
import java.util.List;

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

public class MyGraphView extends View {
 
 Paint paintBackground;
 Paint paintGraph;
 Context myContext;
 
 class Item{
  int x;
  int y;
  
  Item(int nx, int ny){
   x = nx;
   y = ny;
  }
 }
 
 private List<Item> itemList = new ArrayList<Item>();

 public MyGraphView(Context context) {
  super(context);
  init(context);
 }

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

 public MyGraphView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  init(context);
 }
 
 private void init(Context c){
  myContext = c;
  
  paintBackground = new Paint();
  paintBackground.setStyle(Paint.Style.FILL);
  paintBackground.setColor(Color.BLACK);
  
  paintGraph = new Paint();
  paintGraph.setStyle(Paint.Style.STROKE);
  paintGraph.setColor(Color.WHITE);
  paintGraph.setStrokeWidth(3);
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  int w = MeasureSpec.getSize(widthMeasureSpec);
  int h = MeasureSpec.getSize(heightMeasureSpec);
  setMeasuredDimension(w, h);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  canvas.drawRect(0, 0, getWidth(), getHeight(), paintBackground);
  
  for (Item it : itemList) {
   int invY = getHeight() - it.y;
   canvas.drawPoint(it.x, invY, paintGraph);
  }
 }

 void addItem(int tx, int ty){
  itemList.add(new Item(tx, ty));
 }
 
}

Layout file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <com.example.androidgraphview.MyGraphView
        android:id="@+id/myview"
        android:layout_width="500px"
        android:layout_height="500px" />

</LinearLayout>

MainActivity.java

package com.example.androidgraphview;

import java.util.Random;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {
 
 MyGraphView myGraphView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  myGraphView = (MyGraphView)findViewById(R.id.myview);
  
  Random random = new Random();

  for(int i = 0; i <= 500; i++){
   myGraphView.addItem(i, random.nextInt(500));
  }

 }

}

Download the files.

Next:
- Update custom View at run-time in background thread