Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

768
Vistas
Gradiente de texto en Android Jetpack Compose

No sé cómo agregar un degradado a un texto con una sombra interna con un modificador en Jetpack Compose. ¿Tener algo así? ¿Algunas ideas?

ingrese la descripción de la imagen aquí

over 4 years ago · Hanz Gallego
2 Respuestas
Responde la pregunta

0

Hasta ahora, Jetpack Compose no proporciona gradientes de texto ni sombras internas listas para usar. Por lo tanto, necesita pintarlo usted mismo:

imagen de resultado

 @Composable fun drawGradientText(name: String, modifier: Modifier = Modifier) { val paint = Paint().asFrameworkPaint() val gradientShader: Shader = LinearGradientShader( from = Offset(0f, 0f), to = Offset(0f, 400f), listOf(Color.Blue, Color.Cyan) ) Canvas(modifier.fillMaxSize()) { paint.apply { isAntiAlias = true textSize = 400f typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD) style = android.graphics.Paint.Style.FILL color = android.graphics.Color.parseColor("#cdcdcd") xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OVER) maskFilter = BlurMaskFilter(30f, Blur.NORMAL) } drawIntoCanvas { canvas -> canvas.save() canvas.nativeCanvas.translate(2f, 5f) canvas.nativeCanvas.drawText(name, 0f, 400f, paint) canvas.restore() paint.shader = gradientShader paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR) paint.maskFilter = null canvas.nativeCanvas.drawText(name, 0f, 400f, paint) canvas.nativeCanvas.translate(2f, 5f) paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OVER) paint.maskFilter = BlurMaskFilter(30f, Blur.NORMAL) canvas.nativeCanvas.drawText(name, 0f, 400f, paint) } paint.reset() } }

Puede ajustar los modos y compensaciones de PorterDuff para cumplir con sus requisitos.

over 4 years ago · Hanz Gallego Denunciar

0

Acabo de encontrarme con el mismo caso de uso, pero solo para un degradado simple en el texto. Lo publico aquí por si ayuda a alguien.

Lo que funcionó para mí fue dibujar el contenido y luego el degradado a través de Modifier.graphicsLayer (extrapolado de esta respuesta en Slack):

 Text( text = "$ 20", /** size/font style, etc. **/ modifier = Modifier.graphicsLayer(alpha = 0.99f) .drawWithCache { val brush = Brush.horizontalGradient(listOf(StartColor, EndColor)) onDrawWithContent { drawContent() drawRect(brush, blendMode = BlendMode.SrcAtop) } } )

Terminé convirtiéndolo en un Modifier para su reutilización:

 fun Modifier.textBrush(brush: Brush) = this .graphicsLayer(alpha = 0.99f) .drawWithCache { onDrawWithContent { drawContent() drawRect(brush, blendMode = BlendMode.SrcAtop) } }

Resultado de ejemplo:

texto con degradado

over 4 years ago · Hanz Gallego Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda