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

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

Posted by: admin March 11, 2020 Leave a comment

Questions:

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.

How to&Answers:

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

Answer:

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

Answer:

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

Answer:

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

Answer:

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!

Answer:

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>

Answer:

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

Answer:

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

Answer:

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

Answer:

    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>