How to develop box like Rating bar like zomato android app?

Question

I want to develop Rating bar like zomato android application. In which the rating bar box changes it's color according to selection. if only one box is selected then it's color is Read and gradually we select more box it became Green.

Here I attached snap of zomato android app's screen portion which shows Rating exactly I would like to develop this type of Rating and Review System.

Answer 1

That's a simple horizontal LinearLayout with 9 TextViews, each of them having grey as the default color. Aditionally you can create an array of strings, each string being a color code. This is the quick and dirty solution.

When clicking on a TextView, you can find out its position in the LinearLayout and color each view before it with the corresponding color code in the array, along with the selected view, and the others remain grey.

I had a similar problem once with a progress bar consisting of 10 sections, and instead of looking for a library I made something quick like this and it worked just fine.

Answer 2

I found solution for that we need to make Custom Rating bar Here bellow code shows Custom class of Rating bar. which full fill all requirement which mention in Question.

public class MyCustomRatingBar extends android.support.v7.widget.AppCompatRatingBar {

private int[] iconArrayActive =  {
        R.drawable.ic_square_sel_1,
        R.drawable.ic_square_sel_2,
        R.drawable.ic_square_sel_3,
        R.drawable.ic_square_sel_4,
        R.drawable.ic_square_sel_5,
        R.drawable.ic_square_sel_6,
        R.drawable.ic_square_sel_7,
        R.drawable.ic_square_sel_8,
        R.drawable.ic_square_sel_9
};

private int[] iconArrayInactive =  {
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel,
        R.drawable.ic_square_unsel
};

public MyCustomRatingBar (Context context) {
    super(context);
    init();
}

public MyCustomRatingBar (Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public MyCustomRatingBar (Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    this.setMax(9);
    this.setNumStars(9);
    this.setStepSize(1.0f);
    this.setRating(1.0f);
}

private Bitmap getBitmapFromVectorDrawable(Context context, int drawableId) {
    Drawable drawable = ContextCompat.getDrawable(context, drawableId);
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
        drawable = (DrawableCompat.wrap(drawable)).mutate();
    }

    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 bitmap;
}

@Override
protected synchronized void onDraw(Canvas canvas) {

    int stars = getNumStars();
    float rating = getRating();
    float x = 0;

    Bitmap bitmap;
    Paint paint = new Paint();
    int W = getWidth();
    int H = getHeight();
    int icon_size = (W/stars)-0;

    int y_pos = (H/2)-icon_size/2;

    int delta = ((H > W)?(H):(W))/(stars);
    int offset = (W-(icon_size+(stars-1)*delta))/2;

    for(int i = 0; i < stars; i++) {
        if ((int) rating-1 >= i) {
            bitmap = getBitmapFromVectorDrawable(getContext(), iconArrayActive[i]);
        } else {
            bitmap = getBitmapFromVectorDrawable(getContext(), iconArrayInactive[i]);
        }
        x = offset+(i*delta);
        Bitmap scaled = Bitmap.createScaledBitmap(bitmap, icon_size, icon_size, true);
        canvas.drawBitmap(scaled, x, y_pos, paint);
        canvas.save();
    }
}

}