0

Estoy diseñando una app y necesito hacer una especie de barra con varios rangos para mostrar un dato. Para aclarar mejor lo que necesito agrego una captura de pantalla de la parte de peso de la aplicación MiFit. Ejemplo de la aplicación MiFit

Hasta ahora he puesto varias SeekBar juntas, pero no logro obtener el resultado que quiero, pues el color de fondo de las barras se hace transparente y son muy delgadas. Intenté agregar un fondo personalizado a las barras para solucionar lo del color, pero eso le agrega un padding a las SeekBar que las separa entre si. Esto es lo que he logrado hacer: Diseño con varias SeekBar juntas

Este es el código que uso para las SeekBar:

<androidx.appcompat.widget.AppCompatSeekBar
                        android:id="@+id/sbGood"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:max="100"
                        android:paddingStart="0dp"
                        android:paddingEnd="0dp"
                        android:progressBackgroundTint="@color/dark_green"
                        android:progressBackgroundTintMode="add"
                        android:progressTint="@color/dark_green"
                        android:splitTrack="false"
                        android:thumb="@drawable/mpsbmi_progress_good"
                        app:layout_constraintBottom_toBottomOf="@+id/sbLow"
                        app:layout_constraintEnd_toStartOf="@id/sbOver"
                        app:layout_constraintStart_toEndOf="@+id/sbLow"
                        app:layout_constraintTop_toTopOf="@+id/sbLow" />

¿Tienen alguna sugerencia o conocen algún componente que me permita conseguir el diseño que estoy buscando?

1 respuesta 1

1

No creo que sea necesario usar varias Seekbar juntas. Si nomás quieres cambiar el fondo con varios colores, puedes usar lo siguiente en una Seekbar. La solución en sí la he tomado de esta respuesta, pero aquí la adapté a tus necesidades usando Kotlin:

class ProgressDrawable(private val context: Context) : Drawable() {

    private var mPaint: Paint = Paint()

    override fun onLevelChange(level: Int): Boolean {
        invalidateSelf()
        return true
    }

    override fun draw(canvas: Canvas) {
        val b: Rect = bounds
        val width: Int = b.width()
        for (i in 0 until NUM_RECTS) {
            val left = width * i / NUM_RECTS
            val right = (if (i == 0) 1 else left) * width / NUM_RECTS
            mPaint.color = when (i) {
                0 -> ContextCompat.getColor(context, R.color.blue1)
                1 -> ContextCompat.getColor(context, R.color.green)
                2 -> ContextCompat.getColor(context, R.color.lime)
                3 -> ContextCompat.getColor(context, R.color.yellow)
                4 -> ContextCompat.getColor(context, R.color.orange)
                else -> ContextCompat.getColor(context, R.color.red)
            }

            canvas.drawRect(left.toFloat(), b.top+12f, right.toFloat(), b.bottom-12f, mPaint)
        }
    }

    override fun setAlpha(alpha: Int) {}
    override fun setColorFilter(cf: ColorFilter?) {}
    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }

    companion object {
        private const val NUM_RECTS = 6
    }
}

Aquí los colores:

<color name="blue1">#669DE6</color>
<color name="green">#51b691</color>
<color name="lime">#acf86c</color>
<color name="yellow">#fbfc5f</color>
<color name="orange">#f5b257</color>
<color name="red">#f26674</color>

simplemente se la añades en tu Activity o Fragment de la siguiente manera:

findViewById<AppCompatSeekBar>(R.id.sbGood).background = ProgressDrawable(this)

Y solo quedaría hacer los tints transparentes. Añade esto a tu Seekbar:

android:backgroundTint="@android:color/transparent"
android:progressTint="@android:color/transparent"
1
  • 1
    Funcionó muy bien, el diseño se muestra casi justo como lo quería. Muchas gracias! Sólo hice una pequeña corrección, la primera barra mantiene un padding para el thumb, sin embargo, la última barra se dibuja pasando ese padding, así que cambié la asignación de right por esta: val right = left + width / NUM_RECTS Con esa modificación el diseño queda excelente. De nuevo, muchas gracias! Commented el 23 mar. 2021 a las 8:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.