Showing posts with label Give Rating in Android. Show all posts
Showing posts with label Give Rating in Android. Show all posts

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.