Fancy ListViews Redux: 0.9 SDK and RatingBar

You may remember way back when (e.g., July 2008) when Building ‘Droids featured a six-post series on creating fancy ListView implementations, culminating in a CheckListView widget that could be used as a drop-in replacement for ListView.

They’re ba-ack!

Specifically, today, let’s take a look at the 0.9 SDK’s impact on the Fancy ListView series, and update one of the examples to take advantage of a new widget: the RatingBar.

In many respects, the code and techniques introduced in the Fancy ListViews series are still valid and relevant in the world of the 0.9 SDK. Perhaps the biggest change is that ViewInflate became LayoutInflater, requiring some search-and-replace edits of your older M5 source code. But the concepts of supplying custom views, of recycling views using the ViewHolder/ViewWrapper pattern, and the like are still very useful, even after the 0.9 SDK.

Of course, as promised, the 0.9 SDK has its own take on having checkable ListView widgets; this will be covered in a future blog post.

For now, though, let’s revisit the last sample from the Fancy ListViews series and update it to eschew the checkbox, switching to the new RatingBar.

RatingBar is a widget designed to users to provide a rating to something, such as rating a music track or a blog post or an Android development book up on Amazon.com (*cough*). A rating is a float, from 0 to a specified maximum (android:numStars). You can specify what the granularity of the rating is (android:stepSize) and whether it is merely an indicator (android:isIndicator) or if it is a user-input element to allow users to set the rating by sliding their finger across the stars.

As with just about any moderately-sized widget, the RatingBar can be used as part of a row in a ListView. In fact, replacing the CheckBox in CheckListView with a RatingBar is fairly straight-forward:

1. public class RateableWrapper extends AdapterWrapper {
2. Context ctxt=null;
3. float[] rates=null;
5. public RateableWrapper(Context ctxt, ListAdapter delegate) {
6. super(delegate);
8. this.ctxt=ctxt;
9. this.rates=new float[delegate.getCount()];
11. for (int i=0;i
12. this.rates[i]=2.0f;
13. }
14. }
16. public View getView(int position, View convertView, ViewGroup parent) {
17. ViewWrapper wrap=null;
18. View row=convertView;
20. if (convertView==null) {
21. LinearLayout layout=new LinearLayout(ctxt);
22. RatingBar rate=new RatingBar(ctxt);
24. rate.setNumStars(3);
25. rate.setStepSize(1.0f);
27. View guts=delegate.getView(position, null, parent);
29. layout.setOrientation(LinearLayout.HORIZONTAL);
31. rate.setLayoutParams(new LinearLayout.LayoutParams(
32. LinearLayout.LayoutParams.WRAP_CONTENT,
33. LinearLayout.LayoutParams.FILL_PARENT));
34. guts.setLayoutParams(new LinearLayout.LayoutParams(
35. LinearLayout.LayoutParams.FILL_PARENT,
36. LinearLayout.LayoutParams.FILL_PARENT));
38. RatingBar.OnRatingBarChangeListener l=new RatingBar.OnRatingBarChangeListener() {
39. public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromTouch) {
40. rates[(Integer)ratingBar.getTag()]=rating;
41. }
42. };
44. rate.setOnRatingBarChangeListener(l);
46. layout.addView(rate);
47. layout.addView(guts);
49. wrap=new ViewWrapper(layout);
50. wrap.setGuts(guts);
51. layout.setTag(wrap);
53. rate.setTag(new Integer(position));
54. rate.setRating(rates[position]);
56. row=layout;
57. }
58. else {
59. wrap=(ViewWrapper)convertView.getTag();
60. wrap.setGuts(delegate.getView(position, wrap.getGuts(), parent));
61. wrap.getRatingBar().setTag(new Integer(position));
62. wrap.getRatingBar().setRating(rates[position]);
63. }
65. return(row);
66. }
67. }

• Create and configure the RatingBar when it is lazy-instantiated in getView()
• Hook in a RatingBar.OnRatingBarChangeListener to update a float[] of ratings, rather than a boolean[] of checkbox states
• Update the rating in the RatingBar when it is recycled
• Rename all the classes to something more logical (e.g., CheckableWrapper becomes RateableWrapper)

Unfortunately, the stock style for RatingBar is a bit big for lists:

You can use a ratingBarStyleSmall style to shrink the size, but then the RatingBar becomes read-only, meaning you would need some other means to let people specify the rating itself.