Problems with non-trivial background drawable
I have some not trivial background of card view.
I thought, that the best way, is a draw this rectangle in Canvas, but how intersect circle from it? And how set this custom drawable to background? Also i need to add shadow to this card.
My tries was not successfully)
this is rectangle layout
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp"/>
<solid android:color="@color/common.white"/>
<stroke android:color="@color/group_flights.bubble.border"/>
</shape>
And this is implementation of drawable
class CardBackgroudDrawable(val context: Context?, val widht: Float, val height: Float): Drawable() {
val paint = Paint()
override fun draw(canvas: Canvas?) {
val bitmap = BitmapFactory.decodeResource(context?.resources, R.drawable.drawable_flight_card_background)
with(paint) {
strokeWidth = 1f
isAntiAlias = true
isDither = true
}
canvas?.drawBitmap(bitmap, bounds, RectF(0f, 0f, widht, height), paint)
// How to intersect shapes??
}
override fun setAlpha(alpha: Int) {}
override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
override fun setColorFilter(colorFilter: ColorFilter?) {}
}
And card layout
class FlightCardLayout: ConstraintLayout {
constructor(context: Context?) : super(context) {
init(context)
}
constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
init(context)
}
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
init(context)
}
private fun init(context: Context?) {
val drawable = CardBackgroudDrawable(context, measuredWidth.toFloat(), measuredHeight.toFloat())
background = drawable
}
}
Also, I thought to use .9.png format. Is it good idea?
U.P.D
I found nice tool "PainCode", and tried to convert this shape to Bezier,
public class BezierFlightCard {
// Resizing Behavior
public enum ResizingBehavior {
AspectFit, //!< The content is proportionally resized to fit into the target rectangle.
AspectFill, //!< The content is proportionally resized to completely fill the target rectangle.
Stretch, //!< The content is stretched to match the entire target rectangle.
Center, //!< The content is centered in the target rectangle, but it is NOT resized.
}
// In Trial version of PaintCode, the code generation is limited to 3 canvases.
// Canvas Drawings
// Tab
private static class CacheForCard {
private static Paint paint = new Paint();
private static RectF bezier2Rect = new RectF();
private static Path bezier2Path = new Path();
}
public static void drawCard(Canvas canvas, RectF frame) {
// General Declarations
Paint paint = CacheForCard.paint;
// Local Colors
int strokeColor = Color.argb(255, 215, 215, 215);
int fillColor = Color.argb(255, 255, 255, 255);
// Bezier 2
RectF bezier2Rect = CacheForCard.bezier2Rect;
bezier2Rect.set(frame.left + 19.5f,
frame.top + 16.5f,
frame.left + 370.5f,
frame.top + 334.5f);
Path bezier2Path = CacheForCard.bezier2Path;
bezier2Path.reset();
bezier2Path.moveTo(frame.left + frame.width() * 0.57926f, frame.bottom - 23.5f);
bezier2Path.cubicTo(frame.left + frame.width() * 0.57018f, frame.bottom - 37.3f, frame.left + frame.width() * 0.53813f, frame.bottom - 47.5f, frame.left + frame.width() * 0.5f, frame.bottom - 47.5f);
bezier2Path.cubicTo(frame.left + frame.width() * 0.46187f, frame.bottom - 47.5f, frame.left + frame.width() * 0.42982f, frame.bottom - 37.3f, frame.left + frame.width() * 0.42074f, frame.bottom - 23.5f);
bezier2Path.lineTo(frame.left + 39.5f, frame.bottom - 23.5f);
bezier2Path.cubicTo(frame.left + 28.45f, frame.bottom - 23.5f, frame.left + 19.5f, frame.bottom - 32.45f, frame.left + 19.5f, frame.bottom - 43.5f);
bezier2Path.lineTo(frame.left + 19.5f, frame.top + 36.5f);
bezier2Path.cubicTo(frame.left + 19.5f, frame.top + 25.45f, frame.left + 28.45f, frame.top + 16.5f, frame.left + 39.5f, frame.top + 16.5f);
bezier2Path.lineTo(frame.right - 40.5f, frame.top + 16.5f);
bezier2Path.cubicTo(frame.right - 29.45f, frame.top + 16.5f, frame.right - 20.5f, frame.top + 25.45f, frame.right - 20.5f, frame.top + 36.5f);
bezier2Path.lineTo(frame.right - 20.5f, frame.bottom - 43.5f);
bezier2Path.cubicTo(frame.right - 20.5f, frame.bottom - 32.45f, frame.right - 29.45f, frame.bottom - 23.5f, frame.right - 40.5f, frame.bottom - 23.5f);
bezier2Path.lineTo(frame.left + frame.width() * 0.57926f, frame.bottom - 23.5f);
bezier2Path.close();
paint.reset();
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
bezier2Path.setFillType(Path.FillType.EVEN_ODD);
paint.setStyle(Paint.Style.FILL);
paint.setColor(fillColor);
canvas.drawPath(bezier2Path, paint);
paint.reset();
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
paint.setStrokeWidth(1f);
paint.setStrokeMiter(10f);
canvas.save();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(strokeColor);
canvas.drawPath(bezier2Path, paint);
canvas.restore();
}
// Resizing Behavior
public static void resizingBehaviorApply(ResizingBehavior behavior, RectF rect, RectF target, RectF result) {
if (rect.equals(target) || target == null) {
result.set(rect);
return;
}
if (behavior == ResizingBehavior.Stretch) {
result.set(target);
return;
}
float xRatio = Math.abs(target.width() / rect.width());
float yRatio = Math.abs(target.height() / rect.height());
float scale = 0f;
switch (behavior) {
case AspectFit: {
scale = Math.min(xRatio, yRatio);
break;
}
case AspectFill: {
scale = Math.max(xRatio, yRatio);
break;
}
case Center: {
scale = 1f;
break;
}
}
float newWidth = Math.abs(rect.width() * scale);
float newHeight = Math.abs(rect.height() * scale);
result.set(target.centerX() - newWidth / 2,
target.centerY() - newHeight / 2,
target.centerX() + newWidth / 2,
target.centerY() + newHeight / 2);
}
}
But.. it still not working, because it not optimazing for measure resize. Maybe best way to "spell" on it?)
Solution
You can control the current clip of the Canvas, that is, the area that the Canvas draws on, by using a family of clipXXX and (from API 26) clipOutXXX methods. You can find these methods documented here.
To solve your problem you may prepare a Path that describes the bottom circle and clip it out of the Canvas.
First, to avoid allocating objects in your draw method of your custom Drawable, you may have a field:
private Path bottomCircle = new Path();
Now, whenever the bounds of your custom drawable change, you recalculate the position of the circle:
@Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
bottomCircle.reset();
bottomCircle.addCircle(bounds.centerX(), bounds.bottom, bottomCircleRadius, CW);
}
Finally you draw your background:
@Override
public void draw(@NonNull Canvas canvas) {
canvas.save(); // Save the canvas so others won't get the clipped version
if (Build.VERSION.SDK_INT >= 26) {
canvas.clipOutPath(bottomCircle);
} else {
canvas.clipPath(bottomCircle, DIFFERENCE);
}
// draw your background here
canvas.restore(); // Restore the non-clipped version of the canvas
}