android layout: This tag and its children can be replaced by one <TextView/> and a compound drawable

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:

enter image description here

The camera icon is the default. Clicking on that will give the user an option to choose another image.

51192 次浏览

Merge the TextView and the ImageView into one, by using TextView's setCompoundDrawable*() methods, or using android:drawableLeft.

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" />

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

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" />

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!

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

    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>

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>

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:

textView rich drawable

Add tools:ignore="UseCompoundDrawables" to <LinearLayout>.

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" />

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.

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" />

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.