Layout Text with Drawable excat and performant
How can I layout a Text with an icon exactly like this:
I did it with this Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="64dp"
android:layout_height="64dp">
<ImageView
android:id="@+id/imgIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:duplicateParentState="true"
android:src="@drawable/delete_icon" />
<TextView
android:id="@+id/txtLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:duplicateParentState="true"
android:text="xxx" />
</RelativeLayout>
But the Android guide says: Use compound drawables - A LinearLayout which contains an ImageView and a TextView can be more efficiently handled as a compound drawable. I have tried, but I couldn't find the layout parameters (size for the image, different paddings for image and text) that I need.
<TextView
android:id="@+id/txtLabel"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal|bottom"
android:duplicateParentState="true"
android:drawableTop="@drawable/delete_icon"
android:paddingTop="8dp"
android:drawablePadding="8dp"
android:text="xxx" />
Here is the result (left with RelativeLayout, right with compound drawable):
If there is a better standard component which provides the necessary parameters, it's acceptable, too.
I tried to do the same.
I got this result (please note that the image has an "optical square", which is smaller than the physical image size):
I'm using my favourite method: the compound drawable.
But:
1 - I prepared some images at different resolutions, so that 32*32 is referred to a standard mdpi (160dpi) resolution, and scaling at different resolutions (xxhdpi is 96*96 px wide and tall)- 2 - I placed these images in the corresponding drawable folders (drawable-ldpi to drawable-xxhdpi). 3 - I corrected the layout a bit, to match.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_margin="0dp"
android:padding="0dp"
>
<TextView
android:id="@+id/txtLabel"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal|bottom"
android:padding="8dp"
android:drawableTop="@drawable/delete_icon"
android:drawablePadding="4dp"
android:text="XXX"
android:textSize="12sp"
/>
</RelativeLayout>
I used all caps letters to better see the spacing between the text and the drawable.
Does it fit your needs?