Drawables descentrados
A veces, nos encontramos con
drawables vectoriales que no conseguimos que salgan centrados en nuestro diseño por más que modifiquemos el xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:orientation="horizontal"> <ImageView android:id="@+id/password_status_lowercase_char_bullet" android:layout_width="32dp" android:layout_height="32dp" android:src="@drawable/ic_close_m" android:scaleType="centerInside" android:layout_gravity="center_vertical"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_gravity="center_vertical" android:text="Texto muy largo.\nCon más de una línea." android:textColor="#000000" android:textSize="@dimen/sp12" /> </LinearLayout> |
|
 |
Como puedes ver, la
ImageView está centrada con
android:layout_gravity="center_vertical" pero el contenido no lo está, a pesar de estar usando
android:scaleType="centerInside". Cuando esto pase, debe saltarnos la alarma de que tal vez no es cosa de nuestro
layout, ni del
padding ni del
scaleType, si no que lo que sucede es que el vector está descentrado en sí mismo. Es decir, que tenga espaciado de más por alguno de los lados y por eso sea imposible centrarlo. El espaciado es parte del vector y como tal, el dibujo está descentrado. Esto sucede porque el lienzo (
viewport) mide una determinada anchura o altura pero el trazado dibujado en él no está centrado:
|
|
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="120" android:viewportHeight="120"> <path android:fillColor="#FF000000" android:pathData="M42.8,39.5l24.5,24.5l-2.8,2.8l-24.5,-24.5l-24.5,24.5 l-2.8,-2.8l24.5,-24.5l-24.5,-24.5l2.8,-2.8l24.5,24.5l24.5,-24.5l2.8,2.8z"/> </vector> |
|
 Pero tal vez no lo apreciemos. |
Podemos comprobar esto fácilmente pintando un recuadro bajo el dibujo, que ocupe todo el lienzo, añadiendo este elemento al vector:
|
|
<path android:strokeColor="#FF000000" android:fillColor="#FFFFFF" android:strokeWidth="1" android:pathData="M 0,0 L 120,0 L 120,120 L 0,120 z"/> |
Este código hace lo siguiente (la letra representa qué acción quieres realizar, y los dos números son las coordenadas
x e
y de destino de la acción):
M 0,0: mueve el lápiz a la esquina superior izquierda.L 120,0: pinta una línea hasta la esquina superior derecha.L 120,120: pinta una línea hasta la esquina inferior derecha.L 0,120: pinta una línea hasta la esquina inferior izquierda.z: cierra el trazado (pinta una línea hasta las coordenadas en las que empezó el trazado).
Para utilizar este código en otro vector, solo tienes que sustituir el 120 por el valor de viewportWidth cuando esté en la posición de la x, y por el de viewportHeight cuando esté en la posición de la y.
Así quedaría el drawable:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="120" android:viewportHeight="120"> <path android:strokeColor="#FF000000" android:fillColor="#FFFFFF" android:strokeWidth="1" android:pathData="M 0,0 L 120,0 L 120,120 L 0,120 z"/> <path android:fillColor="#FF000000" android:pathData="M42.8,39.5l24.5,24.5l-2.8,2.8l-24.5,-24.5l-24.5,24.5l-2.8,-2.8 l24.5,-24.5l-24.5,-24.5l2.8,-2.8l24.5,24.5l24.5,-24.5l2.8,2.8z"/> </vector> |
|
 |
Como puedes ver, el trazado no se está pintando en el centro del lienzo. Así que debes pedir a tu diseñador que vuelva a exportar el vector pero esta vez centrado.
