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

Question

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.

+1, because this situation looks more complex than can be handled by compound drawable. If you hadn't accepted Romain's answer, you might have gotten a more in-depth answer. — AlbeyAmakiir, Aug 07 '12 at 06:20

score 173 · Accepted Answer · answered Jan 13 '12 at 22:43

173

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

answered Jan 13 '12 at 22:43

NPike

13,136
12
63
80

58

Nifty. But what if I need to set properties on the drawable, like define it to 60dip x 60dip? – Kyle Clegg Apr 25 '12 at 00:09
4

Hey look at that, all I had to do was search. http://stackoverflow.com/a/6671544/1224741 – QED Aug 08 '12 at 01:40
@KyleClegg, It is possible with a custom library. See my answer - http://stackoverflow.com/a/41347470/2308720 – Oleksandr Dec 27 '16 at 15:01
The last commit of this project was three years ago, it is not maintained, I guess. – lubrum Jan 27 '21 at 12:40

score 107 · Answer 2 · edited Jun 01 '14 at 23:02

107

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

edited Jun 01 '14 at 23:02

Sam R.

16,027
12
69
122

answered Jul 09 '10 at 16:06

Romain Guy

97,993
18
219
200

33

Could you point me to an example illustrating how that can be done? I am not sure how all the attributes in the ImageView can be accommodated in android:drawableLeft. Thank you – pdilip Jul 09 '10 at 19:19
1

What about ImageViews attributes like scaleType ? – neteinstein Aug 30 '12 at 11:24
3

How do I increase the gap between the image and the text? – TharakaNirmana Oct 09 '13 at 07:23
2

setCompoundDrawable*() not working, use setCompoundDrawablesWithIntrinsicBounds() instead – Kimo_do Nov 02 '13 at 23:40
1

@Kimo_do, `setCompoundDrawable()` will not take care of your drawable as it is, you have to call `setBounds` on it (see [API](http://developer.android.com/reference/android/widget/TextView.html#setCompoundDrawables%28android.graphics.drawable.Drawable,%20android.graphics.drawable.Drawable,%20android.graphics.drawable.Drawable,%20android.graphics.drawable.Drawable%29)). For setting it, you can get the previous bounds using the `TextView.getCompoundDrawables()`, accessing the correct drawable index and finally calling `getBounds()`. – Avinash R Jan 05 '14 at 20:22

score 20 · Answer 3 · edited May 23 '17 at 12:34

20

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

edited May 23 '17 at 12:34

Community

1
1

answered Aug 08 '12 at 01:41

QED

9,803
7
50
87

score 4 · Answer 4 · answered Oct 17 '18 at 12:59

4

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

answered Oct 17 '18 at 12:59

CoolMind

26,736
15
188
224

Oleksandr · Answer 5 · 2017-05-10T07:04:16.663

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:

score 2 · Answer 6 · edited Jul 31 '13 at 09:03

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!

score 2 · Answer 7 · answered May 18 '22 at 13:15

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

score 1 · Answer 8 · answered Jul 28 '15 at 08:36

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>

score 1 · Answer 9 · answered Aug 25 '20 at 13:29

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

score 0 · Answer 10 · edited Jan 01 '14 at 00:05

0

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

edited Jan 01 '14 at 00:05

Shehroz

347
2
9
25

answered Sep 07 '13 at 07:38

Dunken_sai

343
3
7

score 0 · Answer 11 · answered Feb 07 '22 at 18:27

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.

score 0 · Answer 12 · answered May 19 '22 at 17:21

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.

score -2 · Answer 13 · answered Nov 25 '12 at 02:46

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

Now what would be the advantage of this? And why are you setting the namespace twice? — ygesher, Oct 19 '14 at 11:52

score -5 · Answer 14 · answered Feb 17 '14 at 07:48

    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>

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

14 Answers14

Linked