How to set Canvas to use @dimen for size

Question

I have the following XML:

<LinearLayout
        android:id="@+id/llColorSpect"
        android:layout_width="match_parent"
        android:layout_height="@dimen/color_scheme_height"
        android:orientation="vertical"
        android:background="@drawable/colorspect"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginBottom="@dimen/seek_bar_margin"
        android:layout_below="@+id/tvBGColor" >
        <RelativeLayout
            android:id="@+id/rlColorSpect"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <ImageView
                android:id="@+id/ivSquare"
                android:layout_width="@dimen/title_text_pad"
                android:layout_height="@dimen/title_text_pad"
                android:layout_alignParentBottom="true"
                android:scaleType="fitXY"
                android:src="@drawable/esquare" />
        </RelativeLayout>
    </LinearLayout>

Which displays the following output:

I tried to setup a canvas so I can allow the user to drag the small square around the layout:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class CanvasView extends View {

    private Bitmap bitmap;
    private Bitmap square;
    private float mScaleFactor = 1f;
    int x = 0;
    int y = 0;

    public CanvasView(Context c) {
        super(c);
        bitmap= BitmapFactory.decodeResource(c.getResources(), R.drawable.colorspect);
        square = BitmapFactory.decodeResource(c.getResources(), R.drawable.esquare);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.scale(mScaleFactor, mScaleFactor);
        canvas.drawBitmap(bitmap, 0, 0, null);
        canvas.drawBitmap(square, x, y, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        float x = event.getX();
        float y = event.getY();
        Log.d("x and y", "X: " + x + " Y: " + y);
        int pixel = bitmap.getPixel((int)x,(int) y);
        int redValue = Color.red(pixel);
        int blueValue = Color.blue(pixel);
        int greenValue = Color.green(pixel);
        Log.d("Colors","R:" +redValue +" B:" + blueValue + " G:" +greenValue);

        //Draw onto the square onto image
        this.x = (int) x;
        this.y = (int) y;
        invalidate();

        return true;
    }
}

I call the above code from my main function as follow:

CanvasView canvasView = new CanvasView(this);
RelativeLayout rlDragDrop = (RelativeLayout) findViewById(R.id.rlColorSpect);
rlDragDrop.addView(canvasView);

Instead of keeping the same layout as shown by the image above, the layout changes as following:

• How do I keep modify the code to make the second image which is produced by the code to reflect the XML file/first image?
• Also, everytime the square goes all the way to the top or left or bottom or right the app FC saying Y=0 or X=0. How do I fix that?

What I am looking to do is, get the X and Y coordinate of the square and convert that into R,G,B values. (which is working, except the two issues I am having above)

Answer 1

What you are trying to implement looks like a color picker. I'm sure, there a lot of solutions of that:) Android Color Picker

About your code, it is better to subclass directly an ImageView insted of simple View. So ImageView will draw a background image for you (all xml attributes will be avaluable) and you would warry only about your square.

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(square, x, y, null);
}

Your second issue may accure because of canvas.scale(mScaleFactor, mScaleFactor);, but i'm not sure:) Actually if you critically need scaling, it may be better to use Canvas#drawBitmap(Bitmap, Rect, RectF, Paint) or even Canvas.save() and Canvas.restore().