在自定义视图中添加矩形图像

Question

1st view is what I want to achieve

and 2nd view is what I have achieved

In the 2nd view both are Recf

Here is my view in xml

<com.aws.renooji.utils.CustomCategoriesImageView
    android:id="@+id/customCategoriesImageView"
    android:layout_width="200dp"
    android:layout_height="120dp"
    android:layout_marginStart="16dp"
    android:layout_marginBottom="32dp"
    app:bg_color="@color/colorLightBlue"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:square_angle="6"
    app:square_topMargin="50"
    app:square_rightMargin="80"
    app:square_color="@color/colorAccent"
    app:square_position_x="0"
    app:square_position_y="20"
    app:square_size="115dp" />

This is attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomCategoriesImageView">
        <attr name="square_color" format="color"/>
        <attr name="square_size" format="dimension"/>
        <attr name="square_angle" format="integer"/>
        <attr name="square_position_x" format="integer"/>
        <attr name="square_position_y" format="integer"/>
        <attr name="square_image" format="reference"/>
        <attr name="bg_color" format="color"/>
        <attr name="square_topMargin" format="integer"/>
        <attr name="square_rightMargin" format="integer"/>
    </declare-styleable>
</resources>

Here is my customView class CustomCategoriesImageView extends View

private static final int SQUARE_SIZE_DEF = 200;
private Rect rectImage;
private RectF rectBG;
private Paint paint,bgPaint;
private int squareColor, bgColor, squareSize squarePosX, squarePosY;
private int squareTopMargin, squareRightMargin, squareAngle, canvasWidth, canvasHeight;
private int image;
private float[] corners = new float[]{};
private Path path;

public CustomCategoriesImageView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);

    init(attrs);
}

public CustomCategoriesImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(attrs);
}

private void init(@Nullable AttributeSet set) {
    rectImage = new Rect();
    rectBG = new RectF();
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    if (set == null) {
        return;
    }

    TypedArray ta = getContext().obtainStyledAttributes(set, R.styleable.CustomCategoriesImageView);

    squareColor = ta.getColor(R.styleable.CustomCategoriesImageView_square_color, Color.RED);
    bgColor = ta.getColor(R.styleable.CustomCategoriesImageView_bg_color, Color.YELLOW);
    squareSize = ta.getDimensionPixelSize(R.styleable.CustomCategoriesImageView_square_size, SQUARE_SIZE_DEF);
    squarePosX = ta.getInt(R.styleable.CustomCategoriesImageView_square_position_x, getWidth() - 50);
    squarePosY = ta.getInt(R.styleable.CustomCategoriesImageView_square_position_y, getHeight() - 50);
    squareAngle = ta.getInt(R.styleable.CustomCategoriesImageView_square_angle, 10);
    image = ta.getResourceId(R.styleable.CustomCategoriesImageView_square_image, R.color.trans);
    squareTopMargin = ta.getInt(R.styleable.CustomCategoriesImageView_square_topMargin, 20);
    squareRightMargin = ta.getInt(R.styleable.CustomCategoriesImageView_square_rightMargin, 20);

    corners = new float[]{
            30, 30,        // Top left radius in px
            30, 30,        // Top right radius in px
            30, 30,          // Bottom right radius in px
            30, 30           // Bottom left radius in px
    };

    path = new Path();

    ta.recycle();
}

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

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    bgPaint.setColor(bgColor);
    rectBG.left = 0;
    rectBG.top = 0;
    rectBG.bottom = canvasHeight;
    rectBG.right = canvasWidth;

    path.addRoundRect(rectBG, corners, Path.Direction.CW);
    canvas.drawPath(path, bgPaint);

    Bitmap bmp = BitmapFactory.decodeResource(getResources(), image);

    // first point, here square's top left point will be
    rectImage.left = canvasWidth - (squareSize - squareRightMargin);
    rectImage.top = canvasHeight - (squareSize - squareTopMargin);

    // second point, here square's bottom right point will be
    rectImage.right = canvasWidth - squarePosX;
    rectImage.bottom = canvasHeight - squarePosY;

    paint.setColor(squareColor);

    canvas.save();
    canvas.rotate(squareAngle, 100, 100);
    canvas.drawRect(rectImage, paint);
}

I didn't paste my whole class and constructors, So

I m not worried about the text, as I can add TextView over my customView in ConstraintLayout I m stuck at how to make this DarkBlue color Recq a image, and also change it's image dynamically on Runtime

Don't worry about Gradient and Shadow

Any help or push in the right direction will be awesome Thanks

Answer 1

I used drawBitmap() to draw image inside another shape

canvas.drawBitmap(bmp, null, rectBG, null);
// here bmp is a BitMap where I will setImage
// rectBG is a rectangle on the CustomView, you can see it in the Image I posted, it is the smaller one which is tiled
// first null can be replaces with a new Rect and last null can be replace with Paint

this is a method to send image from a class

// set image from Classes
public void setImage(int image) {
    bmp = BitmapFactory.decodeResource(getResources(), image);
    postInvalidate();
    //here postInvalidate will replace the View with the new image data Async so if the image will take time to load, loading will not block the main thread
}

if you want to implemented something similar, you can use code from my question and add setImage() method to setImage in the tilted square or any other scenario

Hope this will help!