Android horizontal rectangle review bar

Question

I am struggling to create an rectangle horizontal review bar,photo of what I am trying to achieve.



For this I used MPAAndroidChart, but I ended up with this,



Code:

public class MainActivity extends AppCompatActivity {

    HorizontalBarChart skillRatingChart;

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

    public void setSkillGraph(){
        skillRatingChart = findViewById(R.id.skill_rating_chart);
        skillRatingChart.setDrawBarShadow(false);
        Description description = new Description();
        description.setText("");
        skillRatingChart.setDescription(description);
        skillRatingChart.getLegend().setEnabled(false);
        skillRatingChart.setPinchZoom(false);
        skillRatingChart.setDrawValueAboveBar(false);


        XAxis Xaxis = skillRatingChart.getXAxis();
        Xaxis.setDrawGridLines(false);
        Xaxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        Xaxis.setEnabled(true);
        skillRatingChart.getXAxis().setDrawGridLines(false);
        skillRatingChart.getAxisLeft().setDrawGridLines(false);
        Xaxis.setDrawAxisLine(false);

        final ArrayList<String> xLabels = new ArrayList<>();
        xLabels.add("Pathetic");
        xLabels.add("Poor");
        xLabels.add("Average");
        xLabels.add("Good");
        xLabels.add("Excellent");
        Xaxis.setValueFormatter(new XAxisValueFormatter(xLabels));
        YAxis yright = skillRatingChart.getAxisRight();
        yright.setDrawAxisLine(true);
        yright.setDrawGridLines(false);
        yright.isEnabled();

        //Set bar entries and add necessary formatting
        setGraphData();

        //Add animation to the graph
        skillRatingChart.animateY(2000);


    }
    public void setGraphData() {

        //Add a list of bar entries
        ArrayList<BarEntry> entries = new ArrayList<>();
        entries.add(new BarEntry(0, 3f));
        entries.add(new BarEntry(1, 8f));
        entries.add(new BarEntry(2, 6f));
        entries.add(new BarEntry(3, 30f));
        entries.add(new BarEntry(4, 50f));
        //Note : These entries can be replaced by real-time data, say, from an API

        BarDataSet dataSet = new BarDataSet(entries,"Horizontal Bar");
        BarData data = new BarData(dataSet);
        skillRatingChart.setData(data);
        skillRatingChart.animateXY(2000, 2000);
        skillRatingChart.invalidate();
        dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
        skillRatingChart.setDrawBarShadow(true);
        dataSet.setBarShadowColor(Color.argb(40, 150, 150, 150));


    }
}

Any help will be pleasure to me!. Please help and tell me how can I change this chart to what I am trying to achieve.

Answer 1

You can use this library to show rattings in a great UI already builtin

Add this in your projct level Gradle file

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add this in your module Gradle file

implementation 'com.github.Inconnu08:android-ratingreviews:1.2.0'

Add rattings and revies like this

RatingReviews ratingReviews = (RatingReviews) findViewById(R.id.rating_reviews);

    int colors[] = new int[]{
            Color.parseColor("#0e9d58"),
            Color.parseColor("#bfd047"),
            Color.parseColor("#ffc105"),
            Color.parseColor("#ef7e14"),
            Color.parseColor("#d36259")};

    int raters[] = new int[]{
            new Random().nextInt(100),
            new Random().nextInt(100),
            new Random().nextInt(100),
            new Random().nextInt(100),
            new Random().nextInt(100)
    };

    ratingReviews.createRatingBars(100, BarLabels.STYPE1, colors, raters);

For more and proper documentation use this link RatingReviews