Wednesday, March 19, 2014

RatingBar madness and solution!

I've been working with Android recently and I just ran into an irritating "quark" with the RatingBar object and I couldn't find a solution through the usual googling and StackExchange, fortunately I stumbled upon a solution!

The Problem:
The ratingBar has a numStars setting which should indicate the maximum number of stars to display for  a rating. In my instance I have this value set to 5, only problem is it displays a many stars and it can possibly fit into the viewable space.. somewhere around 8 stars, uh... hello, I set it to 5!  I love it when things are easy!


This wont do, So here's the code, perfectly reasonable stuff here. (For details on how to do a custom style check out this great blog post, no point in me rewriting this one.)

 <RatingBar
    android:id="@+id/rtbDvcMgmt"
    style="@style/CustomRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="25dp"
    android:layout_marginTop="5dp"
    android:max="5"
    android:maxHeight="50dp"
    android:minHeight="28dp"
    android:numStars="5"
    android:rating="0.0"

    android:stepSize="1.0" />

This code has nothing wrong with it, so why is it no working as expected? The explanation can be found in the RatingBar source code java doc! 

When using a RatingBar that supports user interaction, placing widgets to the left or right of the RatingBar is discouraged.
What is meant by "discouraged" is it wont work! All sorts of things go wrong, the stars don't fill properly, there are more stars displayed then you requested... Yes don't do this, it doesn't work.

The cause in my case was that I was using a TextView next to the RatingBar because that's the requirement! I also had the whole form laid out in a Tablerow which doesn't play nicely with RatingBar either as I discovered when I moved the RatingBar onto its own row. 

The Solution!
The solution is surprisingly simple. The RatingBar works when it's all by itself snuggled up in a Layout with nothing to the right or left. so I wrapped it in its own LinearLayout INSIDE of the TableRow with a TextView right next to it! That did the Trick! 



<TableRow
       android:id="@+id/tableRowDvcMgmt"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:padding="5sp" >

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           ... />
                
       <LinearLayout
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical" >
                       <RatingBar
                           android:id="@+id/rtbDvcMgmt"
                           style="@style/CustomRatingBar"
                           android:layout_width="wrap_content"
                           android:layout_height="wrap_content"
                           android:layout_marginRight="25dp"
                           android:layout_marginTop="5dp"
                           android:max="5"
                           android:maxHeight="50dp"
                           android:minHeight="28dp"
                           android:numStars="5"
                           android:rating="0.0"
                           android:stepSize="1.0" />
       </LinearLayout>
</TableRow>