Artéfacts de l'image de la RatingBar personnalisée d'Android

Question

J'ai mis en place un RatingBar dans une application sur mon ListView articles. Style personnalisé barre d'évaluation_rouge.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_on" />
    <item android:id="@android:id/progress" android:drawable="@drawable/star_on" />
</layer-list>

Voici une partie de la disposition de ListItem :

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingLeft="15dp" >

    <RatingBar
        android:id="@+id/li_company_rating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="1dp"
        android:isIndicator="true"
        android:numStars="5"
        android:progressDrawable="@drawable/ratingbar_red"
        android:stepSize="1" />

    <Button
        android:id="@+id/li_company_callbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="40dp"
        android:contentDescription="@string/ContentDescription"
        android:drawableLeft="@drawable/phone_icon"
        android:drawablePadding="5dp"
        android:onClick="callbtn_Click"
        android:text="@string/CallButton"
        android:focusable="false"
        android:focusableInTouchMode="false" >
    </Button>

</LinearLayout>

Cela fonctionne, mais lorsque le classement est défini, j'obtiens des artefacts d'image étranges ; 2 lignes verticales sous les étoiles roses apparaissent sur ma vue :

Voici star_on.png

star_off.png semble correct, et si rating == 0, les lignes n'apparaissent pas.

Je suis un débutant Android, et je n'arrive pas à comprendre quel est le problème.

Answer 1

Tout le monde suggère quelque chose mais personne n'essaie d'expliquer pourquoi cela se produit. Je vais essayer de l'expliquer maintenant. Bien sûr, cela ne se produit que lorsque vous essayez de personnaliser les images de la barre d'évaluation.

Imaginons que nous ayons une image personnalisée de 72x72 pixels et que ce soit notre ressource pour XXXHDPI -(c'est 4x).

1. La même image doit être copiée dans XXHDPI, XHDPI, HDPI, MDPI et LDPI également. Je vais oublier le dernier répertoire de ressources pour le moment.
2. Dans les différents répertoires, cette image doit être la suivante :
   • pour une copie de taille XXHDPI, l'image doit être de 54x54 (c'est-à-dire 3x).
   • pour la taille XHDPI, la copie de l'image doit être de 36x36 (c'est-à-dire 2x).
   • pour une copie de taille HDPI, l'image doit être de 27x27 (soit 1,5x).
   • pour une copie de taille MDPI, l'image doit être de 18x18 (c'est 1x).
3. Donc maintenant, dans ce scénario, si votre barre d'évaluation a une hauteur supérieure à 18 dp par exemple 30 dp, vous verrez ces artefacts de mauvaise image sous chaque image étoile, CAR de toute évidence RatingBar essaie de remplir le reste de sa hauteur avec quelque chose (votre image est de 18 dp mais la hauteur de la barre est de 30 dp), donc le reste 12 dp sera rempli avec ces artefacts.

C'est pourquoi, si vous définissez la hauteur de la barre d'évaluation pour qu'elle soit de taille fixe, tout POURRAIT être correct, mais il se peut aussi que ce ne soit pas le cas. Tout cela dépend de la taille de votre image personnalisée.

Je pense qu'il y a une solution qui fonctionnera dans tous les scénarios possibles et c'est :

1. Créez des images pour tous les écrans des appareils que votre application prendra en charge XXXHDPI, XXHDPI ou ce que vous voulez.
2. Assurez-vous que si votre image (MDPI qui est 1x) a par exemple une hauteur de 20 pixels, la hauteur de votre RatingBar ne sera pas supérieure à 20 dp et tout sera OK.

NOTE : Dans toute cette conversation, nous parlons de dp (densité de pixels) et non de px, car si nous fournissons toutes ces ressources d'images dans chaque dossier res, nous aurons la possibilité de travailler avec dp et non avec px. J'espère que la dernière phrase est claire et a du sens.

EDIT : L'autre possibilité est de laisser un petit padding (espace vide), peut-être 1px ou 2px au bas de votre image personnalisée. Dans ce cas, la vue RatingBar n'affichera PAS ces pixels d'artefacts, car ils seront pris dans la partie padding de votre image personnalisée, qui n'est en fait que des pixels vides (transparents). Je pense personnellement que ce n'est pas la meilleure façon de procéder, car le padding de l'image créera un espace (padding) entre RatingBar et les autres vues de la mise en page. Dans ce cas, vous n'aurez pas un contrôle total de l'espace des vues, car une petite partie a été codée en dur dans l'image personnalisée (ces 2 px de remplissage).

Answer 2

Juste 2 pixels de remplissage dans l'image star dans photoshop. padding in xml not work, just padding star image in photoshop. C'est un très bon travail.

Answer 3

J'ai résolu mon même problème en réduisant "layout_height" puisque la hauteur de mon image était inférieure à celle que j'avais dans layout_height.

Answer 4

Même problème. Dans mon cas Placez les images d'étoiles personnalisées dans le dossier /Drawable et définissez "android:layout_height="30dip"

fonctionne bien !

Answer 5

J'ai observé que le problème était dû au vector drawable. Une fois que j'ai ajouté les images respectives en png, cela a commencé à fonctionner. J'ai ajouté cette réponse car elle peut être utile à quelqu'un qui rencontre le même problème.