Space Between stars of ratingBar

Question

I need insert a space between the stars of my ratingBar, example the ratingbar is well:

but I need it thus:

how i can do this?

Answer 1

I don't know if it will be useful anymore, but I made a custom library which allows you to change space beetwen stars programatically and in XML (among other stuff): SimpleRatingBar.

It features:

• Fully working android:layout_width: it can be set to wrap_content, match_parent or abritary dp.
• Arbitrary number of stars.
• Arbitrary step size.
• Size of stars can be controlled exactly or by setting a maximum size.
• Customizable colors in normal state (border, fill and background of stars and rating bar).
• Customizable colors in pressed state (border, fill and background of stars and rating bar).
• Customizable size separation between stars.
• Customizable border width of stars.
• Customizable stars corner radius.
• Allows to set OnRatingBarChangeListener
• Stars fill can be set to start from left to right or from right to left (RTL language support).
• AnimationBuilder integrated in the view to set rating programatically with animation.

Here is a preview of it.

In your case, you would just have to do:

ratingbar.setStarsSeparation(20, Dimension.DP);

or, for example, in pixels:

ratingbar.setStarsSeparation(100, Dimension.PX);

You can find it either in jcenter or in Maven Central. So in your build.gradle file just add to your dependencies:

compile 'com.iarcuschin:simpleratingbar:0.1.+'

Answer 2

You have a next property.

android:progressDrawable = "@drawable/rating_stars"
android:indeterminateDrawable = "@drawable/rating_stars"

@drawable/rating_stars :

<?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_empty" />
    <item android:id="@+android:id/secondaryProgress"
          android:drawable="@drawable/star_empty" />
    <item android:id="@+android:id/progress"
          android:drawable="@drawable/star" />
</layer-list>

star_empty and star are the images which are in your drawable directory. So, you can change star and star_empty in a graphic editor and add a spassing if you need.

Answer 3

Just use the custom icon for it and do use the style , i mean Photoshop it as you want it to look and replace with the system rating style icon.

Answer 4

I think you'd have to grab a copy of the systems star png file and manually add the padding that you want to it with a photoshop / gimp / some other editor.

Answer 5

I agree to Tim i applied same logic and it worked. Here in my project i am using my own star images for the star ratin I made star images having extra space (padding) on the right side that resulted in space between the stars

Answer 6

You can use Custom SVG and Set Your Separation value

By using this class, you can fix Android custom SVG RatingBar and set Drawable End by replacing value(I marked this value as There_You_Can_Set_Your_Value) inside the class.

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.graphics.drawable.shapes.Shape
import android.util.AttributeSet
import android.view.Gravity
import androidx.appcompat.graphics.drawable.DrawableWrapper
import androidx.appcompat.widget.AppCompatRatingBar

class RatingBarSvg @JvmOverloads
constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = R.attr.ratingBarStyle,
) : AppCompatRatingBar(context, attrs, defStyleAttr) {

    private var mSampleTile: Bitmap? = null

    private val drawableShape: Shape
        get() {
            val roundedCorners = floatArrayOf(5f, 5f, 5f, 5f, 5f, 5f, 5f, 5f)
            return RoundRectShape(roundedCorners, null, null)
        }

    init {
        val drawable = tileify(progressDrawable, false) as LayerDrawable
        //drawable.findDrawableByLayerId(android.R.id.background).setColorFilter(backgroundTintColor, PorterDuff.Mode.SRC_ATOP);
        //drawable.findDrawableByLayerId(android.R.id.progress).setColorFilter(progressTintColor, PorterDuff.Mode.SRC_ATOP);
        progressDrawable = drawable
    }

    /**
     * Converts a drawable to a tiled version of itself. It will recursively
     * traverse layer and state list drawables.
     */
    @SuppressLint("RestrictedApi")
    private fun tileify(drawable: Drawable, clip: Boolean): Drawable {
        if (drawable is DrawableWrapper) {
            var inner: Drawable? = drawable.wrappedDrawable
            if (inner != null) {
                inner = tileify(inner, clip)
                drawable.wrappedDrawable = inner
            }
        } else if (drawable is LayerDrawable) {
            val numberOfLayers = drawable.numberOfLayers
            val outDrawables = arrayOfNulls<Drawable>(numberOfLayers)

            for (i in 0 until numberOfLayers) {
                val id = drawable.getId(i)
                outDrawables[i] = tileify(
                    drawable.getDrawable(i),
                    id == android.R.id.progress || id == android.R.id.secondaryProgress
                )
            }

            val newBg = LayerDrawable(outDrawables)

            for (i in 0 until numberOfLayers) {
                newBg.setId(i, drawable.getId(i))
            }

            return newBg

        } else if (drawable is BitmapDrawable) {
            val tileBitmap = drawable.bitmap
            if (mSampleTile == null) {
                mSampleTile = tileBitmap
            }

            val shapeDrawable = ShapeDrawable(drawableShape)
            val bitmapShader = BitmapShader(
                tileBitmap,
                Shader.TileMode.REPEAT, Shader.TileMode.CLAMP
            )
            shapeDrawable.paint.shader = bitmapShader
            shapeDrawable.paint.colorFilter = drawable.paint.colorFilter
            return if (clip)
                ClipDrawable(
                    shapeDrawable, Gravity.START,
                    ClipDrawable.HORIZONTAL
                )
            else
                shapeDrawable
        } else {
            return tileify(getBitmapDrawableFromVectorDrawable(drawable), clip)
        }

        return drawable
    }

    private fun getBitmapDrawableFromVectorDrawable(drawable: Drawable): BitmapDrawable {
        val bitmap = Bitmap.createBitmap(
            drawable.intrinsicWidth + (**There_You_Can_Set_Your_Value**).toInt(), //dp between svg images  //* resources.displayMetrics.density
            drawable.intrinsicHeight,
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(bitmap)
        drawable.setBounds(0, 0, drawable.intrinsicWidth, drawable.intrinsicHeight)
        drawable.draw(canvas)
        return BitmapDrawable(resources, bitmap)
    }

    @Synchronized
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        if (mSampleTile != null) {
            val width = mSampleTile!!.width * numStars
            setMeasuredDimension(
                resolveSizeAndState(width, widthMeasureSpec, 0),
                measuredHeight
            )
        }
    }
}