Easy Tutorial
❮ Linux Shell Brackets Features Es6 Array ❯

2.3.9 RatingBar (Star Rating Bar)

Category Android Basic Tutorial

Introduction to This Section:

>

Wasn't the SeekBar from the last section quite easy? The RatingBar (star rating bar) we're learning about in this section is also very simple. I believe those who have shopped on Taobao are not unfamiliar with this. When you receive a package from the seller, there is often a small piece of paper inside, saying something like "give a five-star review and get a rebate of a certain amount of money". When rating, you can use our star rating bar. Let's take a look at the official documentation first. Official Documentation: RatingBar We can see that this thing has the same class structure as SeekBar, and it is also a subclass of ProgressBar:

That is to say, it also has the relevant properties of ProgressBar. Next, let's explore the unique properties of RatingBar!


1. Basic Usage of RatingBar:

Let's first take a look at what the native SeekBar looks like in 5.0:

—Related Attributes:

android:isIndicator: Whether it is used as an indicator, which users cannot change, default is false android:numStars: How many stars are displayed, must be an integer android:rating: The default rating value, must be a floating point number android:stepSize: The value each rating increases by, must be a floating point number

In addition to the above, there are two styles for us to choose from, but it is not recommended to use them because both of these styles are quite ugly... They are: style="?android:attr/ratingBarStyleSmall" and style="?android:attr/ratingBarStyleIndicator"

—Event Handling: Just set the OnRatingBarChangeListener event for the RatingBar, and then override the onRatingChanged() method!

Implementation Code is as follows:

public class MainActivity extends AppCompatActivity {
    private RatingBar rb_normal;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rb_normal = (RatingBar) findViewById(R.id.rb_normal);
        rb_normal.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                Toast.makeText(MainActivity.this, "rating:" + String.valueOf(rating),
                        Toast.LENGTH_LONG).show();
            }
        });
    }
}

2. Customization:

>

Hehe, we often don't use stars as the standard for rating. Let's change it~ Change the stars to something else, such as smiley faces, with two materials:

Next, just like the previous SeekBar, write a layer-list file:

ratingbar_full.xml:

<?xml version="1.0" encoding="utf-8"?>
&lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:drawable="@mipmap/ic_rating_off1" />
    <item android:id="@android:id/secondaryProgress"
        android:drawable="@mipmap/ic_rating_off1" />
    <item android:id="@android:id/progress"
        android:drawable="@mipmap/ic_rating_on1" />
</layer-list>

Then in the style.xml, customize the RatingBar Style, add this to style.xml:

<style name="roomRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/ratingbar_full</item>
        <item name="android:minHeight">24dip</item>
        <item name="android:maxHeight">24dip</item>
    </style>

Finally, set the Ratingbar component in the layout:

<RatingBar
        android:id="@+id/rb_normal"
        style="@style/roomRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Running Effect Picture:

Well, the effect is quite good, as for the spacing issue, it is necessary to process the pictures, that is, reserve some space on the left and right when cutting the pictures~!


Summary of This Section:

Okay, that's it for the use of RatingBar, which is quite similar to the previous SeekBar, quite easy~ Yeah, thank you~

-1.0 Android Basic Tutorial

-[

❮ Linux Shell Brackets Features Es6 Array ❯