1. Custom Views

1.1. Defining own Views

You can also create you own Views by either extending existing Views classes or by extending View directly.

Views draw themself in the onDraw() method. You get a Canvas object which allows to perform drawing operations on it, e.g. draw lines, circle, text and Bitmaps.

1.2. Using Custom Views in layout files

Custom Views can be used in layout files. For this you need to use the full qualified name in the layout file, e.g. using the package and class name.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <de.vogella.android.ownview.MyDrawView
        android:id="@+id/myDrawView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

 

2. Tutorial: Own View and Touch Events

2.1. Drawing

In this tutorial you create your own View and assign this View via coding to the Activity. We will also demonstrate how to react to Touch Events.

Create a project de.vogella.android.touch with the Activity WriteOnScreen.

Create your own View via the following class. This View will react to touch events and draw the path of the fingers to its surface. The Paint object represents the “brush”.

 

package de.vogella.android.touch;

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

public class TouchEventView extends View {
  private Paint paint = new Paint();
  private Path path = new Path();

  public TouchEventView(Context context, AttributeSet attrs) {
    super(context, attrs);

    paint.setAntiAlias(true);
    paint.setColor(Color.WHITE);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setStrokeWidth(5f);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    canvas.drawPath(path, paint);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    float eventX = event.getX();
    float eventY = event.getY();

    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        path.moveTo(eventX, eventY);
        return true;
      case MotionEvent.ACTION_MOVE:
        path.lineTo(eventX, eventY);
        break;
      case MotionEvent.ACTION_UP:
    	  // nothing to do 
    	  break;
      default:
        return false;
    }

    // Schedules a repaint.
    invalidate();
    return true;
  }
}

 

Change the coding of the WriteOnScreen class to the following.

 

package de.vogella.android.touch;

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

public class WriteOnScreen extends Activity {
/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new TouchEventView(this, null));
    }
}

 

Run your application, you should be able to write on the screen.

Change your coding so that you use a layout definition based on XML. Hint: to use your own view in a XML layout definition you have to use the full-qualified class name (class including package information).

2.2. Tracking

Add code to your drawing example so that the current position of a finger is marked via a circle. To draw a circle you can use the addCircle(x, y, 50, Path.Direction.CW) method call on a Path or use the canvas element directly.

Make sure that only the current position is highlighted with a circle. The circle should appears as soon as the finger goes down and vanish once the finger goes up.

The result should look like the following.

 

Activity showing the drawing View

 

3. Thank you

One thought on “Android Custom Views

  1. What’s up, I would like to subscribe for this webpage to obtain most up-to-date updates, thus where can i do it please help out.

Leave a Reply

Your email address will not be published. Required fields are marked *