how can I paint a drawable instance in Compose whi...

# compose

[Pablo]

how can I paint a drawable instance in Compose which starts vertically with a color and ends with a second color, like a gradient?

[Kirill Grouchnikov]

You can use LinearGradientShader

[Kirill Grouchnikov]

So something like https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]monMain/kotlin/androidx/compose/foundation/Background.kt;l=75 + ShaderBrush that wraps a LinearGradientShader. Or DrawScope.drawOutline with the same brush.

[Pablo]

maybe can you give me a simple sample of how to create a Drawable instance with that?

[Kirill Grouchnikov]

This is compose. It has `Painter`s, not `Drawable`s

[Pablo]

this is returning me an empty drawable:

override fun getDrawable(): Drawable {
    val sf: ShaderFactory = object : ShaderFactory() {
        override fun resize(width: Int, height: Int): Shader {
            return LinearGradient(
                startX(width), startY(height), endX(width), endY(height), intArrayOf(
                    color1, color2
                ),
                null, Shader.TileMode.MIRROR
            )
        }
    }
    val p = PaintDrawable()
    p.shape = RectShape()
    p.shaderFactory = sf
   
fun startX(actualWidth: Int): Float {
    when (type) {
        Type.SOLID -> return 0f
        Type.DEGREE_DOWN_UP, Type.DEGREE_UP_DOWN -> return actualWidth / 2.0f
        Type.DEGREE_LEFT_RIGHT -> return 0.0f
        Type.DEGREE_RIGHT_LEFT -> return actualWidth.toFloat()
        else -> {}
    }
    return (-1).toFloat()
}

fun startY(actualHeight: Int): Float {
    when (type) {
        Type.SOLID -> return 0f
        Type.DEGREE_DOWN_UP -> return actualHeight.toFloat()
        Type.DEGREE_LEFT_RIGHT, Type.DEGREE_RIGHT_LEFT -> return actualHeight / 2.0f
        Type.DEGREE_UP_DOWN -> return 0f
        else -> {}
    }
    return (-1).toFloat()
}

fun endX(actualWidth: Int): Float {
    when (type) {
        Type.SOLID -> return actualWidth.toFloat()
        Type.DEGREE_DOWN_UP, Type.DEGREE_UP_DOWN -> return actualWidth / 2.0f
        Type.DEGREE_LEFT_RIGHT -> return actualWidth.toFloat()
        Type.DEGREE_RIGHT_LEFT -> return 0f
        else -> {}
    }
    return (-1).toFloat()
}

fun endY(actualHeight: Int): Float {
    when (type) {
        Type.SOLID -> return actualHeight.toFloat()
        Type.DEGREE_DOWN_UP -> return 0f
        Type.DEGREE_UP_DOWN -> return actualHeight.toFloat()
        Type.DEGREE_LEFT_RIGHT, Type.DEGREE_RIGHT_LEFT -> return actualHeight / 2.0f
        else -> {}
    }
    return (-1).toFloat()
}

being of type DEGREE_UP_DOWN

[Kirill Grouchnikov]

This isn’t a Compose question then. It’s probably somewhere around not fully “configuring” your PaintDrawable to have it respect the size that is being asked to draw. Is your resize method being called with the right width / height? In any case, this is unlikely to be a Compose question, but rather a more general Android question for SO or Android-specific Slacks.

[Pablo]

but this works with java and views

[Pablo]

it's failing when using it in compose

[Kirill Grouchnikov]

If you want clear answers, you need to ask a clear question. Nothing in this code snippet has anything to do with Compose. It’s not even clear if you want to use an Android-based gradient in Compose, or a Compose-based gradient in an Android view.

Make a small, self containable, full code snippet that shows the absolute smallest setup that is not working for you. Don’t make people guess what exactly you’re trying to achieve and how exactly you’re trying to do that. Guesses is how you lose people.