Code2care : TechZone Apps & Tutorials

How to create Custom RatingBar Android Programming Tutorial




If you do not want Default RatingBar implementation then you can customize it by creating your own layouts and styles for it.

You need to get 3 star images to be added to your drawable folder.

    1. A Empty (off) star image.
    2. A Half Filled Star image.
    3. A Fully Filled Star image.


Now create a custom xml for RatingBar in Drawable folder,


<?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/star_blank"/>
    <item
        android:id="@+android:id/secondaryProgress"
        android:drawable="@drawable/star_blank"/>
    <item
        android:id="@+android:id/progress"
        android:drawable="@drawable/star_filled"/>

</layer-list>



start_blank.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/star_off" 
          android:state_pressed="true" 
          android:state_window_focused="true"/>

    <item android:drawable="@drawable/star_off" 
          android:state_focused="true" 
          android:state_window_focused="true"/>

    <item android:drawable="@drawable/star_off" 
          android:state_selected="true" 
          android:state_window_focused="true"/>


    <item android:drawable="@drawable/star_off"/>

</selector>



star_filled.xml


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/star" 
        android:state_pressed="true" 
        android:state_window_focused="true"/>
    
    <item android:drawable="@drawable/star" 
        android:state_focused="true" 
        android:state_window_focused="true"/>
    
    <item android:drawable="@drawable/star"
          android:state_selected="true" 
          android:state_window_focused="true"/>
    
    <item android:drawable="@drawable/star"/>

</selector>



Add following to style.xml


<style name="customRatingBar" parent="@android:style/Widget.RatingBar">
  <item name="android:progressDrawable">@drawable/rating_custom_bar</item>
  <item name="android:minHeight">30dip</item>
  <item name="android:maxHeight">30dip</item>
</style>






Layout.xml


<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="com.code2care.example.customratingbarexample.MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="108dp"
        android:text="@string/header_text" />

    <RatingBar
        android:id="@+id/ratingBar1"
        style="@style/customRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="56dp" />

    <TextView
        android:id="@+id/ratingMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_centerVertical="true"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>



MainActivity.java


package com.code2care.example.customratingbarexample;


import android.app.Activity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;


public class MainActivity extends Activity {
	
	
	RatingBar ratingBar;
	TextView rateMessage;
	String ratedValue;
	
	

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        
        ratingBar = (RatingBar) findViewById(R.id.ratingBar1);
		rateMessage = (TextView) findViewById(R.id.ratingMessage);

		ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {

			@Override
			public void onRatingChanged(RatingBar ratingBar, float rating,
					boolean fromUser) {
				
				System.out.println("Hwre");

				ratedValue = String.valueOf(ratingBar.getRating());
				rateMessage.setText("Rating : "
						+ ratedValue + "/5");

			}
		});
        
    }
   
    
  
}



You can download the source code from GitHub : https://github.com/code2care/CustomRatingBarExample



Top











Posts related to android.


1. Share image and text Twitter using your Android Application Programatically

2. The Android Virtual Device 'myEmulator' is currently running an emulator and cannot be deleted.

3. Make Android View Scrollable both Horizontally and Vertically

4. Can we move apps like WhatsApp, Facebook to external MicroSD card

5. Parsing Data for android-21 failed unsupported major.minor version 51.0

6. Android : Prevent App for rotation landscape or portrait

7. ADT quit unexpectedly error on Mac OSX Android Eclipse SDK

8. Android-Failed to install apk on device EOF Timeout Error

9. How to change Android EditText Cursor Color

10. JavaDocs for Android SDK Eclipse IDE

11. Two Buttons next to each other in Android Layout

12. Change Title text for Android Activity using java code

13. How to add Newline to text in Android TextView

14. Android : Unable to load VM from snapshot : Mac OS X Error

15. INVALID FILE NAME: MUST CONTAIN ONLY [a-z0-9_.] Android Eclipse Error

16. Hide Tittle bar and Navigation bar from android activity

17. appcompat_v7 errors after updates to API level 21 Material Theme

18. How to Copy Text to Android Clipboard Programatically ClipboardManager (Both Old and New SDK)

19. [Solution] Running Android Lint has encountered a problem NullPointerException Error

20. Remove Trailing zeros BigDecimal Java

    more...






Popular tags
android
x 175
eclipse
x 29
notepadplusplus
x 20
macosx
x 14
sharepoint
x 14
html
x 14
mac
x 13
androidstudio
x 11




1000+ C Programs     PHP Tutorial     JSON Tutorial     Swift Tutorial     India Pinocdes     About Us     Privacy Policy


Code2care © 2012-17