Android Constraint Layout using Flow with elevation and cornor radius

Question

Is it possible to create a constraint layout with elevation, corner radius etc without using Cardview ? Constraint layout has a "constraintlayout.helper.widget.Flow" that nicely packs the widgets but not sure if it is possible to make it look similar to Cardview

Answer 1

Flow class inherits from View class thus you can use elevation in Flow as well.

There is no cornerRadius property similar to CardView. But you can create a rounded rectangle as a shape drawable and set it as background to the Flow.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/light_image_background"/>
    <corners android:radius="10dp"/>

</shape>

And set them to flow like:

android:background="@drawable/rounded_image_background"
android:elevation="6dp"

You'll have a rounded background while keeping the flat hierarchy.

Other possible solution is to extend from Flow class and override onDraw to draw a rounded rectangular in the background. It would be something like this:

class RoundedFlow @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : Flow(context, attrs, defStyleAttr) {
    
    private val backgroundRect : RectF = RectF(0f, 0f, 200f, 200f) 
    private val backgroundCornerRadius = 20f
    private val backgroundPaint : Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.YELLOW
    }

    override fun onDraw(canvas: Canvas?) {
        backgroundRect.set(0f, 0f, measuredWidth.toFloat(), measuredHeight.toFloat())
        canvas?.drawRoundRect(backgroundRect, backgroundCornerRadius , backgroundCornerRadius, backgroundPaint)
    }
}