CODEWITHSUNDEEP
androidandroid-layout
jproffitt
jproffitt

Reputation: 6355

TextView stretches and pushes another view offscreen in horizontal LinearLayout

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.

Upvotes: 6

Views: 1355

Answers (2)

William T. Mallard
William T. Mallard

Reputation: 1660

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.

Upvotes: 2

zimeriljazi
zimeriljazi

Reputation: 42

Try adding 2 relative layouts one for the textview and one for the ratingbar. Align the ratingbar layout to the right of the screen then make the textview layout android:layout_toLeftOf rating bar

Upvotes: 0

Related Questions