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
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.