Android LinearLayout Problem with wrapping content

I have the following linearlayout for a listitem.

    <ImageView android:id="@+id/icon" 
                   android:src="@android:drawable/ic_input_add"  
                   android:layout_height="wrap_content"  
                   android:layout_width="22px"  
                   android:layout_marginTop="4px"  
                   android:layout_marginRight="4px"  
                   android:layout_marginLeft="1px" />

    <LinearLayout android:id="@+id/linearLayout1"  
                      android:orientation="vertical"  
                      android:layout_height="wrap_content" 
                      android:layout_width="wrap_content">

        <TextView android:layout_width="wrap_content"  
                      android:text="LongerTextView" 
                      android:id="@+id/textView1" 
                      android:layout_height="wrap_content"/>

        <TextView android:layout_width="wrap_content" 
                      android:text="TextView" 
                      android:id="@+id/textView2" 
                      android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout android:id="@+id/linearLayout2" 
                      android:layout_height="match_parent"  
                      android:layout_width="fill_parent" 
                      android:gravity="right">

        <ImageView android:layout_marginTop="4px" 
                       android:src="@android:drawable/ic_input_add"    
                       android:layout_marginLeft="1px"  
                       android:layout_height="wrap_content"   
                       android:layout_marginRight="1px" 
                       android:id="@+id/icon2" 
                       android:layout_width="22px"/>
    </LinearLayout>

The layout is supposed to show an image on the left and all the way on the right, with two text items between. This works fine, as long as the text does not become wider than screen. As soon as the text is longer my right icon gets pushed off the screen.

The text is supposed to wrap to a new line and both the lef开发者_StackOverflow社区t and right icon are supposed to always show.

How can I achieve this?

Try to use Relative Layouts

Inside a Relative Layout, you can specify an image (with id: imgLeft for example) with layout_alignParentLeft="true", that will stay on the left

Then another image (imgRight) with layout_alignParentRight="true", that will stay on the right

and then the linear layout containing the texts with: layout_toLeftOf="@id/imgRight" and layout_toRightOf="imgLeft"

I have redesigned your xml as per your requirement. Use the following code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <ImageView
        android:id="@+id/icon"
        android:src="@android:drawable/ic_input_add"
        android:layout_height="wrap_content"
        android:layout_width="22px"
        android:layout_marginTop="4px"
        android:layout_marginRight="4px"
        android:layout_marginLeft="1px"></ImageView>
        <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:gravity="right"
        android:layout_alignParentRight="true">
        <ImageView
            android:layout_marginTop="4px"
            android:src="@android:drawable/ic_input_add"
            android:layout_marginLeft="1px"
            android:layout_height="wrap_content"
            android:layout_marginRight="1px"
            android:id="@+id/icon2"
            android:layout_width="wrap_content"></ImageView>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_toRightOf="@+id/icon"
        android:layout_toLeftOf="@+id/linearLayout2">
        <TextView
            android:layout_width="wrap_content"
            android:text="LongerTextView"
            android:id="@+id/textView1"
            android:layout_height="wrap_content"></TextView>
        <TextView
            android:layout_width="wrap_content"
            android:text="TextView"
            android:id="@+id/textView2"
            android:layout_height="wrap_content"></TextView>
    </LinearLayout>


</RelativeLayout>

Donot forget to vote if my response is helpful for you.

Thanks Deepak

IIRC (not tested, but I can do in about 8 hours) you can lose the third LinearLayout (the one that wraps the second ImageView). Then set the android:gravity of the LinearLayout that wraps the TextViews to center.