Question

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 left and right icon are supposed to always show.

How can I achieve this?

Answer 1

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”