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
