setcolor - ratingbar android studio ejemplo

Android: la barra de clasificación personalizada se parece a su sangrado

Question

Así que he creado una barra de clasificación con nuevos íconos, sin embargo, cuando la implemento, las estrellas parecen estar sangrando, ver adjunto:

Aquí están el estilo, la calificación xml y cómo se implementan en el diseño:

estilo:

<style name="GoldRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@drawable/gold_ratingbar</item>
    <item name="android:indeterminateDrawable">@drawable/gold_ratingbar</item>
    <item name="android:thumb">@null</item>
    <item name="android:isIndicator">true</item>
</style>

xml de calificación:

<?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/rating_star_icon_off" />
    <item android:id="@+android:id/secondaryProgress" android:drawable="@drawable/rating_star_icon_half" />
    <item android:id="@+android:id/progress" android:drawable="@drawable/rating_star_icon" />
</layer-list>

Diseño:

<TextView

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:text="Overall rating"
    android:textSize="16sp"
    android:textStyle="bold" />

<RatingBar
    android:id="@+id/review_overall_rating"
    style="@style/GoldRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="6dp"
    android:layout_marginLeft="6dp"
    android:rating="3" />

<TextView
    android:id="@+id/review_rating_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:text=""
    android:textStyle="bold" />

¿Alguien puede ver dónde me he equivocado?

Answer 1

El sangrado se produce porque la última fila de su imagen estelar se está repitiendo. Puedes arreglar esto configurando el tamaño de la Barra de Clasificación para que coincida perfectamente con el dibujo subyacente.

El RatingBar nunca inspecciona el tamaño del dibujo subyacente. Así que tienes que hacer esto tú mismo. Puede ser difícil hacer esto usando xml, ya que sus activos pueden tener diferentes tamaños para diferentes densidades de pantalla. Además, su personal de UX puede cambiar los activos sin actualizar las dimensiones xml.

Solución: cree una RatingBar que verifique el tamaño de sus elementos dibujables. Vea abajo

public class RatingBar extends android.widget.RatingBar {
    private Drawable starDrawable;

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

    public RatingBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        starDrawable = getResources().getDrawable(
            R.drawable.your_drawable, context.getTheme());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // Make sure to account for padding and margin, if you care.
        // I only cared about left padding.
        setMeasuredDimension(starDrawable.getIntrinsicWidth() * 5 
            + getPaddingLeft(), starDrawable.getIntrinsicHeight());
    }
}

Answer 2

Para todos los que todavía están buscando una respuesta y no quieren recortar la imagen: android:minHeight="0dp" me ayudó

Answer 3

Tuve que enfrentar el mismo problema.

En mi caso, la altura de blank_star.png es 17dp, así que puse android:layout_height="17dp" en RatingBar y mi problema está resuelto. Pruebe el siguiente código: -

<RatingBar
    android:id="@+id/rating"
    style="@style/rating_bar"
    android:layout_width="wrap_content"
    android:layout_height="17dp"
    android:layout_marginRight="5dp"
    android:isIndicator="true"
    android:numStars="5"
    android:stepSize="1.0" />

estilo / rating_bar.xml

<style name="rating_bar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/rating_bar_full</item>
    <item name="android:minHeight">18dip</item>
    <item name="android:maxHeight">18dip</item>
</style>

dibujable / rating_bar_full

<?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/ratingbar_full_empty"/>
    <item
        android:id="@+android:id/secondaryProgress"
        android:drawable="@drawable/ratingbar_full_empty"/>
    <item
        android:id="@+android:id/progress"
        android:drawable="@drawable/ratingbar_full_filled"/>

</layer-list>

dibujable / ratingbar_full_empty

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

    <item android:drawable="@drawable/blank_star" android:state_pressed="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/blank_star" android:state_focused="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/blank_star" android:state_selected="true" android:state_window_focused="true"/>
    <item android:drawable="@drawable/blank_star"/>

</selector>

drawable / ratingbar_full_filled.xml

<item android:drawable="@drawable/filled_star" android:state_pressed="true" android:state_window_focused="true"/>
<item android:drawable="@drawable/filled_star" android:state_focused="true" android:state_window_focused="true"/>
<item android:drawable="@drawable/filled_star" android:state_selected="true" android:state_window_focused="true"/>
<item android:drawable="@drawable/filled_star"/>

Answer 4

Tuve un caso similar y la respuesta aceptada no lo resolverá en todos los tamaños de pantalla, de hecho, la solución es muy simple, solo necesitas agregar el relleno a la imagen .png que estás usando "2 píxeles transparentes en cada lado"

Ocurre el sangrado porque Android está repitiendo la última fila de su imagen estelar, así que haga que esta fila sea transparente.