ImageButton right to a TextView

Question

I have a RelativeLayout and two elements: a TextView and an ImageButton. The ImageButton should be located to the right of the TextView, so I use the android:layout_toRightOf attribute. Both elements use android:layout_width="wrap_content" for their width.

Now my problem: Only when the text in the TextView reaches the full width of the screen, it wraps to the next line. But at this time, the ImageButton is already hidden on the right side of the screen (because due to the wrap_content, the TextView uses the full width of the parent).

So what I would like to do is to say: The ImageButton is alway to the right of the TextView, but it has a fixed size (lets say 100dp) and this size needs to be reserved for the ImageButton, so the text needs to wrap as soon as the ImageButton "touches" the right side of the screen.

I already tried maxWidth and maxEms, but seems not to work as expected (it's always that size then, not only when the text reaches the max-width)

Hope u know what I mean, otherwise I post code and screenshots!

Answer 1

It would help if you posted your code. But from what I can tell, you know the image's position is fixed, so why not have the TextView 's position depend on the ImageView .

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="id/image" />
</RelativeLayout>

Answer 2

Try this trick (untested):

1. Create an empty View with the exact size of your ImageButton
2. Align this empty View to parentRight in your RelativeLayout
3. Set your TextView toLeftOf the empty View and also alignParentLeft
4. ImageButton still toRightOf the TextView

Done!

Answer 3

I would create a LinearLayout (not for the whole thing, just for these two elements) and use layout weights to fill space. Something like this:

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal">

   <TextView
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"/>

   <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>
</LinearLayout>

The layout weight of 1 will cause the TextView to try and fill as much of the LinearLayout as it can. However, since you have the ImageButton set to wrap content in the same LinearLayout, the TextView can only fill the space between the left side of the screen, and the start of the ImageButton.

Answer 4

You can try this:

You can replace your TextView and ImageButton with Single TextView, which can reduce your views.

How?

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/ic_launcher"
        android:gravity="center_vertical"
        android:text="Your Text OverHere" />

Hope this helps you somehow...