Repeating RatingBar wonkiness in a ListView using RelativeLayout

Question

Here is some xml for a row in a ListView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:padding="6dip">
<ImageView android:id="@+id/cover" android:layout_width="64dip"
    android:layout_height="64dip" android:layout_alignParentTop="true"
    android:layout_alignParentBottom="true" android:layout_marginRight="6dip" />
<TextView android:id="@+id/loan" style="@style/DetailsLabel.Small"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_toRightOf="@id/cover" android:layout_alignParentRight="true" />
<TextView android:id="@+id/title" style="@style/DetailsLabel.Small"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_toRightOf="@id/cover" android:layout_alignParentRight="true"
    android:layout_alignParentTop="true" android:layout_above="@id/loan"
    android:layout_alignWithParentIfMissing="true" android:gravity="center_vertical"
    android:singleLine="true" android:ellipsize="end" />
<RatingBar android:id="@+id/ratingBarIndicator" style="?android:attr/ratingBarStyleSmall"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_toRightOf="@id/cover" android:layout_below="@id/title"
    android:layout_alignParentRight="true" android:gravity="center_vertical" />

And here is the result:

(That's a plain Donut 1.6).

What I'm trying to achieve is a cover on the left, followed by a title, rating bar, and optional loan status on the right. As you can see the RatingBar is repeating endlessly (it should only have five stars); and whenever there IS a loan status set, the title disappears. How can I fix my XML to achieve the effect I want?

Answer 1

You might take a look at your layout in Heirarchy Viewer (found in the tools folder of the SDK) to get an idea of what is going wrong.

Personally, to achive that layout I would use a few LinearLayouts instead of a RelativeLayout. I find RelativeLayouts to be very confusing and hard to get right (but that is just my opinion).

For example:

<LinearLayout 
  android:orientation="horizontal" 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content">
  <ImageView
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"/>
  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
       <TextView android:id="@+id/loan" .../>
       <TextView android:id="@+id/title" .../>
       <RatingBar android:layout_width="wrap_content .../>
  </LinearLayout>
</LinearLayout>

If you don't want the loan textView to take up any space when it is empty, you may need to set it's visibility to GONE in getView of your ListView adapter. Try it out though.

Answer 2

I'd start with fixing rating bar as following:

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

Then align it to the right of its parent ( optionally with android:layout_centerVertical="true" ). After that position your title to the right of cover and to the left of rating bar ) And then you can have you Loaned label to be, for example, below title and to the right of cover.