如何在 Android 中创建自定义评级栏

你好所有我需要执行评级在我的应用程序... 所以我需要创建自定义评级栏... 有人可以帮助我在这方面？

142950 次浏览
小开
最佳答案

Edit

Have a look at custom rating in motorola http://community.developer.motorola.com/t5/Android-App-Development-for/custom-rating-bar-style-using-android-s-ratingBar-small-style/td-p/10462

Updated

styles.xml

This must be located in your values folder

 <?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
<item name="android:progressDrawable">@drawable/food_rating_bar_full</item>
<item name="android:minHeight">23dip</item>
<item name="android:maxHeight">25dip</item>
</style>
</resources>

food_rating_bar_full.xml

This file must be in Drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/background"
android:drawable="@drawable/food_ratingbar_full_empty" />
<item android:id="@+id/secondaryProgress"
android:drawable="@drawable/food_ratingbar_full_empty" />
<item android:id="@+id/progress"
android:drawable="@drawable/food_ratingbar_full_filled" />
</layer-list>

food_ratingbar_full_empty.xml

This file must be inside Drawable folder.

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


<!-- This is the rating bar drawable that is used to
show a filled cookie. -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">


<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="@drawable/cookiee" />


<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="@drawable/cookiee" />


<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="@drawable/cookiee" />


<item android:drawable="@drawable/cookiee" />


</selector>

food_ratingbar_full_filled.xml

This file must be located in Drawable folder.

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


<!-- This is the rating bar drawable that is used to
show a unfilled cookie. -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">


<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="@drawable/cookie" />


<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="@drawable/cookie" />


<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="@drawable/cookie" />


<item android:drawable="@drawable/cookie" />


</selector>

main.xml file should look like :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">


<RatingBar android:id="@+id/ratingBar1"
style="@style/foodRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content">


</RatingBar>
</LinearLayout>

MainActivity.class should look like :

import android.app.Activity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.Toast;


public class MainActivity extends Activity {
/** Called when the activity is first created. */


RatingBar rb;


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);


rb=(RatingBar)findViewById(R.id.ratingBar1);


rb.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){


@Override
public void onRatingChanged(RatingBar ratingBar, float rating,
boolean fromUser) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(),Float.toString(rating),Toast.LENGTH_LONG).show();


}


});
}
}

I have used two images:

cookie.jpg

cookiee.jpg

This two images are of same size one is used for identifying selected Rating Bar and other for identifying unselected RatingBar

小开

I need to add my solution which is WAY eaiser than the one above. We don't even need to use styles.

Create a selector file in the drawable folder:

custom_ratingbar_selector.xml

<?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/star_off" />


<item android:id="@android:id/secondaryProgress"
android:drawable="@drawable/star_off" />


<item android:id="@android:id/progress"
android:drawable="@drawable/star_on" />


</layer-list>

In the layout set the selector file as progressDrawable:

 <RatingBar
android:id="@+id/ratingBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:progressDrawable="@drawable/custom_ratingbar_selector"
android:numStars="8"
android:stepSize="0.2"
android:rating="3.0" />

And that's all we need.

小开

You can have 5 imageview with defalut image as star that is empty and fill the rating bar with half or full image base on rating.

 public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View grid=inflater.inflate(R.layout.griditem, parent, false);
imageView=(ImageView)grid.findViewById(R.id.grid_prod);
imageView.setImageResource(imgId[position]);
imgoff =(ImageView)grid.findViewById(R.id.offer);
tv=(TextView)grid.findViewById(R.id.grid_text);
tv.setText(namesArr[position]);
tv.setTextColor(Color.BLACK);
tv.setPadding(0, 2, 0, 0);
sta=(ImageView)grid.findViewById(R.id.imageView);
sta1=(ImageView)grid.findViewById(R.id.imageView1);
sta2=(ImageView)grid.findViewById(R.id.imageView2);
sta3=(ImageView)grid.findViewById(R.id.imageView3);
sta4=(ImageView)grid.findViewById(R.id.imageView4);
Float rate=rateFArr[position];




if(rate==5 || rate==4.5)
{
sta.setImageResource(R.drawable.full__small);
sta1.setImageResource(R.drawable.full__small);
sta2.setImageResource(R.drawable.full__small);
sta3.setImageResource(R.drawable.full__small);
if(rate==4.5)
{
sta4.setImageResource(R.drawable.half_small);
}
else
{
sta4.setImageResource(R.drawable.full__small);
}
}
if(rate==4 || rate==3.5)
{
sta.setImageResource(R.drawable.full__small);
sta1.setImageResource(R.drawable.full__small);
sta2.setImageResource(R.drawable.full__small);
if(rate==3.5)
{
sta3.setImageResource(R.drawable.half_small);
}
else
{
sta3.setImageResource(R.drawable.full__small);
}
}
if(rate==3 || rate==2.5)
{
sta.setImageResource(R.drawable.full__small);
sta1.setImageResource(R.drawable.full__small);
if(rate==2.5)
{
sta2.setImageResource(R.drawable.half_small);
}
else
{
sta2.setImageResource(R.drawable.full__small);
}
}
if(rate==2 || rate==1.5)
{
sta.setImageResource(R.drawable.full__small);
if(rate==1.5)
{
sta1.setImageResource(R.drawable.half_small);
}
else
{
sta1.setImageResource(R.drawable.full__small);
}
}
if(rate==1 || rate==0.5)
{
if(rate==1)
sta.setImageResource(R.drawable.full__small);
else
sta.setImageResource(R.drawable.half_small);


}
if(rate>5)
{
sta.setImageResource(R.drawable.full__small);
sta1.setImageResource(R.drawable.full__small);
sta2.setImageResource(R.drawable.full__small);
sta3.setImageResource(R.drawable.full__small);
sta4.setImageResource(R.drawable.full__small);
}


// rb=(RatingBar)findViewById(R.id.grid_rating);
//rb.setRating(rateFArr[position]);
return grid;
}
小开

When creating a custom rating bar that displays a solid gradient line running on a SeekBar-like track, rather than stars, I also encountered a problem related to the vertical centering of the background (track drawable). This is the flawed drawable code I used originally (which generated the problem), as suggested by Android developer and other StackOverflow entries:

<?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/seekbar_track"/>
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>


<item android:id="@android:id/progress" >
<clip android:clipOrientation="horizontal" android:gravity="left" >
<shape>
<gradient
android:startColor="@color/ratingbar_bg_start"
android:centerColor="@color/ratingbar_bg_center"
android:centerX="0.5"
android:endColor="@color/ratingbar_bg_end"
android:angle="0"
/>
</shape>
</clip>
</item>


</layer-list>

The problem here is the first item, which relates to the background of the custom RatingBar. Many entries will tell you to set the layout_minHeight feature to some large value to avoid a vertical spatial disconnect between the thumb and its track. This was not the solution for me - when viewed on a tablet, the background was still drawing to its smaller phone-based size - so the track was consistently positioned well above the center of the RatingBar track. The solution is to remove this entry in the RatingBar drawable, so it now looks like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>


<item android:id="@android:id/progress" >
<clip android:clipOrientation="horizontal" android:gravity="left" >
<shape>
<gradient
android:startColor="@color/ratingbar_bg_start"
android:centerColor="@color/ratingbar_bg_center"
android:centerX="0.5"
android:endColor="@color/ratingbar_bg_end"
android:angle="0"
/>
</shape>
</clip>
</item>


</layer-list>

Then, in the style definition of the custom RatingBar, set the layout_background to the the track drawable. Mine looks like this:

<style name="styleRatingBar" parent="@android:style/Widget.RatingBar">
<item name="android:indeterminateOnly">false</item>
<item name="android:background">@drawable/seekbar_track</item>
<item name="android:progressDrawable">@drawable/abratingbar</item>
<item name="android:thumb">@drawable/abseekbar_thumb</item>
<item name="android:minHeight">@dimen/base_29dp</item>
<item name="android:maxHeight">@dimen/base_29dp</item>
<item name="android:layout_marginLeft">@dimen/base_10dp</item>
<item name="android:layout_marginRight">@dimen/base_10dp</item>
<item name="android:layout_marginTop">@dimen/base_10dp</item>
<item name="android:layout_marginBottom">@dimen/base_10dp</item>
<item name="android:scaleType">fitXY</item>
</style>

(Previously, the background setting here was undefined.).

This is the entry in my layout, which uses both the style and the drawables:

<RatingBar
android:id="@+id/ratingbar_vote"
style="@style/styleRatingBar"
android:hint="@string/ratingbar_vote"
android:contentDescription="@string/ratingbar_vote"
android:numStars="5"
android:rating="5"
android:stepSize="1"
android:layout_width="match_parent"
android:layout_height="@dimen/base_29dp"
android:layout_marginLeft="@dimen/base_120dp"
android:layout_gravity="bottom|right" />

So, to summarize, do not set the background (track) feature in your custom RatingBar drawable, set it in the layout_background feature of your custom RatingBar style. This ensures the track is always vertically centered in a horizontal RatingBar. (Remember, in this custom RatingBar, instead of using stars or other isolated images as the rating, I'm using a gradient line that "grows" or "shrinks" horizontally to display the rating - this rating line uses a SeekBar-like thumb running on a SeekBar-like "track".)

小开

The following code works:

@Override
protected synchronized void onDraw(Canvas canvas)
{
int stars = getNumStars();
float rating = getRating();
try
{
bitmapWidth = getWidth() / stars;
}
catch (Exception e)
{
bitmapWidth = getWidth();
}
float x = 0;


for (int i = 0; i < stars; i++)
{
Bitmap bitmap;
Resources res = getResources();
Paint paint = new Paint();


if ((int) rating > i)
{
bitmap = BitmapFactory.decodeResource(res, starColor);
}
else
{
bitmap = BitmapFactory.decodeResource(res, starDefault);
}
Bitmap scaled = Bitmap.createScaledBitmap(bitmap, getHeight(), getHeight(), true);
canvas.drawBitmap(scaled, x, 0, paint);
canvas.save();
x += bitmapWidth;
}


super.onDraw(canvas);
}
小开

first add images to drawable:

enter image description here enter image description here

the first picture "ratingbar_staroff.png" and the second "ratingbar_staron.png"

After, create "ratingbar.xml" on res/drawable

<?xml version="1.0" encoding="utf-8"?>
<!--suppress AndroidDomInspection -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+android:id/background"
android:drawable="@drawable/ratingbar_empty" />
<item android:id="@+android:id/secondaryProgress"
android:drawable="@drawable/ratingbar_empty" />
<item android:id="@+android:id/progress"
android:drawable="@drawable/ratingbar_filled" />
</layer-list>

the next xml the same on res/drawable

"ratingbar_empty.xml"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="@drawable/ratingbar_staroff" />


<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="@drawable/ratingbar_staroff" />


<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="@drawable/ratingbar_staroff" />


<item android:drawable="@drawable/ratingbar_staroff" />


</selector>

"ratingbar_filled"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="@drawable/ratingbar_staron" />


<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="@drawable/ratingbar_staron" />


<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="@drawable/ratingbar_staron" />


<item android:drawable="@drawable/ratingbar_staron" />


</selector>

the next to do, add these lines of code on res/values/styles

<style name="CustomRatingBar" parent="@android:style/Widget.RatingBar">
<item name="android:progressDrawable">@drawable/ratingbar</item>
<item name="android:minHeight">18dp</item>
<item name="android:maxHeight">18dp</item>
</style>

Now, already can add style to ratingbar resource

        <RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style= "@style/CustomRatingBar"
android:id="@+id/ratingBar"
android:numStars="5"
android:stepSize="0.01"
android:isIndicator="true"/>

finally on your activity only is declare:

RatingBar ratingbar = (RatingBar) findViewById(R.id.ratingbar);
ratingbar.setRating(3.67f);

enter image description here

小开

Making the custom rating bar with layer list and selectors is complex, it is better to override the RatingBar class and create a custom RatingBar. createBackgroundDrawableShape() is the function where you should put your empty state png and createProgressDrawableShape() is the function where you should put your filled state png.

Note: This code will not work with svg for now.

public class CustomRatingBar extends RatingBar {


@Nullable
private Bitmap mSampleTile;


public ShapeDrawableRatingBar(final Context context, final AttributeSet attrs) {
super(context, attrs);
setProgressDrawable(createProgressDrawable());
}


@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);


if (mSampleTile != null) {
final int width = mSampleTile.getWidth() * getNumStars();
setMeasuredDimension(resolveSizeAndState(width, widthMeasureSpec, 0), getMeasuredHeight());
}
}


protected LayerDrawable createProgressDrawable() {
final Drawable backgroundDrawable = createBackgroundDrawableShape();
LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{
backgroundDrawable,
backgroundDrawable,
createProgressDrawableShape()
});


layerDrawable.setId(0, android.R.id.background);
layerDrawable.setId(1, android.R.id.secondaryProgress);
layerDrawable.setId(2, android.R.id.progress);
return layerDrawable;
}


protected Drawable createBackgroundDrawableShape() {
final Bitmap tileBitmap = drawableToBitmap(getResources().getDrawable(R.drawable.ic_star_empty));
if (mSampleTile == null) {
mSampleTile = tileBitmap;
}
final ShapeDrawable shapeDrawable = new ShapeDrawable(getDrawableShape());
final BitmapShader bitmapShader = new BitmapShader(tileBitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
shapeDrawable.getPaint().setShader(bitmapShader);
return shapeDrawable;
}


protected Drawable createProgressDrawableShape() {
final Bitmap tileBitmap = drawableToBitmap(getResources().getDrawable(R.drawable.ic_star_full));
final ShapeDrawable shapeDrawable = new ShapeDrawable(getDrawableShape());
final BitmapShader bitmapShader = new BitmapShader(tileBitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
shapeDrawable.getPaint().setShader(bitmapShader);
return new ClipDrawable(shapeDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
}


Shape getDrawableShape() {
final float[] roundedCorners = new float[]{5, 5, 5, 5, 5, 5, 5, 5};
return new RoundRectShape(roundedCorners, null, null);
}


public static Bitmap drawableToBitmap(Drawable drawable) {
if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}


int width = drawable.getIntrinsicWidth();
width = width > 0 ? width : 1;
int height = drawable.getIntrinsicHeight();
height = height > 0 ? height : 1;


final Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);


return bitmap;
}
}
小开

You can try this rating bar with much better animations

SmileyRating

enter image description here

小开

I made something simular, a RatingBar with individual rating icons, I'm using VectorDrawables for the rating icons but you could use any type of drawable

https://github.com/manmountain/emoji-ratingbar

enter image description here

小开

You can create custom material rating bar by defining drawable xml using material icon of your choice and then applying custom drawable to rating bar using progressDrawable attribute.

For infomration about customizing rating bar see http://www.zoftino.com/android-ratingbar-and-custom-ratingbar-example

Below drawable xml uses thumbs up icon for rating bar.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<bitmap
android:src="@drawable/thumb_up"
android:tint="?attr/colorControlNormal" />
</item>
<item android:id="@android:id/secondaryProgress">
<bitmap
android:src="@drawable/thumb_up"
android:tint="?attr/colorControlActivated" />
</item>
<item android:id="@android:id/progress">
<bitmap
android:src="@drawable/thumb_up"
android:tint="?attr/colorControlActivated" />
</item>
</layer-list>
小开

You can use @erdomester 's given solution for this. But if you are facing issues with rating bar height then you can use ratingbar's icons height programmatically.

In Kotlin,

val drawable = ContextCompat.getDrawable(context, R.drawable.rating_filled)
val drawableHeight = drawable.intrinsicHeight


rating_bar.layoutParams.height = drawableHeight
小开

For SVG RatingBar I used RatingBar custom Vector Drawables superimposing and the answer of erdomester here. This solution traverses all drawables inside SvgRatingBar view of your layout, so in RecyclerView it has an overhead.

SvgRatingBar.java:

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ClipDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.VectorDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
import android.graphics.drawable.shapes.Shape;
import android.os.Build;
import android.util.AttributeSet;
import android.view.Gravity;


import androidx.appcompat.graphics.drawable.DrawableWrapper;
import androidx.vectordrawable.graphics.drawable.VectorDrawableCompat;


import com.example.R; // Your R.java file for R.attr.ratingBarStyle.


public class SvgRatingBar extends androidx.appcompat.widget.AppCompatRatingBar {


private Bitmap sampleTile;


public SvgRatingBar(Context context) {
this(context, null);
}


public SvgRatingBar(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.ratingBarStyle);
}


public SvgRatingBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}


private void init() {
LayerDrawable drawable = (LayerDrawable) createTile(getProgressDrawable(), false);
setProgressDrawable(drawable);
}


/**
* Converts a drawable to a tiled version of itself. It will recursively
* traverse layer and state list drawables.
*/
@SuppressLint("RestrictedApi")
private Drawable createTile(Drawable drawable, boolean clip) {
if (drawable instanceof DrawableWrapper) {
Drawable inner = ((DrawableWrapper) drawable).getWrappedDrawable();
if (inner != null) {
inner = createTile(inner, clip);
((DrawableWrapper) drawable).setWrappedDrawable(inner);
}
} else if (drawable instanceof LayerDrawable) {
LayerDrawable background = (LayerDrawable) drawable;
final int n = background.getNumberOfLayers();
Drawable[] outDrawables = new Drawable[n];


for (int i = 0; i < n; i++) {
int id = background.getId(i);
outDrawables[i] = createTile(background.getDrawable(i),
(id == android.R.id.progress || id == android.R.id.secondaryProgress));
}
LayerDrawable newBg = new LayerDrawable(outDrawables);


for (int i = 0; i < n; i++) {
newBg.setId(i, background.getId(i));
}


return newBg;


} else if (drawable instanceof BitmapDrawable) {
final BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
final Bitmap tileBitmap = bitmapDrawable.getBitmap();
if (sampleTile == null) {
sampleTile = tileBitmap;
}


final ShapeDrawable shapeDrawable = new ShapeDrawable(getDrawableShape());
final BitmapShader bitmapShader = new BitmapShader(tileBitmap,
Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
shapeDrawable.getPaint().setShader(bitmapShader);
shapeDrawable.getPaint().setColorFilter(bitmapDrawable.getPaint().getColorFilter());
return (clip) ? new ClipDrawable(shapeDrawable, Gravity.START,
ClipDrawable.HORIZONTAL) : shapeDrawable;
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && drawable instanceof VectorDrawable) {
return createTile(getBitmapDrawableFromVectorDrawable(drawable), clip);
} else if (drawable instanceof VectorDrawableCompat) {
// API 19 support.
return createTile(getBitmapDrawableFromVectorDrawable(drawable), clip);
}
return drawable;
}


private BitmapDrawable getBitmapDrawableFromVectorDrawable(Drawable drawable) {
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return new BitmapDrawable(getResources(), bitmap);
}


@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (sampleTile != null) {
final int width = sampleTile.getWidth() * getNumStars();
setMeasuredDimension(resolveSizeAndState(width, widthMeasureSpec, 0),
getMeasuredHeight());
}
}


private Shape getDrawableShape() {
final float[] roundedCorners = new float[]{5, 5, 5, 5, 5, 5, 5, 5};
return new RoundRectShape(roundedCorners, null, null);
}
}

In your layout:

<com.example.common.control.SvgRatingBar
android:id="@+id/rate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="13dp"
android:numStars="5"
android:progressDrawable="@drawable/rating_bar"
android:rating="3.5"
android:stepSize="0.01"
/>

You also have to create rating_bar.xml with two SVG drawables:

<?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/ic_unfilled_star"
/>


<item
android:id="@android:id/secondaryProgress"
android:drawable="@drawable/ic_unfilled_star"
/>


<item
android:id="@android:id/progress"
android:drawable="@drawable/ic_filled_star"
/>


</layer-list>

enter image description here

If you see in Design/Split view only one star, refresh layout:

enter image description here

In Kotlin.

import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Bitmap
import android.graphics.BitmapShader
import android.graphics.Canvas
import android.graphics.Shader
import android.graphics.drawable.*
import android.graphics.drawable.shapes.RoundRectShape
import android.os.Build
import android.util.AttributeSet
import android.view.Gravity
import androidx.appcompat.graphics.drawable.DrawableWrapper
import androidx.appcompat.widget.AppCompatRatingBar
import androidx.vectordrawable.graphics.drawable.VectorDrawableCompat
import com.example.R; // Your R.java file for R.attr.ratingBarStyle.


class SvgRatingBar @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null,
defStyleAttr: Int = R.attr.ratingBarStyle) :
AppCompatRatingBar(context, attrs, defStyleAttr) {


private var sampleTile: Bitmap? = null
private val roundedCorners = floatArrayOf(5f, 5f, 5f, 5f, 5f, 5f, 5f, 5f)
private val roundRectShape = RoundRectShape(roundedCorners, null, null)


init {
progressDrawable = createTile(progressDrawable, false) as LayerDrawable
}


/**
* Converts a drawable to a tiled version of itself. It will recursively
* traverse layer and state list drawables.
*/
private fun createTile(drawable: Drawable, clip: Boolean): Drawable =
when {
drawable is DrawableWrapper -> {
@SuppressLint("RestrictedApi")
var inner = drawable.wrappedDrawable
if (inner != null) {
inner = createTile(inner, clip)
@SuppressLint("RestrictedApi")
drawable.wrappedDrawable = inner
}
drawable
}
drawable is LayerDrawable -> {
val n = drawable.numberOfLayers
val outDrawables = arrayOfNulls<Drawable>(n)
for (i in 0 until n) {
val id = drawable.getId(i)
outDrawables[i] = createTile(drawable.getDrawable(i),
id == android.R.id.progress || id == android.R.id.secondaryProgress)
}
val newBg = LayerDrawable(outDrawables)
for (i in 0 until n) {
newBg.setId(i, drawable.getId(i))
}
newBg
}
drawable is BitmapDrawable -> {
val tileBitmap = drawable.bitmap
if (sampleTile == null) {
sampleTile = tileBitmap
}
val bitmapShader = BitmapShader(tileBitmap, Shader.TileMode.REPEAT,
Shader.TileMode.CLAMP)
val shapeDrawable = ShapeDrawable(roundRectShape).apply {
paint.shader = bitmapShader
paint.colorFilter = drawable.paint.colorFilter
}
if (clip) ClipDrawable(shapeDrawable, Gravity.START, ClipDrawable.HORIZONTAL)
else shapeDrawable
}
Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && drawable is VectorDrawable -> {
createTile(getBitmapDrawableFromVectorDrawable(drawable), clip)
}
drawable is VectorDrawableCompat -> {
// Pre-Lollipop support.
createTile(getBitmapDrawableFromVectorDrawable(drawable), clip)
}
else -> drawable
}


private fun getBitmapDrawableFromVectorDrawable(drawable: Drawable): BitmapDrawable {
val bitmap = Bitmap.createBitmap(drawable.intrinsicWidth, drawable.intrinsicHeight,
Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
drawable.setBounds(0, 0, canvas.width, canvas.height)
drawable.draw(canvas)
return BitmapDrawable(resources, bitmap)
}


@Synchronized override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
if (sampleTile != null) {
val width = sampleTile!!.width * numStars
setMeasuredDimension(resolveSizeAndState(width, widthMeasureSpec, 0),
measuredHeight)
}
}
}
小开

I investigated the original source,
and here is my result.

styles.xml (res/values)

<!-- RatingBar -->
<style name="RatingBar" parent="@android:style/Widget.RatingBar">
<item name="android:progressDrawable">@drawable/ratingbar_full</item>
<item name="android:indeterminateDrawable">@drawable/ratingbar_full</item>
<item name="android:minHeight">13.4dp</item>
<item name="android:maxHeight">13.4dp</item>
</style>

ratingbar_full.xml (res/drawable)

<?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/btn_rating_star_off_normal" />
<item android:id="@android:id/secondaryProgress" android:drawable="@drawable/btn_rating_star_off_normal" />
<item android:id="@android:id/progress" android:drawable="@drawable/btn_rating_star_on_normal" />
</layer-list>

btn_rating_star_off_normal.png (res/drawable-xxhdpi)

enter image description here

btn_rating_star_on_normal.png (res/drawable-xxhdpi)

enter image description here

activity_ratingbar.xml (res/layout)

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


<androidx.appcompat.widget.AppCompatRatingBar
android:id="@+id/ratingbar"
style="@style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="13.4dp"
android:isIndicator="false"
android:numStars="5"
android:rating="2.6"
android:secondaryProgressTint="#00000000"
android:stepSize="0.1" />
</FrameLayout>

This is the result.

enter image description here

  • Note that I added the actual height(13.4dp) of ratingbar in layout_height property, because if it is wrap_content it will draw lines below stars. (in my case only in a preview of Android Studio)

提交答案