skip to Main Content

I am creating an app and one of the aspects is just a pretty simple rating section. It’s quite simple at the moment with just getting the average rating and displaying that using stars. I have 5 ImageViews displayed in a Linear Layout and the background of each Imageview changes to one of three star drawables depending on the rating score. Here is the layout structure of the stars:

starFilled = ContextCompat.getDrawable(requireContext(), R.drawable.ic_baseline_star_rate_24);
          starOutline = ContextCompat.getDrawable(requireContext(), R.drawable.ic_baseline_star_outline_24);
        halfStar = ContextCompat.getDrawable(requireContext(), R.drawable.ic_baseline_star_half_24);enter code here


            <LinearLayout
                android:id="@+id/overall_rating_stars"
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/overall_rating_title">

                <ImageView
                    android:id="@+id/overall_rating_s1"
                    android:layout_width="35dp"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_baseline_star_outline_24"/>

                <ImageView
                    android:id="@+id/overall_rating_s2"
                    android:layout_width="35dp"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_baseline_star_outline_24"/>

                <ImageView
                    android:id="@+id/overall_rating_s3"
                    android:layout_width="35dp"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_baseline_star_outline_24"/>

                <ImageView
                    android:id="@+id/overall_rating_s4"
                    android:layout_width="35dp"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_baseline_star_outline_24"/>
                <ImageView
                    android:id="@+id/overall_rating_s5"
                    android:layout_width="35dp"
                    android:layout_height="match_parent"
                    android:background="@drawable/ic_baseline_star_outline_24"/>
            </LinearLayout>

And here is how I am changing the background of the stars:

private void mapRating(ImageView star1, ImageView star2, ImageView star3, ImageView star4, ImageView star5, double rating) {
        if (rating == 0.0) {
            star1.setBackground(starOutline);
            star2.setBackground(starOutline);
            star3.setBackground(starOutline);
            star4.setBackground(starOutline);
            star5.setBackground(starOutline);
        } else {
            if (rating <= 0.50) {
                star1.setBackground(halfStar);
            }
            if (rating > 0.50) {
                star1.setBackground(starFilled);
            }
            if (rating > 1.00 && rating <= 1.50) {
                star2.setBackground(halfStar);
            }
            if (rating > 1.50) {
                star2.setBackground(starFilled);
            }
            if (rating > 2.00 && rating <= 2.50) {
                star3.setBackground(halfStar);
            }
            if (rating > 2.50) {
                star3.setBackground(starFilled);
            }
            if (rating > 3.00 && rating <= 3.50) {
                star4.setBackground(halfStar);
            }
            if (rating > 3.50) {
                star4.setBackground(starFilled);
            }
            if (rating > 4.00 && rating <= 4.50) {
                star5.setBackground(halfStar);
            }
            if (rating > 4.50) {
                star5.setBackground(starFilled);
            }
        }
    }

It’s certainly not the most refined or elegant way of changing the stars but my problem is at least one of the stars seems to change in size when running the application and viewing the ratings: smaller 5th star, smaller 4th star,smaller 2nd star

I have tried a multitude of different things such as changing from background to src in both XML and Fragment. As well changing the scaleType for each but to center|crop or center or even XY. However, none of it seems to be fixing it. All the stars have the same height (50dp), width (50dp), and viewport height/width (24). Help would be greatly appreciated as this is a minor yet frustrating problem.

2

Answers


  1. Why don’t you use the src in layout.xml?
    try it…

    Login or Signup to reply.
  2. you can use RatingBar to rate instead of creating your own. I have attached two links for your reference. Please check it out.

    Google developer link for ratingbar

    Youtube link for RatingBar

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search