Crear vista estilo leyenda en Android


Crear una vista estilo leyenda para resaltar los elementos visuales dentro de un grupo, se puede crear a partir de un TextView añadiendo una imagen delante y cambiar el tinte de color

Layout

<TextView
    android:id="@+id/tvLabel1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTintMode="src_in"
    android:drawableStart="@drawable/ic_circle_24dp"
    android:drawableTint="@color/md_purple_A100"
    android:text="Russia"
    android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
 />

<TextView
    android:id="@+id/tvLabel2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTintMode="src_in"
    android:drawableStart="@drawable/ic_circle_24dp"
    android:drawableTint="@color/md_purple_A100"
    android:text="Canadá"
    android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
 />
...

Crear elemento circular

Si queremos añadir un circulo como referencia, se puede usar el icono de grabación de vídeo, o bien cuadrado del icono parar vídeo.
A continuación ic_cicle_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:pathData="M12,12m-8,0a8,8 0,1 1,16 0a8,8 0,1 1,-16 0"
        android:fillColor="#010101"/>
</vector>

Establecer el elemento circular

Mediante xml se asigna el elemento gráfico en la propiedad android;drawableStart

android:drawableStart="@drawable/ic_circle_24dp"

Colorizar el elemento

Si queremos cambiar el color de cada elemento, lo podemos hacer de dos formas, una directamente con el XML pero solo disponible con la API 23 hacia adelante con la propiedad android:drawableTint cojuntamente con android:drawableTintMode

android:drawableTint="@color/md_purple_A100"
android:drawableTintMode="src_in"

Kotlin

Mediante código Kotlin, podemos usar la siguiente extensión

fun TextView.setDrawableColor(@ColorRes color: Int) {
    compoundDrawablesRelative.filterNotNull().forEach {
        it.colorFilter = PorterDuffColorFilter(ContextCompat.getColor(this.context, color), PorterDuff.Mode.SRC_IN)
    }
}

Su uso

tvLabel1.setDrawableColor(R.color.md_red_400)

Resultado

Publicado por Codelaby

Mobile DevDesigner

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: