How to create Custom Ratings bar in Android

Question

Hello all i need to perform Ratings in my application    SO i need to create custom Ratings bar    Can Anyone Help me in this

User · Answer

You can create custom material rating bar by defining drawable xml using material icon of your choice and then applying custom drawable to rating bar using progressDrawable attribute.

For infomration about customizing rating bar see http://www.zoftino.com/android-ratingbar-and-custom-ratingbar-example

Below drawable xml uses thumbs up icon for rating bar.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <bitmap
            android:src="@drawable/thumb_up"
            android:tint="?attr/colorControlNormal" />
    </item>
    <item android:id="@android:id/secondaryProgress">
        <bitmap
            android:src="@drawable/thumb_up"
            android:tint="?attr/colorControlActivated" />
    </item>
    <item android:id="@android:id/progress">
        <bitmap
            android:src="@drawable/thumb_up"
            android:tint="?attr/colorControlActivated" />
    </item>
</layer-list>

User · Answer

You can use  erdomester  s given solution for this  But if you are facing issues with rating bar height then you can use ratingbar s icons height programmatically   In Kotlin   val drawable   ContextCompat getDrawable context  R drawable rating filled  val drawableHeight   drawable intrinsicHeight  rating bar layoutParams height   drawableHeight

User · Answer

The following code works    Override protected synchronized void onDraw Canvas canvas        int stars   getNumStars        float rating   getRating        try               bitmapWidth   getWidth     stars            catch  Exception e                bitmapWidth   getWidth              float x   0       for  int i   0  i  lt  stars  i                  Bitmap bitmap          Resources res   getResources            Paint paint   new Paint             if   int  rating  gt  i                        bitmap   BitmapFactory decodeResource res  starColor                     else                       bitmap   BitmapFactory decodeResource res  starDefault                     Bitmap scaled   Bitmap createScaledBitmap bitmap  getHeight    getHeight    true           canvas drawBitmap scaled  x  0  paint           canvas save            x    bitmapWidth             super onDraw canvas

User · Answer

I made something simular  a RatingBar with individual rating icons  I m using VectorDrawables for the rating icons but you could use any type of drawable  https   github com manmountain emoji-ratingbar

User · Answer

You can try this rating bar with much better animations  SmileyRating

User · Answer

Making the custom rating bar with layer list and selectors is complex, it is better to override the RatingBar class and create a custom RatingBar. createBackgroundDrawableShape() is the function where you should put your empty state png and createProgressDrawableShape() is the function where you should put your filled state png.

Note: This code will not work with svg for now.

public class CustomRatingBar extends RatingBar {

    @Nullable
    private Bitmap mSampleTile;

    public ShapeDrawableRatingBar(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        setProgressDrawable(createProgressDrawable());
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (mSampleTile != null) {
            final int width = mSampleTile.getWidth() * getNumStars();
            setMeasuredDimension(resolveSizeAndState(width, widthMeasureSpec, 0), getMeasuredHeight());
        }
    }

    protected LayerDrawable createProgressDrawable() {
        final Drawable backgroundDrawable = createBackgroundDrawableShape();
        LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{
            backgroundDrawable,
            backgroundDrawable,
            createProgressDrawableShape()
        });

        layerDrawable.setId(0, android.R.id.background);
        layerDrawable.setId(1, android.R.id.secondaryProgress);
        layerDrawable.setId(2, android.R.id.progress);
        return layerDrawable;
    }

    protected Drawable createBackgroundDrawableShape() {
        final Bitmap tileBitmap = drawableToBitmap(getResources().getDrawable(R.drawable.ic_star_empty));
        if (mSampleTile == null) {
            mSampleTile = tileBitmap;
        }
        final ShapeDrawable shapeDrawable = new ShapeDrawable(getDrawableShape());
        final BitmapShader bitmapShader = new BitmapShader(tileBitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
        shapeDrawable.getPaint().setShader(bitmapShader);
        return shapeDrawable;
    }

    protected Drawable createProgressDrawableShape() {
        final Bitmap tileBitmap = drawableToBitmap(getResources().getDrawable(R.drawable.ic_star_full));
        final ShapeDrawable shapeDrawable = new ShapeDrawable(getDrawableShape());
        final BitmapShader bitmapShader = new BitmapShader(tileBitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
        shapeDrawable.getPaint().setShader(bitmapShader);
        return new ClipDrawable(shapeDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
    }

    Shape getDrawableShape() {
        final float[] roundedCorners = new float[]{5, 5, 5, 5, 5, 5, 5, 5};
        return new RoundRectShape(roundedCorners, null, null);
    }

    public static Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }

        int width = drawable.getIntrinsicWidth();
        width = width > 0 ? width : 1;
        int height = drawable.getIntrinsicHeight();
        height = height > 0 ? height : 1;

        final Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        final Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);

        return bitmap;
    }
}

User · Answer

For SVG RatingBar I used RatingBar custom Vector Drawables superimposing and the answer of erdomester here  This solution traverses all drawables inside SvgRatingBar view of your layout  so in RecyclerView it has an overhead  SvgRatingBar java  import android annotation SuppressLint  import android content Context  import android graphics Bitmap  import android graphics BitmapShader  import android graphics Canvas  import android graphics Shader  import android graphics drawable BitmapDrawable  import android graphics drawable ClipDrawable  import android graphics drawable Drawable  import android graphics drawable LayerDrawable  import android graphics drawable ShapeDrawable  import android graphics drawable VectorDrawable  import android graphics drawable shapes RoundRectShape  import android graphics drawable shapes Shape  import android os Build  import android util AttributeSet  import android view Gravity   import androidx appcompat graphics drawable DrawableWrapper  import androidx vectordrawable graphics drawable VectorDrawableCompat   import com example R     Your R java file for R attr ratingBarStyle   public class SvgRatingBar extends androidx appcompat widget AppCompatRatingBar        private Bitmap sampleTile       public SvgRatingBar Context context            this context  null              public SvgRatingBar Context context  AttributeSet attrs            this context  attrs  R attr ratingBarStyle              public SvgRatingBar Context context  AttributeSet attrs  int defStyleAttr            super context  attrs  defStyleAttr           init               private void init             LayerDrawable drawable    LayerDrawable  createTile getProgressDrawable    false           setProgressDrawable drawable                         Converts a drawable to a tiled version of itself  It will recursively        traverse layer and state list drawables               SuppressLint  quot RestrictedApi quot       private Drawable createTile Drawable drawable  boolean clip            if  drawable instanceof DrawableWrapper                Drawable inner     DrawableWrapper  drawable  getWrappedDrawable                if  inner    null                    inner   createTile inner  clip                     DrawableWrapper  drawable  setWrappedDrawable inner                           else if  drawable instanceof LayerDrawable                LayerDrawable background    LayerDrawable  drawable              final int n   background getNumberOfLayers                Drawable   outDrawables   new Drawable n                for  int i   0  i  lt  n  i                      int id   background getId i                   outDrawables i    createTile background getDrawable i                            id    android R id progress    id    android R id secondaryProgress                              LayerDrawable newBg   new LayerDrawable outDrawables                for  int i   0  i  lt  n  i                      newBg setId i  background getId i                               return newBg             else if  drawable instanceof BitmapDrawable                final BitmapDrawable bitmapDrawable    BitmapDrawable  drawable              final Bitmap tileBitmap   bitmapDrawable getBitmap                if  sampleTile    null                    sampleTile   tileBitmap                             final ShapeDrawable shapeDrawable   new ShapeDrawable getDrawableShape                 final BitmapShader bitmapShader   new BitmapShader tileBitmap                      Shader TileMode REPEAT  Shader TileMode CLAMP               shapeDrawable getPaint   setShader bitmapShader               shapeDrawable getPaint   setColorFilter bitmapDrawable getPaint   getColorFilter                 return  clip    new ClipDrawable shapeDrawable  Gravity START                      ClipDrawable HORIZONTAL    shapeDrawable            else if  Build VERSION SDK INT  gt   Build VERSION CODES LOLLIPOP  amp  amp  drawable instanceof VectorDrawable                return createTile getBitmapDrawableFromVectorDrawable drawable   clip             else if  drawable instanceof VectorDrawableCompat                   API 19 support              return createTile getBitmapDrawableFromVectorDrawable drawable   clip                     return drawable             private BitmapDrawable getBitmapDrawableFromVectorDrawable Drawable drawable            Bitmap bitmap   Bitmap createBitmap drawable getIntrinsicWidth    drawable getIntrinsicHeight    Bitmap Config ARGB 8888           Canvas canvas   new Canvas bitmap           drawable setBounds 0  0  canvas getWidth    canvas getHeight             drawable draw canvas           return new BitmapDrawable getResources    bitmap               Override     protected synchronized void onMeasure int widthMeasureSpec  int heightMeasureSpec            super onMeasure widthMeasureSpec  heightMeasureSpec           if  sampleTile    null                final int width   sampleTile getWidth     getNumStars                setMeasuredDimension resolveSizeAndState width  widthMeasureSpec  0                       getMeasuredHeight                          private Shape getDrawableShape             final float   roundedCorners   new float   5  5  5  5  5  5  5  5           return new RoundRectShape roundedCorners  null  null            In your layout   lt com example common control SvgRatingBar     android id  quot   id rate quot      android layout width  quot wrap content quot      android layout height  quot wrap content quot      android minHeight  quot 13dp quot      android numStars  quot 5 quot      android progressDrawable  quot  drawable rating bar quot      android rating  quot 3 5 quot      android stepSize  quot 0 01 quot        gt   You also have to create rating bar xml with two SVG drawables   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt layer-list xmlns android  quot http   schemas android com apk res android quot  gt       lt item         android id  quot  android id background quot          android drawable  quot  drawable ic unfilled star quot            gt        lt item         android id  quot  android id secondaryProgress quot          android drawable  quot  drawable ic unfilled star quot            gt        lt item         android id  quot  android id progress quot          android drawable  quot  drawable ic filled star quot            gt    lt  layer-list gt    If you see in Design Split view only one star  refresh layout   In Kotlin  import android annotation SuppressLint import android content Context import android graphics Bitmap import android graphics BitmapShader import android graphics Canvas import android graphics Shader import android graphics drawable   import android graphics drawable shapes RoundRectShape import android os Build import android util AttributeSet import android view Gravity import androidx appcompat graphics drawable DrawableWrapper import androidx appcompat widget AppCompatRatingBar import androidx vectordrawable graphics drawable VectorDrawableCompat import com example R     Your R java file for R attr ratingBarStyle   class SvgRatingBar  JvmOverloads constructor context  Context  attrs  AttributeSet    null                                               defStyleAttr  Int   R attr ratingBarStyle        AppCompatRatingBar context  attrs  defStyleAttr         private var sampleTile  Bitmap    null     private val roundedCorners   floatArrayOf 5f  5f  5f  5f  5f  5f  5f  5f      private val roundRectShape   RoundRectShape roundedCorners  null  null       init           progressDrawable   createTile progressDrawable  false  as LayerDrawable                       Converts a drawable to a tiled version of itself  It will recursively        traverse layer and state list drawables              private fun createTile drawable  Drawable  clip  Boolean   Drawable           when               drawable is DrawableWrapper - gt                     SuppressLint  quot RestrictedApi quot                   var inner   drawable wrappedDrawable                 if  inner    null                        inner   createTile inner  clip                       SuppressLint  quot RestrictedApi quot                       drawable wrappedDrawable   inner                                   drawable                           drawable is LayerDrawable - gt                    val n   drawable numberOfLayers                 val outDrawables   arrayOfNulls lt Drawable gt  n                  for  i in 0 until n                        val id   drawable getId i                      outDrawables i    createTile drawable getDrawable i                           id    android R id progress    id    android R id secondaryProgress                                    val newBg   LayerDrawable outDrawables                  for  i in 0 until n                        newBg setId i  drawable getId i                                     newBg                           drawable is BitmapDrawable - gt                    val tileBitmap   drawable bitmap                 if  sampleTile    null                        sampleTile   tileBitmap                                   val bitmapShader   BitmapShader tileBitmap  Shader TileMode REPEAT                      Shader TileMode CLAMP                  val shapeDrawable   ShapeDrawable roundRectShape  apply                       paint shader   bitmapShader                     paint colorFilter   drawable paint colorFilter                                   if  clip  ClipDrawable shapeDrawable  Gravity START  ClipDrawable HORIZONTAL                  else shapeDrawable                           Build VERSION SDK INT  gt   Build VERSION CODES LOLLIPOP  amp  amp  drawable is VectorDrawable - gt                    createTile getBitmapDrawableFromVectorDrawable drawable   clip                            drawable is VectorDrawableCompat - gt                       Pre-Lollipop support                  createTile getBitmapDrawableFromVectorDrawable drawable   clip                            else - gt  drawable                private fun getBitmapDrawableFromVectorDrawable drawable  Drawable   BitmapDrawable           val bitmap   Bitmap createBitmap drawable intrinsicWidth  drawable intrinsicHeight              Bitmap Config ARGB 8888          val canvas   Canvas bitmap          drawable setBounds 0  0  canvas width  canvas height          drawable draw canvas          return BitmapDrawable resources  bitmap              Synchronized override fun onMeasure widthMeasureSpec  Int  heightMeasureSpec  Int            super onMeasure widthMeasureSpec  heightMeasureSpec          if  sampleTile    null                val width   sampleTile   width   numStars             setMeasuredDimension resolveSizeAndState width  widthMeasureSpec  0                   measuredHeight

User · Answer

Edit  Have a look at custom rating in motorola http   community developer motorola com t5 Android-App-Development-for custom-rating-bar-style-using-android-s-ratingBar-small-style td-p 10462  Updated  styles xml  This must be located in your values folder    lt  xml version  1 0  encoding  utf-8   gt     lt resources gt       lt style name  foodRatingBar  parent   android style Widget RatingBar  gt          lt item name  android progressDrawable  gt  drawable food rating bar full lt  item gt          lt item name  android minHeight  gt 23dip lt  item gt          lt item name  android maxHeight  gt 25dip lt  item gt      lt  style gt     lt  resources gt    food rating bar full xml  This file must be in Drawable folder    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android id    id background      android drawable   drawable food ratingbar full empty    gt       lt item android id    id secondaryProgress      android drawable   drawable food ratingbar full empty    gt       lt item android id    id progress      android drawable   drawable food ratingbar full filled    gt   lt  layer-list gt    food ratingbar full empty xml  This file must be inside Drawable folder    lt  xml version  1 0  encoding  utf-8   gt    lt  -- This is the rating bar drawable that is used to  show a filled cookie  -- gt   lt selector xmlns android  http   schemas android com apk res android  gt    lt item android state pressed  true        android state window focused  true        android drawable   drawable cookiee    gt    lt item android state focused  true        android state window focused  true        android drawable   drawable cookiee    gt    lt item android state selected  true        android state window focused  true        android drawable   drawable cookiee    gt    lt item android drawable   drawable cookiee    gt    lt  selector gt    food ratingbar full filled xml  This file must be located in Drawable folder    lt  xml version  1 0  encoding  utf-8   gt     lt  -- This is the rating bar drawable that is used to  show a unfilled cookie  -- gt   lt selector xmlns android  http   schemas android com apk res android  gt    lt item android state pressed  true        android state window focused  true        android drawable   drawable cookie    gt    lt item android state focused  true        android state window focused  true        android drawable   drawable cookie    gt    lt item android state selected  true        android state window focused  true        android drawable   drawable cookie    gt    lt item android drawable   drawable cookie    gt    lt  selector gt    main xml file should look like     lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android orientation  vertical      android layout width  fill parent      android layout height  fill parent  gt        lt RatingBar android id    id ratingBar1          style   style foodRatingBar          android layout width  wrap content          android layout height  wrap content  gt        lt  RatingBar gt   lt  LinearLayout gt    MainActivity class should look like    import android app Activity  import android os Bundle  import android widget RatingBar  import android widget RatingBar OnRatingBarChangeListener  import android widget Toast   public class MainActivity extends Activity       Called when the activity is first created      RatingBar rb    Override public void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout main        rb  RatingBar findViewById R id ratingBar1        rb setOnRatingBarChangeListener new OnRatingBarChangeListener              Override         public void onRatingChanged RatingBar ratingBar  float rating                  boolean fromUser                   TODO Auto-generated method stub                 Toast makeText getApplicationContext   Float toString rating  Toast LENGTH LONG  show                               I have used two images   cookie jpg  cookiee jpg  This two images are of same size one is used for identifying selected Rating Bar and other for identifying unselected RatingBar

User · Answer

You can have 5 imageview with defalut image as star that is empty and fill the rating bar with half or full image base on rating    public View getView int position  View convertView  ViewGroup parent         LayoutInflater inflater    LayoutInflater  mContext getSystemService Context LAYOUT INFLATER SERVICE        View grid inflater inflate R layout griditem  parent  false        imageView  ImageView grid findViewById R id grid prod        imageView setImageResource imgId position         imgoff   ImageView grid findViewById R id offer        tv  TextView grid findViewById R id grid text        tv setText namesArr position         tv setTextColor Color BLACK        tv setPadding 0  2  0  0      sta  ImageView grid findViewById R id imageView       sta1  ImageView grid findViewById R id imageView1       sta2  ImageView grid findViewById R id imageView2       sta3  ImageView grid findViewById R id imageView3       sta4  ImageView grid findViewById R id imageView4       Float rate rateFArr position        if rate  5    rate  4 5                sta setImageResource R drawable full  small           sta1 setImageResource R drawable full  small           sta2 setImageResource R drawable full  small           sta3 setImageResource R drawable full  small           if rate  4 5                        sta4 setImageResource R drawable half small                     else                       sta4 setImageResource R drawable full  small                       if rate  4    rate  3 5                sta setImageResource R drawable full  small           sta1 setImageResource R drawable full  small           sta2 setImageResource R drawable full  small        if rate  3 5                        sta3 setImageResource R drawable half small                     else                       sta3 setImageResource R drawable full  small                       if rate  3    rate  2 5                sta setImageResource R drawable full  small           sta1 setImageResource R drawable full  small          if rate  2 5                        sta2 setImageResource R drawable half small                     else                       sta2 setImageResource R drawable full  small                       if rate  2    rate  1 5            sta setImageResource R drawable full  small        if rate  1 5                        sta1 setImageResource R drawable half small                     else                       sta1 setImageResource R drawable full  small                       if rate  1    rate  0 5                if rate  1          sta setImageResource R drawable full  small           else             sta setImageResource R drawable half small              if rate gt 5                sta setImageResource R drawable full  small           sta1 setImageResource R drawable full  small           sta2 setImageResource R drawable full  small           sta3 setImageResource R drawable full  small           sta4 setImageResource R drawable full  small                 rb  RatingBar findViewById R id grid rating          rb setRating rateFArr position            return grid

User · Answer

first add images to drawable      the first picture  ratingbar staroff png  and the second  ratingbar staron png   After  create  ratingbar xml  on res drawable   lt  xml version  1 0  encoding  utf-8   gt   lt  --suppress AndroidDomInspection -- gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android id    android id background          android drawable   drawable ratingbar empty    gt       lt item android id    android id secondaryProgress          android drawable   drawable ratingbar empty    gt       lt item android id    android id progress          android drawable   drawable ratingbar filled    gt   lt  layer-list gt    the next xml the same on res drawable   ratingbar empty xml    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt        lt item android state pressed  true          android state window focused  true          android drawable   drawable ratingbar staroff    gt        lt item android state focused  true          android state window focused  true          android drawable   drawable ratingbar staroff    gt        lt item android state selected  true          android state window focused  true          android drawable   drawable ratingbar staroff    gt        lt item android drawable   drawable ratingbar staroff    gt    lt  selector gt     ratingbar filled    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt        lt item android state pressed  true          android state window focused  true          android drawable   drawable ratingbar staron    gt        lt item android state focused  true          android state window focused  true          android drawable   drawable ratingbar staron    gt        lt item android state selected  true          android state window focused  true          android drawable   drawable ratingbar staron    gt        lt item android drawable   drawable ratingbar staron    gt    lt  selector gt    the next to do  add these lines of code on res values styles   lt style name  CustomRatingBar  parent   android style Widget RatingBar  gt       lt item name  android progressDrawable  gt  drawable ratingbar lt  item gt       lt item name  android minHeight  gt 18dp lt  item gt       lt item name  android maxHeight  gt 18dp lt  item gt   lt  style gt    Now  already can add style to ratingbar resource           lt RatingBar             android layout width  wrap content              android layout height  wrap content              style    style CustomRatingBar              android id    id ratingBar              android numStars  5              android stepSize  0 01              android isIndicator  true   gt    finally on your activity only is declare   RatingBar ratingbar    RatingBar  findViewById R id ratingbar   ratingbar setRating 3 67f

User · Answer

I need to add my solution which is WAY eaiser than the one above. We don't even need to use styles.

Create a selector file in the drawable folder:

custom_ratingbar_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/star_off" />

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

 <item android:id="@android:id/progress"
    android:drawable="@drawable/star_on" />

</layer-list>

In the layout set the selector file as progressDrawable:

 <RatingBar
        android:id="@+id/ratingBar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:progressDrawable="@drawable/custom_ratingbar_selector"
        android:numStars="8"
        android:stepSize="0.2"
        android:rating="3.0" />

And that's all we need.

User · Answer

I investigated the original source  and here is my result    styles xml  res values    lt  -- RatingBar -- gt   lt style name  RatingBar  parent   android style Widget RatingBar  gt       lt item name  android progressDrawable  gt  drawable ratingbar full lt  item gt       lt item name  android indeterminateDrawable  gt  drawable ratingbar full lt  item gt       lt item name  android minHeight  gt 13 4dp lt  item gt       lt item name  android maxHeight  gt 13 4dp lt  item gt   lt  style gt    ratingbar full xml  res drawable    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android id   android id background  android drawable   drawable btn rating star off normal    gt       lt item android id   android id secondaryProgress  android drawable   drawable btn rating star off normal    gt       lt item android id   android id progress  android drawable   drawable btn rating star on normal    gt   lt  layer-list gt    btn rating star off normal png  res drawable-xxhdpi         btn rating star on normal png  res drawable-xxhdpi       activity ratingbar xml  res layout    lt  xml version  1 0  encoding  utf-8   gt   lt FrameLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent  gt        lt androidx appcompat widget AppCompatRatingBar         android id    id ratingbar          style   style RatingBar          android layout width  wrap content          android layout height  13 4dp          android isIndicator  false          android numStars  5          android rating  2 6          android secondaryProgressTint   00000000          android stepSize  0 1    gt   lt  FrameLayout gt    This is the result        Note that I added the actual height 13 4dp  of ratingbar in layout height property  because if it is wrap content it will draw lines below stars   in my case only in a preview of Android Studio

User · Answer

When creating a custom rating bar that displays a solid gradient line running on a SeekBar-like track, rather than stars, I also encountered a problem related to the vertical centering of the background (track drawable). This is the flawed drawable code I used originally (which generated the problem), as suggested by Android developer and other StackOverflow entries:

<?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/seekbar_track"/>
    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/seekbar_progress2"
            android:scaleWidth="100%" />
    </item>

    <item android:id="@android:id/progress" >
        <clip android:clipOrientation="horizontal" android:gravity="left" >
            <shape>
                <gradient
                    android:startColor="@color/ratingbar_bg_start"
                    android:centerColor="@color/ratingbar_bg_center"
                    android:centerX="0.5"
                    android:endColor="@color/ratingbar_bg_end"
                    android:angle="0"
                    />
            </shape>
        </clip>
    </item>    

 </layer-list>

The problem here is the first item, which relates to the background of the custom RatingBar. Many entries will tell you to set the layout_minHeight feature to some large value to avoid a vertical spatial disconnect between the thumb and its track. This was not the solution for me - when viewed on a tablet, the background was still drawing to its smaller phone-based size - so the track was consistently positioned well above the center of the RatingBar track. The solution is to remove this entry in the RatingBar drawable, so it now looks like this:

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

    <item android:id="@android:id/secondaryProgress">
        <scale
            android:drawable="@drawable/seekbar_progress2"
            android:scaleWidth="100%" />
    </item>

    <item android:id="@android:id/progress" >
        <clip android:clipOrientation="horizontal" android:gravity="left" >
            <shape>
                <gradient
                    android:startColor="@color/ratingbar_bg_start"
                    android:centerColor="@color/ratingbar_bg_center"
                    android:centerX="0.5"
                    android:endColor="@color/ratingbar_bg_end"
                    android:angle="0"
                    />
            </shape>
        </clip>
    </item>    

 </layer-list>

Then, in the style definition of the custom RatingBar, set the layout_background to the the track drawable. Mine looks like this:

<style name="styleRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:background">@drawable/seekbar_track</item>
    <item name="android:progressDrawable">@drawable/abratingbar</item>
    <item name="android:thumb">@drawable/abseekbar_thumb</item>
    <item name="android:minHeight">@dimen/base_29dp</item>
    <item name="android:maxHeight">@dimen/base_29dp</item>
    <item name="android:layout_marginLeft">@dimen/base_10dp</item>
    <item name="android:layout_marginRight">@dimen/base_10dp</item>
    <item name="android:layout_marginTop">@dimen/base_10dp</item>
    <item name="android:layout_marginBottom">@dimen/base_10dp</item>
    <item name="android:scaleType">fitXY</item>
</style>

(Previously, the background setting here was undefined.).

This is the entry in my layout, which uses both the style and the drawables:

<RatingBar
    android:id="@+id/ratingbar_vote"
    style="@style/styleRatingBar"
    android:hint="@string/ratingbar_vote"
    android:contentDescription="@string/ratingbar_vote"
    android:numStars="5"
    android:rating="5"
    android:stepSize="1"
    android:layout_width="match_parent"
    android:layout_height="@dimen/base_29dp"
    android:layout_marginLeft="@dimen/base_120dp"
    android:layout_gravity="bottom|right" />

So, to summarize, do not set the background (track) feature in your custom RatingBar drawable, set it in the layout_background feature of your custom RatingBar style. This ensures the track is always vertically centered in a horizontal RatingBar. (Remember, in this custom RatingBar, instead of using stars or other isolated images as the rating, I'm using a gradient line that "grows" or "shrinks" horizontally to display the rating - this rating line uses a SeekBar-like thumb running on a SeekBar-like "track".)

[android] How to create Custom Ratings bar in Android

The answer is

Examples related to android

Tags