Make the RatingBar secondary color opaque

user_559850 0
Viewed 1133

I'm trying to make the un-filled stars in the RatingBar an opaque color, but it seems like a tall task consisting of tint lists and PorterDuff Modes. Is there a rock solid way to make the un-filled stars of a RatingBar a truely opaque color?

val color = ContextCompat.getColor(context, android.R.color.white)
ratingBar.secondaryProgressTintList = ColorStateList.valueOf(white)
ratingBar.secondaryProgressTintMode = PorterDuff.Mode.OVERLAY //whats the sauce?

The un-filled color is still transparent, and the background of the view is half white!

ratingbar android
4 Answers

Try This layout for rating star

compile 'com.iarcuschin:simpleratingbar:0.1.5'

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:bind="http://schemas.android.com/tools">

<data>

    <import type="android.view.View" />

    <variable
        name="feedbackHandler"
        type="id.paypro.ui.handlers.FeedbackHandler"></variable>
</data>

<LinearLayout
android:id="@+id/parent_view"
android:orientation="vertical"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:contentInsetLeft="0dp"
    android:contentInsetStart="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:contentInsetRight="0dp"
    android:contentInsetEnd="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetEnd="0dp"
    android:elevation="2dp"
    android:layout_height="?attr/actionBarSize">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/imgBack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:onClick="@{feedbackHandler::onClickBack}"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_back_black"/>

        <TextView
            android:id="@+id/title_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/feedback"
            android:layout_marginLeft="15dp"
            android:textColor="@color/black"
            android:textSize="20sp"
            style="@style/NormalView"
            android:layout_toRightOf="@+id/imgBack"
            android:layout_centerVertical="true"/>

    </RelativeLayout>

</android.support.v7.widget.Toolbar>

<View
    android:layout_width="match_parent"
    android:visibility="gone"
    android:background="@color/gray"
    android:layout_height="1dp"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:gravity="center"
        style="@style/NormalView"
        android:textSize="20sp"
        android:text="@string/rate_paypro"/>

    <com.iarcuschin.simpleratingbar.SimpleRatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        app:srb_stepSize="1.0"
        app:srb_numberOfStars="5"
        android:layout_gravity="center"
        style="?android:attr/ratingBarStyle"
        android:layout_marginTop="10dp"
        android:isIndicator="true"
        app:srb_fillColor="@color/darkOrange"
        app:srb_borderColor="@color/gray"
        android:layout_height="wrap_content" />

</LinearLayout>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="@color/black"
    android:gravity="start"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="20dp"
    style="@style/NormalView"
    android:textSize="18sp"
    android:text="@string/share_feedback"/>

<EditText
    android:id="@+id/edv_feedback"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_width="match_parent"
    android:hint="@string/write_feedback"
    android:layout_marginTop="5dp"
    android:padding="7dp"
    android:maxLines="5"
    android:maxLength="500"
    android:background="@drawable/btn_gray_border"
    android:gravity="start"
    android:textSize="15sp"
    android:layout_height="80dp" />

<TextView
    android:id="@+id/btn_submit"
    android:layout_width="match_parent"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_height="45dp"
    android:textSize="20sp"
    android:gravity="center"
    style="@style/NormalView"
    android:enabled="false"
    android:alpha="0.6"
    android:onClick="@{feedbackHandler::onClickSubmit}"
    android:layout_marginTop="18dp"
    android:background="@drawable/button_orange_dark"
    android:textColor="@color/white"
    android:text="@string/submit"/>


</LinearLayout>

</layout>

Code for highlight according to touch:

 rateBinding.ratingBar.setOnRatingBarChangeListener(new 
 SimpleRatingBar.OnRatingBarChangeListener() {
        @Override
        public void onRatingChanged(SimpleRatingBar simpleRatingBar, float rating, 
  boolean fromUser) {
            if (rating > 0) {
                ratePayproBinding.btnSubmit.setEnabled(true);
                ratePayproBinding.btnSubmit.setAlpha(1);
            } else {
                ratePayproBinding.btnSubmit.setEnabled(false);
                ratePayproBinding.btnSubmit.setAlpha(0.6f);
            }
        }
    });
user_80409300

The stars in a RatingBar are simply a LayerDrawable. The key to setting the color of unfilled stars is to get a handle on the index within the LayerDrawable that contains a description of the drawable for unfilled stars (index = 0). Once we have that drawable, we can color it with "Drawable#setTint()" for API 21+ or with "Drawable#setColorFilter()" for API <21.

The following example sets the unfilled stars to an opaque green:

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RatingBar ratingBar = findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        int unfilledColor = getResources().getColor(android.R.color.holo_green_dark);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            stars.getDrawable(0).setTint(unfilledColor);
        } else {
            stars.getDrawable(0).setColorFilter(unfilledColor, PorterDuff.Mode.SRC_ATOP);
        }
    }
}

enter image description here

user_62879100

you can achieve this by creating a custom drawable resource file,

create new file in drawable directory with name rating_state.xml and paste this code

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:id="@android:id/background" android:drawable="@drawable/blank_star" /> <!-- here is drawable you should add blank image -->
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/blank_star" />
    <item android:id="@android:id/progress" android:drawable="@drawable/full_star" /> <!-- here is drawable you want to show when rating selected -->
</layer-list>

then in your rating bar add property:

android:progressDrawable="@drawable/rating_state"
user_60860860

I think this might be the library you are looking for.

Example:

<com.iarcuschin.simpleratingbar.SimpleRatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srb_borderColor="@android:color/transparent"
    app:srb_fillColor="@color/colorAccent"
    app:srb_numberOfStars="5"
    app:srb_rating="3"
    app:srb_starBackgroundColor="@color/colorPrimary"
    app:srb_starSize="40dp"
    app:srb_stepSize="0.5" />

Result:

result

The view can be configured as follows:

  • Set stars fill color in normal state with app:srb_fillColor / setFillColor(@ColorInt int)
  • Set stars background color in normal state with app:srb_starBackgroundColor / setStarBackgroundColor(@ColorInt int)
  • Set stars fill color in pressed state with app:srb_pressedFillColor / setPressedFillColor(@ColorInt int)
  • Set stars background color in pressed state with app:srb_pressedStarBackgroundColor / setPressedStarBackgroundColor(@ColorInt int)

For more configuration options click here.

user_79728510
Related