android layout: This tag and its children can be replaced by one <TextView/> and a compound drawable
AndroidLayoutAndroid Problem Overview
When I run layout on a specific XML file, I get this:
This tag and its children can be replaced by one <TextView/>
and a compound drawable
What change should be done for the following xml code:
<LinearLayout android:id="@+id/name_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="@drawable/grouplist_single_left_grey_area" >
<ImageView android:id="@+id/photo_image"
android:layout_width="@dimen/thumbnail_width"
android:layout_height="@dimen/thumbnail_height"
android:paddingBottom="5dip"
android:paddingTop="5dip"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:layout_marginRight="5dip"
android:clickable="true"
android:focusable="true"
android:scaleType="fitCenter"
android:src="@*android:drawable/nopicture_thumbnail"
android:background="@drawable/photo_highlight" />
<TextView android:id="@+id/name"
android:paddingLeft="5dip"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
This is how it looks like on the screen:
The camera icon is the default. Clicking on that will give the user an option to choose another image.
Android Solutions
Solution 1 - Android
To expand on Romain Guy's answer, here is an example.
Before:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="5dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My Compound Button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/my_drawable" />
</LinearLayout>
After:
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawableRight="@drawable/my_drawable" android:padding="5dp" />
Solution 2 - Android
Merge the TextView
and the ImageView
into one, by using TextView's setCompoundDrawable*()
methods, or using android:drawableLeft
.
Solution 3 - Android
Thought I would try to get some extra puntos for this as well: you can add padding between the image and the text using android:drawablePadding
. https://stackoverflow.com/a/6671544/1224741
Solution 4 - Android
Add tools:ignore="UseCompoundDrawables"
to <LinearLayout>
.
Solution 5 - Android
Sometimes it is possible to replace ImageView
(or multiple) and TextView
with one TextView
with compound drawable(s). There are NOT many parameters which can be applied to compound drawable using native API and this TextViewRichDrawable library, but if you can manage one TextView instead of using LinearLayout you should definitely use it.
The list of attributes and parameters which can be applied to compound drawables:
Size: (YES, really):
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:compoundDrawableHeight="24dp"
app:compoundDrawableWidth="24dp"/>
Even set vector resource as drawable:
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:drawableTopVector="@drawable/some_vector_drawble"
app:drawableEndVector="@drawable/another_vector_drawable" />
Drawable's Padding using native API android:drawablePadding
-> link
Here is an example:
Solution 6 - Android
A LinearLayout
which contains an ImageView
and a TextView
can
be more efficiently handled as a compound drawable (a single
TextView
, using the drawableTop
, drawableLeft
, drawableRight
and/or drawableBottom
attributes to draw one or more images
adjacent to the text).
If the two widgets are offset from each other with margins, this
can be replaced with a drawablePadding
attribute.
There's a lint quickfix to perform this conversion in the Eclipse plugin.
From: Android Official API docs!
Solution 7 - Android
When I followed the code above, text inside the TextView doesn't set properly. You need to set its gravity to center|start to achieve what shown in the asked question.
The textview looks like this:
<TextView
android:id="@+id/export_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableLeft="@drawable/up_arrow"
android:drawableStart="@drawable/up_arrow"
android:gravity="center|start"
android:text="....."
android:textSize="@dimen/font_size15" >
</TextView>
Solution 8 - Android
the latest correct way at time of writing to add a compound drawable is using app:drawableStartCompat
rather than android:drawableLeft
.
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawablePadding="5dp"
app:drawableStartCompat="@drawable/my_drawable" />
Solution 9 - Android
You can refer this code for example
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/myName"
android:textAlignment="center"
android:textColor="@color/myColor"
app:drawableTopCompat="@drawable/image_name" />
Solution 10 - Android
If you don't want to change the ImageView and TextView, you can change the version in the AndroidManifest.xml as:
<uses-sdk`
android:minSdkVersion="8"
android:targetSdkVersion="18"
/>
If your version is android:targetSdkVersion="17" change it s "18".
Hope this will rectify. I did it and got it right
Solution 11 - Android
I don't know if this is an efficient solution. But using <androidx.appcompat.widget.LinearLayoutCompat>
to wrap the imageView
and TextView
instead of <LinearLayout>
will fix this error. Also by using LinearLayoutCompat
, you will be able to adjust the image's width and height which you can't when using a drawableRight
, drawableLeft
, drawableTop
or drawableBottom
inside a TextView
.
Solution 12 - Android
This warning is rather misleading. You can use a compound drawable using a TextView
as others have suggested but it doesn't necessarily give you the desired result. You have very littler control over how you want your button to look like using a compound drawable, so it is better to just add tools:ignore="UseCompoundDrawables"
and ignore this warning.
Solution 13 - Android
Another approach is embed the ViewImage into another LinearLayout (allow handle it with alone id):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/blue_3"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp" />
</LinearLayout>
<TextView
android:id="@+id/tvPrompt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp"
android:text="@string/xy" />
Solution 14 - Android
This tag and its children can be replaced by one <TextView/> and a compound drawable
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:contentDescription="."
android:padding="3dp"
android:src="@drawable/tab_home_btn">
</ImageView>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="#ffffff">
</TextView>
</LinearLayout>