如何设置android评分栏笔划的颜色？（不是星星的颜色，而是边界的颜色）答案

【问题标题】：How can I set the color of android rating bar's stroke? (Not the color of the stars but the BORDER)如何设置android评分栏笔划的颜色？（不是星星的颜色，而是边界的颜色）
【发布时间】：2016-05-24 12:25:08
【问题描述】：

我是一名 android 初学者，我想制作我的自定义 ratingBar。

免责声明：它不是重复的。因为我读过的所有帖子都询问如何更改星星的颜色以及如何删除笔触。那不是我想要的。我想要描边并且能够改变边框的颜色。

空白时使用透明和黄色的笔触，黄色背景和笔触表示一半和填充。

我不想使用 png。我已经有自己的了，但它们太小了。我只是不想让设计师制作新的，我是否可以只使用 XML 属性和可绘制对象来制作星星。

<RatingBar
          android:id="@+id/thread_rating"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:isIndicator="true"
          android:numStars="5"
          android:progressBackgroundTint="@color/gray"
          android:progressTint="@color/gold"
          android:rating="2.5"
          android:secondaryProgressTint="@color/gray"
          android:stepSize="0.5"
          style="?android:attr/ratingBarStyleSmall"
          />

我与另一位工程师一起工作。他还在java文件中写了代码

private void setRatingBarStart(RatingBar rating_bar) {
LayerDrawable stars = (LayerDrawable) rating_bar.getProgressDrawable();
stars.getDrawable(2)
    .setColorFilter(getResources().getColor(R.color.gold),
        PorterDuff.Mode.SRC_ATOP); // for filled stars
stars.getDrawable(1)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for half filled stars
stars.getDrawable(0)
    .setColorFilter(getResources().getColor(R.color.light_gray),
        PorterDuff.Mode.SRC_ATOP); // for empty stars

[所以现在它有灰色背景，黄色表示填充，现在没有笔划。

我希望它具有透明背景、黄色笔触和黄色填充。看起来像这样

我已经知道如何将背景设置为透明并使其变黄。我只是不知道如何设置笔触颜色。非常感谢！！！！

【问题讨论】：

Android RatingBar change star colors的可能重复
看看这个线程..stackoverflow.com/questions/5800657/… 只需为 stras（空、填充和半填充）设置三个不同的 png，其中包含笔画和内部颜色，工作就完成了
@AlessioTrecani 您好，感谢您的评论。我不想要png。我已经有了，但它们太小了。如果我可以使用 XML 属性设置星星，我尽量不要求设计师制作新的
@huskylove 检查我的答案。
我不明白 PNG 的问题，你可以设置你想要的大小，如果你想要自定义评分栏，我认为这是唯一的解决方案。

标签： java android xml drawable ratingbar

【解决方案1】：

将所有可绘制颜色设置为黄色（在您的情况下为 getResources().getColor(R.color.gold) 为所有）以设置笔触和背景。 （用于背景、次要进度和进度）

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);

从RatingBar 中删除progressBackgroundTint,progressTint,secondaryProgressTint 属性不需要它。

<RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="2.5"/>

结果是 ::

希望这会有所帮助（粉红色只是背景色）

将可绘制对象 1 和 0 设置为红色后：

RatingBar ratingBar = (RatingBar) findViewById(R.id.ratingBar);
        LayerDrawable stars = (LayerDrawable) ratingBar.getProgressDrawable();
        stars.getDrawable(2).setColorFilter(Color.YELLOW, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(0).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);
        stars.getDrawable(1).setColorFilter(Color.Red, PorterDuff.Mode.SRC_ATOP);

【讨论】：

问题是：如何只改变描边颜色？例如，以您的示例中的星星为例子，并为它们添加一个红色边框。
KDeogharkar，您的回答简单、清晰并正确解决了问题。我可能会奖励你赏金。但是，如果您能帮助我解决我之前的问题，那就太好了——因为这是我想要实现的目标，也是我开始这项赏金的原因。
意味着你想改变边框的颜色，例如黄色笔触到红色？这是你想要的吗？ @vitorsdcs
如果我理解您的问题，您可以将drawable(0) 和drawable(1)color 更改为红色，如stars.getDrawable(0).setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP); stars.getDrawable(1).setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);，它将改变您的边框并部分填充边框。 3rd layerdrawable 只有填充部分是黄色的
我是唯一一个接受颜色填充而不是描边的人吗？

【解决方案2】：

不要为此使用任何库或样式。使用下面的步骤你会得到结果。

在可绘制文件夹中创建一个文件作为 custom_ratingbar.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_empty" />
 <item android:id="@android:id/secondaryProgress"
android:drawable="@drawable/star_empty" />
 <item android:id="@android:id/progress"
android:drawable="@drawable/star_full" />
</layer-list>

然后在您的 RatingBar 中使用以下内容：

  <RatingBar
    android:id="@+id/ratingBarChef"
    style="?android:attr/ratingBarStyleSmall"
    android:numStars="5"
    android:stepSize="0.2"
    android:rating="3.0"
    android:progressDrawable="@drawable/custom_ratingbar"
    android:isIndicator="false"
    />

【讨论】：

工作正常 - 但我只能看到我朋友的单星
我有什么问题 - 我使用 Vector ，我应该用 PNG 星号替换它

【解决方案3】：

我想我确实找到了你需要的东西。您必须创建一个自定义的RatingBar，正如answer 中所述，但您必须使用矢量绘图而不是标准绘图。

您可以在此网站上下载 3 个可绘制对象（完整、一半和空）：

https://materialdesignicons.com/

或者右键单击您的 res 文件夹：--> 新建 --> Android Studio 上的矢量资产。

以下是 3 个可绘制的 XML，以防您找不到它们：

满星：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />

半星：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" />

空星：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />

要更改它们的大小，只需更新属性height 和width。

要改变它们的颜色，只需更新属性fillColor 并设置你的黄色。

【讨论】：

SVG 不适用于评分栏。知道为什么吗？
是的，Vector XML 出于某种原因不适用于 ratingBar，它只显示一颗星被拉伸。如果 github.com/trello/victor 用于在构建时将 SVG 转换为 PNG，则可以使用 SVG。

【解决方案4】：

如果您没有任何图像，另一种方法是创建自定义评分栏，请按照以下步骤操作。这所有文件都在drawable文件夹中创建。

emptystar.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#F1C332" android:pathData="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
</vector>

full_star.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#F1C332" android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>

half_star.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path android:fillColor="#000" android:pathData="M12,15.89V6.59L13.71,10.63L18.09,11L14.77,13.88L15.76,18.16M22,9.74L14.81,9.13L12,2.5L9.19,9.13L2,9.74L7.45,14.47L5.82,21.5L12,17.77L18.18,21.5L16.54,14.47L22,9.74Z" >
</path>
</vector>

food_ratingbar_full_empty.xml

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

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

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

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

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

food_ratingbar_full_filled.xml

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

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

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

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

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

food_rating_bar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
    android:drawable="@drawable/food_ratingbar_full_empty" />

<item android:id="@android:id/secondaryProgress"
    android:drawable="@drawable/food_ratingbar_full_empty" />
<item android:id="@android:id/progress"
    android:drawable="@drawable/food_ratingbar_full_filled" />

style.xml

   <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>

在您的布局中

<RatingBar
android:id="@+id/ratingBarDish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp10"
android:layout_marginStart="@dimen/dp10"
style="@style/foodRatingBar"
android:isIndicator="true" />

【讨论】：

【解决方案5】：

您好，尝试使用这个并将边框图像用作星形https://github.com/ome450901/SimpleRatingBar，因为 icon_starempty 和 icon_starfilled 是您各自的图像

<com.willy.ratingbar.ScaleRatingBar xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/deals_ratingbar"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="@dimen/_10dp"
                    android:layout_toRightOf="@+id/txt_newprice"
                    android:layout_weight=".4"
                    android:gravity="center|right"
                    android:outlineProvider="none"
                    app:srb_drawableEmpty="@drawable/icon_starempty"
                    app:srb_drawableFilled="@drawable/icon_starfilled"
                    app:srb_isIndicator="true"
                    app:srb_numStars="5"
                    app:srb_starHeight="@dimen/_10dp"
                    app:srb_starPadding="@dimen/_3dp"
                    app:srb_starWidth="@dimen/_10dp" />

【讨论】：