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.

What do you have against XML? Sure it is possible to create views with code, but it is usually easier to create and visualize with XML. In most cases, you can just inflate a new layout file, or change the visibility of a view, rather than create an entire view programatically. — Bryan, Jul 12 '16 at 19:02
@Bryan, you are right but i i wanted to learn to create view programatically. — Reprator, Jul 13 '16 at 05:13
Are you looking to make a [custom view](https://developer.android.com/training/custom-views/create-view.html), or just inflate a view programmatically? — Bryan, Jul 13 '16 at 12:30
@Bryan, i wanted to create a custom view, and currently i am trying to create this view by customizing this view accroding to my need, https://github.com/mrwonderman/driveimageview/blob/master/driveimageview/src/ch/haclyon/driveimageview/DriveImageViewLayout.java — Reprator, Jul 13 '16 at 13:09

score 2 · Answer 1 · answered Jul 12 '16 at 18:58

copy and paste below code, Hope this will give you your desired output.. Here is what I've got using this code Screenshot

XML code:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black_alpha_30"
    android:padding="15dp">

    <RelativeLayout
        android:id="@+id/relative_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/relative_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true">

        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

Java code:

private RelativeLayout mRelativeLayout, mRelativeParent;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mRelativeLayout = (RelativeLayout) findViewById(R.id.relative_main);
    mRelativeParent = (RelativeLayout) findViewById(R.id.relative_parent);

    Button btnMain = new Button(MainActivity.this);
    btnMain.setBackgroundColor(getResources().getColor(R.color.teal_600));
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, 80);
    layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
    layoutParams.setMargins(15,15,15,15);
    btnMain.setLayoutParams(layoutParams);
    mRelativeLayout.addView(btnMain);

    Button btnImage = new Button(MainActivity.this);
    btnImage.setBackgroundDrawable(getResources().getDrawable(R.drawable.teal_bg));
    RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams(150, 150);
    layoutParams1.addRule(mRelativeParent.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
    btnImage.setLayoutParams(layoutParams1);
    mRelativeParent.addView(btnImage);
}

thanks for your effort, but i wanted to learn and create view programatically rather than with xml. — Reprator, Jul 13 '16 at 05:13
So you don't wanna include xml in onCreate method If I am not wrong, right ?? — Bhavnik, Jul 13 '16 at 06:04
@yes, i wanted to learn how to create in with canvas in a button or view — Reprator, Jul 13 '16 at 06:36
Okay, but why you wanna use canvas for that ??? You can make that view using simple RelativeLayout or LinearLayout easily.... — Bhavnik, Jul 13 '16 at 06:45
i am a experienced developer but now a days i wanted to work and learn canvas with views..... — Reprator, Jul 13 '16 at 06:47

score 2 · Accepted Answer · answered Jul 14 '16 at 09:05

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);
}

create a button programatically with sharp edge containing image

2 Answers2