TextView stretches and pushes another view offscreen in horizontal LinearLayout

Question

I have a horizontal LinearLayout with 2 items: a TextView and a RatingBar. I want the RatingBar to always be directly to the right of the TextView. But I want the TextView to stretch as much as it needs until there is no more room, then I want it to add lines.

Here is a visual representation of How it should look, showing different widths of text:

| TextView - RatingView ------------- |

| TextViewTextView - RatingView ----- |

| TextViewTextViewTextVi - RatingView |
| ewTextViewTextView                  |

However, the RatingBar keeps getting pushed offscreen as the TextView stretches. This is what it does instead:

| TextView - RatingView ------------- |

| TextViewTextView - RatingView ----- |

| TextViewTextViewTextViewTextViewTex |
| tView                               |

Here's the XML:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextViewTextViewTextViewTextViewTextViewTextViewTextView"
        android:id="@+id/titleTextView"
        android:textSize="15sp"
        android:textColor="@color/blue"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="8dp"
        android:layout_weight="1"/>

    <RatingBar
        android:layout_width="106dp"
        android:layout_height="20dp"
        android:id="@+id/ratingBar2"
        android:numStars="5"
        android:rating="0"
        style="@style/customRatingBar"
        android:layout_gravity="center_vertical"
        android:isIndicator="true" />

</LinearLayout>

I have tried adding layout_weight to either view or both. Can't seem to get anything to work. Should I use a RelativeLayout instead? I couldn't get that to work either.

Answer 1

This is a surprisingly difficult task! As @zimeriljazia suggests, making the RatingBar stick to the right and have the TextView wrap to the left is easy with a RelativeLayout, for the TextView just alignParentRight and for the RatingBar use layout_toRightOf="@id/ratingbar".

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <RatingBar
        android:id="@+id/ratingBar1"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"        
        android:numStars="5"
        android:rating="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ratingBar1"
        android:text="@string/long" />

</RelativeLayout>

If you're just using the RatingBar for display (not for input) then you could use TextView.setCompoundDrawables() or one of its cousins. Send null for all but the right one, and for that set your rating image programmatically. You'll need to specify layout_width to be wrap_content, though.