A tutorial on using Ratingbar to achieve star rating in Android apps _android

Ratingbar Simple Introduction
Ratingbar is based on an extension of the Seekbar (drag bar) and ProgressBar (status bar) to display ratings using a star, and when using the default Ratingbar, the user can set the score by touching/dragging/pressing (such as a remote control). Ratingbar with two models, a small style ratingbarstylesmall, large style for ratingbarstyleindicator, large only suitable for instructions, do not apply to user interaction.
Customize what Ratingbar need to be aware of

Under normal circumstances, the system Ratingbar is far from enough to meet the development needs, we customize a ratingbar based on the picture, before beginning to implement the custom Ratingbar, incidentally say the res directory of the difference between the picture placement directory:

Prior to the Android SDK version 1.5, there was only one drawable directory under the Res directory, and three directories after the Android SDK 1.6, respectively, drawable-hdpi, DRAWABLE-LDPI, DRAWABLE-MDPI, DRAWABLE-XHDPI,
(1) drawable-hdpi contains high-resolution pictures, such as WVGA (480x800), FWVGA (480x854)
(2) drawable-mdpi inside the medium resolution of the picture, such as HVGA (320x480)
(3) drawable-ldpi inside the low resolution of the picture, such as QVGA (240x320)
(4) drawable-xhdpi inside the large resolution of the picture, at least 960DP x 720DP
Because our custom implementation of the Ratingbar inside the use of the star image resolution is relatively low, so in general, we put the picture in drawable-mdpi or drawable-ldpi inside.

The implementation process of custom Ratingbar

First, according to the picture custom a ratingbar background bar, and the picture is placed under the same directory (such as drawable-mdpi), Room_rating_bar.xml

<?xml version= "1.0" encoding= "Utf-8"?> <layer-list xmlns:android=
 "Http://schemas.android.com/apk/res" /android ">
  <item android:id=" @+android:id/background "
  android:drawable=" @drawable/star1 "></ item> <span></span>    
    <item android:id= "@+android:id/secondaryprogress"
    android:drawable = "@drawable/star1" ></item>
    <item android:id= "@+android:id/progress
  android:drawable=" @ Drawable/star2 "></item>
</layer-list>

Backgroud: is used to fill the background picture, and the progress bar is very similar, when we set the highest score (android:numstars), the system will be based on our settings, to draw the background of the stars (if android:numstars= "5", Will draw 5 gray stars)
Progress: is an indicator property (similar to a progress bar, first progress position) that is used to populate a background picture.
Secondaryprogress: The same as the progress of the second progress position (if not defined, the progress bar drag, each time to draw a whole star (light), the second progress (dark) does not cover the first progress after the position, From left to right is not dragged out N.5 star, so the scoring effect is not complete.

Second, by starting with the introduction, we know that the Ratingbar style is switched by style, and in Android we can inherit the custom control type by setting the Style property in the Styles.xml file, as follows Styles.xml

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <style name= "Roomratingbar"
 @ Android:style/widget.ratingbar ">
  <item name=" android:progressdrawable "> @drawable/room_rating_bar </item>
  <item name= "android:minheight" >16dp</item>
  <item name= "Android:maxheight" >16dp</item>
 </style>
</resources>

The Parent property is used to select the inherited parental class, where we inherit the Ratingbar class.
Redefine the progressdrawable attribute (Ratingbar background bar, as we introduced in the first place)
MaxHeight and MinHeight can be set according to our picture pixels or other reference values.

Finally, add the Ratingbar control in the XML configuration file that we need to use Ratingbar.
Main.xml

<ratingbar
  android:id= "@+id/room_ratingbar"
  style= "@style/roomratingbar" android:layout_width= "
  Wrap_content "
  android:layout_height=" wrap_content "
  android:numstars=" 5 "
  android:rating=" 4 "
  android:layout_marginleft= "10DP" >
</RatingBar> 

Scoring function examples
using Seekbar and Ratingbar to achieve the same:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android: paddingbottom= "@dimen/activity_vertical_margin" android:paddingleft= "@dimen/activity_horizontal_margin" Android: paddingright= "@dimen/activity_horizontal_margin" android:paddingtop= "@dimen/activity_vertical_margin" tools: Context= ". Mainactivity "> <seekbar android:id=" @+id/seekbar1 "android:layout_width=" Match_parent "Android:layout" 
  _height= "Wrap_content"/> <ratingbar android:id= "@+id/ratingbar1" android:layout_height= "Wrap_content" Android:layout_width= "Wrap_content" android:layout_below= "@id/seekbar1" android:numstars= "4" android:stepSize= "0 .5 "/> <button android:id=" @+id/button1 "android:layout_height=" wrap_content "Android:layout_width=" Ma Tch_parent "android:layout_below=" @id/ratingbar1 "android:text= "Increase Ratingbar number of stars"/> </RelativeLayout> 

 

Package com.android.xiong.seekbars; 
Import Android.os.Bundle; 
Import android.app.Activity; 
Import Android.view.Menu; 
Import Android.view.View; 
Import Android.view.View.OnClickListener; 
Import Android.widget.Button; 
Import Android.widget.RatingBar; 
Import Android.widget.RatingBar.OnRatingBarChangeListener; 
Import Android.widget.SeekBar; 
 
Import Android.widget.SeekBar.OnSeekBarChangeListener; 
 public class Mainactivity extends activity {private SeekBar seekBar1; 
 Private Ratingbar ratingBar1; 
 
 Private Button button1; 
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
  Setcontentview (R.layout.activity_main); 
  seekbar1= (SeekBar) Findviewbyid (R.ID.SEEKBAR1); 
  Seekbar1.setmax (100); 
  Seekbar1.setsecondaryprogress (20); 
  Seekbar1.setprogress (10); 
  Seekbarchangelistener seek=new Seekbarchangelistener (); 
   
  Seekbar1.setonseekbarchangelistener (Seek); ratingbar1= (Ratingbar) Findviewbyid (R.ID.RATINGBAR1); 
  Setting RATINGBAR5 star Ratingbar1.setnumstars (4); 
  Sets the current number of stars ratingbar1.setrating (1.0f); 
  Set the step length ratingbar1.setstepsize (0.5f) of the Ratingbar score; 
  Ratingbarchangelister rat=new Ratingbarchangelister (); 
   
  Ratingbar1.setonratingbarchangelistener (rat); 
  button1= (Button) Findviewbyid (R.id.button1); 
  Buutonclick bu=new Buutonclick (); 
   
 Button1.setonclicklistener (BU); Class Seekbarchangelistener implements Onseekbarchangelistener {/** * SeekBar the currently fired SeekBar control * progres S current Progress * Fromuser whether the user triggers the user to trigger True or FALSE */@Override public void onprogresschanged (SeekBar SeekBar, in T progress, Boolean Fromuser) {//TODO auto-generated Method stub System.out.println ("Progress:" +progress+ " 
    
  Fromuser: "+fromuser); }//This method represents the method that fires when a drag is started @Override public void Onstarttrackingtouch (SeekBar SeekBar) {//TODO auto-generated met 
    
  Hod stub System.out.println (seekbar.getprogress ()); The method that triggers when the drag stops @OverrIDE public void Onstoptrackingtouch (SeekBar SeekBar) {//TODO auto-generated method stub System.out.println (SE 
  Ekbar.getprogress ()); 
   } class Ratingbarchangelister implements onratingbarchangelistener{/** * Rattingbar The currently fired Ratingbar control * Rating Current number of stars * Fromuser is user triggered/@Override public void onratingchanged (Ratingbar ratingbar, float R Ating, Boolean Fromuser) {//TODO auto-generated Method stub System.out.println ("Rating:" + rating + "fr 
    
  Omuser: "+fromuser); Class Buutonclick implements onclicklistener{@Override public void OnClick (View arg0) {//TOD 
    
  O auto-generated Method Stub ratingbar1.setrating (ratingbar1.getrating () +0.5f); @Override public boolean Oncreateoptionsmenu (Menu menu) {//Inflate the menu; This adds the items to the Act 
  Ion Bar if it is present. 
  Getmenuinflater (). Inflate (R.menu.main, menu); 
 return true;  } 
 
}