Friday, December 02, 2016

Rating Bar

Rating Bar is use to get/indicate rating . For the better user interference this is very important to customize the rating bar according to need of theme. In this tutorial i am covering some steps of rating bar customization. 



 <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
 
Steps to use RatingBar in your project.
  1. Crate a project in android studio.
     
  2. Open your main_activity.xml and update it-

    <?xml version="1.0" encoding="utf-8"?>
    
    <LinearLayout 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:gravity="center"
        android:orientation="vertical"
        tools:context="com.pankaj.ratingbar.MainActivity">
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                                 create simple RatingBar                                -->
        <!--_____________________________________________________-->
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="default rating bar"
            android:textAllCaps="true" />
    
        <RatingBar
            android:id="@+id/rtbDefault"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin" />
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                                 create simple RatingBar                               -->
        <!--_____________________________________________________-->
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="custom rating bar"
            android:textAllCaps="true" />
    
        <RatingBar
            android:id="@+id/rtbCustom"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_margin="@dimen/activity_horizontal_margin"
            android:progressDrawable="@drawable/custom_ratingbar_selector" />
    </LinearLayout>
    
     
     
  3. Now see in your main_activity.xml, there are a custom drawable is used in second ratingbar
     
    android:progressDrawable="@drawable/custom_ratingbar_selector" />
    


  4. So go to your resource directory and select your drawable directory and create new drawable resource file(selector)(drawable/custom_rating_selector.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/heart_empty_pink" />
        <item
            android:id="@android:id/secondaryProgress"
            android:drawable="@drawable/heart_half" />
        <item
            android:id="@android:id/progress"
            android:drawable="@drawable/heart_fill_pink" />
    </layer-list>
    
     
  5. Open your MainActivity.JAVA class and update it -

    package com.pankaj.ratingbar;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.RatingBar;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity implements RatingBar.OnRatingBarChangeListener {
    
        //create objects
        RatingBar rtbDefault, rtbCustom;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //initialize rating bar
            rtbDefault = (RatingBar) findViewById(R.id.rtbDefault);
            rtbCustom = (RatingBar) findViewById(R.id.rtbCustom);
    
            //set number of stars(default is 5)
            rtbDefault.setNumStars(5);
            rtbCustom.setNumStars(5);
    
            //set listeners
            rtbDefault.setOnRatingBarChangeListener(this);
            rtbCustom.setOnRatingBarChangeListener(this);
        }
    
        @Override
        public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
    
            //add switch case to differentiate rating bars
            switch (ratingBar.getId()) {
    
                //A meesage will be shown when rating given by default rating bar
                case R.id.rtbDefault:
                    Toast.makeText(this, "Selected by default rating bar : " + ratingBar.getRating(), Toast.LENGTH_SHORT).show();
                    break;
    
                //A meesage will be shown when rating given by custom rating bar
                case R.id.rtbCustom:
                    Toast.makeText(this, "Selected by custom rating bar : " + ratingBar.getRating(), Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    }
    

  6. Now all the development steps for RatingBar has completed, Please run the application.



  7. Now select any rating from first ratigbar and see the result on screen-

      
     

  8. Now select any rating from second ratingbar and see the result on screen-


     

  9. s



  10.  Good bye, Thanks to read this blog.




No comments:

Post a Comment