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.

Example to draw on custom View


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 filesDownload the files.

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