Two view in one FrameLayout

Two view in one FrameLayout -

In my previous exercise "Draw a bitmap on View", "Draw something on a Canvas", "Android FaceDetector" and "Custom View with User Interaction", everything is drawn on ONE view. In this exercise, it will be separated in two views. The un-changed bitmap is drawn on View1, and user interaction is drawn on View2. Such that, everytime VIew2.onDraw() will redraw the interactive part only, no need to re-draw the bitmap.



The layout file, main.xml, is modified to use a FrameLayout with two View, cover whole of the screen.

- place a bitmap of 320x480 in /res/drawable/ folder, or using the bitmap in the downloaded files.

- Create two view class extends View

View1.java

package com.exercise.AndroidTwoView;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;

public class View1 extends View {

public View1(Context context) {
 super(context);
 // TODO Auto-generated constructor stub
}

public View1(Context context, AttributeSet attrs) {
 super(context, attrs);
 // TODO Auto-generated constructor stub
}

public View1(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 // TODO Auto-generated constructor stub
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 // TODO Auto-generated method stub
 setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),
      MeasureSpec.getSize(heightMeasureSpec));
}

@Override
protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.googlelogo320x480);
      canvas.drawBitmap(myBitmap, 0, 0, null);
    
}

}

View2.java

package com.exercise.AndroidTwoView;

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

public class View2 extends View {

private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
float cx = 0, cy =0;
boolean draw = false;

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

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

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

private void init(){
 paint.setStyle(Paint.Style.STROKE);
 paint.setStrokeWidth(3);
 paint.setColor(Color.BLUE);
 setFocusable(true);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 // TODO Auto-generated method stub
 setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),
      MeasureSpec.getSize(heightMeasureSpec));
}

@Override
protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 if (draw){
  canvas.drawCircle(cx, cy, 3, paint);
 }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
 // TODO Auto-generated method stub
 int action = event.getAction();

 if (action==MotionEvent.ACTION_DOWN){
  cx = event.getX();
  cy = event.getY();
  draw = true;
  invalidate();
 }

 return true;
}

}

- Modify main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
<com.exercise.AndroidTwoView.View1
android:layout_width="fill_parent"
  android:layout_height="fill_parent"
/>
<com.exercise.AndroidTwoView.View2
android:layout_width="fill_parent"
  android:layout_height="fill_parent"
/>
</FrameLayout>

- AndroidTwoView.java actually no change from the auto-generated.

Download the files.