create a button programatically with sharp edge containing image

Question

I wanted to create a custom button or view progrmatically with a simple image and text as shown in image, where edge is of button not of image.

Please don't use xml.

Any help would be greatly appreciated. I wanted to learn and create custom view with canvas but since i am new one to canvas, i am not able to create it.

Answer 1

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;

import android.util.AttributeSet;
import android.view.View;

public class ContainerBox extends View {
    private Paint textPaint;
    private String mainText="Vikram Singh";
    private String backgroundColour = "#FF8514";
    private String textColour = "#1896bb";

private Bitmap leftIcon;
private Paint paintBackGround;
private Rect recBackGround;

private Paint paintImage ;
private Rect recImage;

public ContainerBox(Context context) {
    super(context);
    initializePaints(context);
}

public ContainerBox(Context context, AttributeSet attrs) {
    super(context, attrs);
    initializePaints(context);
}

public ContainerBox(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initializePaints(context);
}

private void initializePaints(Context context) {
    leftIcon = BitmapFactory.decodeResource(getResources(), R.drawable.icon_done);

    paintImage = new Paint();
    paintImage.setColor(Color.parseColor(backgroundColour));
    paintImage.setStrokeWidth(3);
    paintImage.setAntiAlias(true);
    paintImage.setStyle(Paint.Style.FILL);

    paintBackGround = new Paint();
    paintBackGround.setColor(Color.parseColor(backgroundColour));
    paintBackGround.setStrokeWidth(3);
    paintBackGround.setAntiAlias(true);
    paintBackGround.setStyle(Paint.Style.FILL);

    textPaint = new Paint();
    textPaint.setColor(Color.parseColor(textColour));
    textPaint.setAntiAlias(true);
    textPaint.setTextSize(4);
    textPaint.setStyle(Paint.Style.STROKE);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    setMeasuredDimension(getMeasuredWidth(),leftIcon.getHeight()+40);
}

@Override
protected void onDraw(Canvas canvas) {
    int width = getWidth();
    int height = leftIcon.getHeight()+40;

    int differenceHeight=height-25;
    int differenceWidth=width-leftIcon.getWidth()+15;
    recBackGround=new Rect(0,25,differenceWidth,differenceHeight);

    canvas.drawRect(recBackGround,paintBackGround);

    textPaint.setTextSize(15f);
    float textWidth = textPaint.measureText(mainText);
    int x = (int) ((recBackGround.width() - textWidth) / 2);
    int y = (int) ((recBackGround.centerY() - (textPaint.descent() + textPaint.ascent())/2));
    // draw text
    canvas.drawText(mainText, x, y, textPaint);


    recImage=new Rect(recBackGround.right,0,width,height);
    canvas.drawRect(recImage,paintImage);

    int left=recImage.width()/2-leftIcon.getWidth()/2;
    int top=recImage.height()/2-leftIcon.getHeight()/2;
    canvas.drawBitmap(leftIcon,recImage.left,top,paintImage);
    super.onDraw(canvas);
}