Rating Progress chart with 5 progress bar

Question

I need to draw a rating chart for my reviews on app. separatly for every star like 1,2,3,4, and 5. for reference i uploaded a image please suggest me n=best way.

Answer 1

Hi You can do something like below like taking 5 RatingBar and 5 ProgressBar.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp">

    <RatingBar
        android:id="@+id/rating_5"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:isIndicator="true"
        android:numStars="5"
        android:rating="5" />

    <ProgressBar
        android:id="@+id/progress_5"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="50" />

    <RatingBar
        android:id="@+id/rating_4"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_5"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="4"
        android:rating="4" />

    <ProgressBar
        android:id="@+id/progress_4"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_5"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="50" />


    <RatingBar
        android:id="@+id/rating_3"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_4"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="3"
        android:rating="3" />

    <ProgressBar
        android:id="@+id/progress_3"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_4"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="30" />


    <RatingBar
        android:id="@+id/rating_2"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_3"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="2"
        android:rating="2" />

    <ProgressBar
        android:id="@+id/progress_2"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_3"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="20" />


    <RatingBar
        android:id="@+id/rating_1"
        style="@style/Widget.AppCompat.RatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_2"
        android:layout_alignRight="@+id/rating_5"
        android:isIndicator="true"
        android:numStars="1"
        android:rating="1" />

    <ProgressBar
        android:id="@+id/progress_1"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rating_2"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/rating_5"
        android:progress="10" />

</RelativeLayout>

Here is the output:

Hope it will help you. Thanks.