androidandroid-jetpack-composeglance

Jetpack Glance: Add Linear Gradient to a Box Composable


I like to add a linear gradient to a Glance composable but it seems like there is no brush I can add like in Jetpack.

Box(
  modifier = GlanceModifier
    .background(//HERE)
    .fillMaxHeight()
    .cornerRadius(16.dp)
) {}

These are the constructors that are defined for background

GlanceModifier.background(Color) defined in androidx.glance
GlanceModifier.background(ImageProvider, ContentScale = ..., ColorFilter? = ...) defined in androidx.glance
GlanceModifier.background(ColorProvider) defined in androidx.glance
GlanceModifier.background(Int) defined in androidx.glance

Solution

  • I managed to implement it by using a Bitmap that I generate like Mike M. suggested.

    private fun createGradientBitmap(
        width: Int,
        height: Int,
        startColor: Int,
        endColor: Int
    ): Bitmap {
        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        val paint = Paint()
        
        val gradient = LinearGradient(
            0f, 0f, width.toFloat(), 0f,
            startColor, endColor,
            Shader.TileMode.CLAMP
        )
        
        paint.shader = gradient
        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
        return bitmap
    }
    
    //...
    @Composable
    fun Gradient(
        modifier: GlanceModifier = GlanceModifier,
    ) { 
    Box(
        modifier = GlanceModifier
        .fillMaxSize()
        .background(ImageProvider(gradientBitmap))
       ) {}
    }