Custom Rating Bar in Android

Question

I need to make custom rating bar as shown on the image below.

As you can see I need to make these colorful rectangles instead of stars. Each color represents some rating.

As you can see current rating is 3.5, and its light green. Previous rating is 3.0 and its lighter green. Next rating is 4.0 and it is grey because user didn't selected that rating.

How I can make something like this?

Answer 1

I have done this custom rating bar using views. I agree this is crude way of doing it however I believe it can be done better. You could use it for now. Do let me know if you need the source code.

<LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:weightSum="17" >

        <View
            android:id="@+id/View01"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View02"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View03"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View04"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View05"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View06"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View07"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View08"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />

        <Space
            android:layout_width="5dp"
            android:layout_height="40dp"
            android:layout_weight="1" />

        <View
            android:id="@+id/View09"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="#ff888888"
            android:clickable="true" />
    </LinearLayout>

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.MainActivity);

        view01 = (View) findViewById(R.id.View01);
    view02 = (View) findViewById(R.id.View02);
    view03 = (View) findViewById(R.id.View03);
    view04 = (View) findViewById(R.id.View04);
    view05 = (View) findViewById(R.id.View05);
    view06 = (View) findViewById(R.id.View06);
    view07 = (View) findViewById(R.id.View07);
    view08 = (View) findViewById(R.id.View08);
    view09 = (View) findViewById(R.id.View09);
    tv = (TextView) findViewById(R.id.textView);

    view01.setOnClickListener(this);
    view02.setOnClickListener(this);
    view03.setOnClickListener(this);
    view04.setOnClickListener(this);
    view05.setOnClickListener(this);
    view06.setOnClickListener(this);
    view07.setOnClickListener(this);
    view08.setOnClickListener(this);
    view09.setOnClickListener(this);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
    case R.id.View01:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(Color.GRAY);
        view03.setBackgroundColor(Color.GRAY);
        view04.setBackgroundColor(Color.GRAY);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("0.5");
        break;
    case R.id.View02:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(Color.GRAY);
        view04.setBackgroundColor(Color.GRAY);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("1.0");
        break;
    case R.id.View03:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(Color.GRAY);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("1.5");
        break;
    case R.id.View04:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(Color.GRAY);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("2.0");
        break;
    case R.id.View05:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(Color.GRAY);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("2.5");
        break;
    case R.id.View06:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(Color.GRAY);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("3.0");
        break;
    case R.id.View07:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(0xff00ffff);
        view08.setBackgroundColor(Color.GRAY);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("3.5");
        break;
    case R.id.View08:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(0xff00ffff);
        view08.setBackgroundColor(0xff0080ff);
        view09.setBackgroundColor(Color.GRAY);
        tv.setText("4.0");
        break;
    case R.id.View09:
        view01.setBackgroundColor(0xffff0000);
        view02.setBackgroundColor(0xffff8000);
        view03.setBackgroundColor(0xffffff00);
        view04.setBackgroundColor(0xff80ff00);
        view05.setBackgroundColor(0xff00ff00);
        view06.setBackgroundColor(0xff00ff80);
        view07.setBackgroundColor(0xff00ffff);
        view08.setBackgroundColor(0xff0080ff);
        view09.setBackgroundColor(0xff0000ff);
        tv.setText("4.5");              
        break;
    }
}