Add Images on Canvas with Android

Question

I'm new to android java and I don't really knows how to make the button appear on my VIEW after a long time researching online. I can see my button in the layout but not on my view when I debug it.I'm not sure how to put more than one images in after the button was clicked.Please do correct me if I had done wrong in my code. Any help will be greatly appreciated.THANKS!

My Code in the following:

package com.example.oncanvas;

import android.app.Activity;

public class Main extends Activity {

    @Override
        public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        DrawView DrawView = new DrawView(this);
        DrawView.setBackgroundColor(Color.WHITE);
        setContentView(DrawView);
        DrawView.requestFocus();

}

    public class DrawView extends View {

        private Bitmap  mBitmap;
        private Canvas  mCanvas;
        private Path    mPath;
        private Paint   mBitmapPaint;
        private Paint   mPaint;

        public DrawView(Context c) {
            super(c);

            mPath = new Path();
            mBitmapPaint = new Paint(Paint.DITHER_FLAG);


            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setDither(true);
            mPaint.setColor(0xFF000000);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeJoin(Paint.Join.ROUND);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
                mPaint.setStrokeWidth(3);
        }  

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

        canvas.drawPath(mPath, mPaint);
    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

    private void touch_start(float x, float y) {
        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = 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);
            mX = x;
            mY = y;
        }
    }
    private void touch_up() {
        mPath.lineTo(mX, mY);
        // commit the path to our offscreen
        mCanvas.drawPath(mPath, mPaint);
        // kill this so we don't double draw
        mPath.reset();
    }

    @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);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                touch_move(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                touch_up();
                invalidate();
                break;
        }
        return true;
    }

    public void clear(){
        mBitmap.eraseColor(Color.TRANSPARENT);
        invalidate();
        System.gc();
    }}

}

This is XML for Layout

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

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

</Button>

<com.example.oncanvas
    android:id="@+id/drawView1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">        

        </com.example.oncanvas>
</LinearLayout>

Desireah

Answer 1

Its just a clue..Add your code

  @Override
    public boolean draw(Canvas canvas, MapView mapView, boolean shadow, long when) {
        super.draw(canvas, mapView, shadow);                  

        // convert point to pixels
        Point screenPts = new Point();
        mapView.getProjection().toPixels(pointToDraw, screenPts);

        // add marker
        Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.marker);
        canvas.drawBitmap(bmp, screenPts.x, screenPts.y - 24, null); // 24 is the height of image       
        return true;
    }
} 

Calix

Thanks for your answer!I'm working on it.Anyway, do you have any idea why I couldn't see my button on my Views when I debug it? – Desireah

Check whether button view is invisible – Calix

Answer 2

Inside OnDraw() if you need to draw muttiple images you should call : canvas.drawBitmap() mutiple times with different margin values.

for(int i=0;i<4;i++){
   canvas.drawBitmap(bmp, (i*5), (i*10), null)
}

Urus

Answer 3

To add image or drawable as bitmap(Png, Svg, vector, etc)

public Bitmap createBitmap(int drawableId, int newHeight, int newWidth) {
        Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), drawableId);
        myBitmap = Bitmap.createScaledBitmap(myBitmap, newWidth, newHeight, false);
        return myBitmap;
    }

Usage Example:

Bitmap facebookIcon = createBitmap(R.drawable.facebookImage);
// now use it anywhere
imageView.setBitmapImage(facebookIcon); 
canvas.drawBitmap(facebookIcon, 0, 0, null); 

Make sure to keep aspect ratio, it works fine for 1:1 images (means square images)

Julijulia