Tuesday, May 25, 2010

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.

Two view in one FrameLayout

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.

4 comments:

Dave said...

Thank you for sharing. In the download ZIp there is a small error in the main.xml

The names of the packages are incorrect.

Thank you again~

Dave

basava said...

thanks for sharing.
Is it possible ontouch canvas in view2 i want to rotate 1st view canvas
how?

Erik said...

hello basava,

do u means how t rotate a bitmap? please read Rotate bitmap image, using Matrix.

rit said...

hi, i am not getting the same output as given in above figure, that that google image is coming small on the parent view.. remaining screen is black..