Custom View show on center of the screen

Question

i write a custom view class.

i've implement the custom view on Main Layout xml. and set parameter for center of the screen using below code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
     android:background="@drawable/cs_background"
     android:id="@+id/layout"
     >

   <com.drawings.DrawingView
            android:id="@+id/drawingview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"  
            /> 

 </RelativeLayout>

In graphics layout , it show correctly on center postion. But when i execute on simulator, it shows on left top corner.

i've tried to change to implement the layout programmatically, using below code.

RelativeLayout layout = new RelativeLayout(this);
        DrawingView  myView = new DrawingView(this);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        params.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
        layout.addView(myView,params);
        setContentView(linearLayout);

But still its show on left top corener.

My drawingview class is,

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

public class DrawingView extends View
{
    Context context;
    private Path mPath; 
    private Bitmap backgound;
    private Paint mPaint;
    private float mX,mY;

    private static final float TOUCH_TOLERANCE =4;


    public DrawingView(Context c)
    {
        super(c);
        context         = c;
        init();
    }
    public DrawingView (Context c, AttributeSet as)
    {
        super(c,as);
        context         = c;
        init();
    }

    private void init() 
    {
        mPath       = new Path();
        mPaint      = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(0xFFFF0000);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(12);
        backgound   = BitmapFactory.decodeResource(context.getResources(), R.drawable.cs_one);
    }

    @Override
    protected void onDraw(Canvas canvas) 
    {
        canvas.drawBitmap(backgound, 0, 0, null);
        if(!mPath.isEmpty())
            canvas.drawPath(mPath, mPaint);

        invalidate();
    }

    private void touch_start(float x, float y) 
    {
        mPath.moveTo(x, y);

    }
    private void touch_move(float x, float y) 
    {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);

        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE)
        {
            mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
        }
    }

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

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            break;
        case MotionEvent.ACTION_UP:
//          touch_up();
            break;
        }
        invalidate();
        return true;

    }

}

what is the problem? and how to show the custom view on center of the screen. ?

Answer 1

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    this.setMeasuredDimension(backgound.getWidth(), backgound.getHeight());
}

implement the onMeasure(int,int)

Answer 2

change it

 RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);

to

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,
RelativeLayout.LayoutParams.FILL_PARENT);

Answer 3

You should to implement in your custom View class

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

In it you should calculate height and width for your custom View. If you need to central your custom View in parent layout - make sure that:

• custom View height != parent View height

AND/OR

• custom View width != parent View width

For example:

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        final int height = mCircleRadius * 2; //calculated
        final int width = getMeasuredWidth(); //parent width

        setMeasuredDimension(width, height);
    }

Now you can use next for your custom View:

android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

PS You see that android:layout_centerHorizontal="true" gives no effect. The reason is using parent width in onMeasure instead of calculating exact width.