Comment faire une RatingBar plus petite?


134

J'ai ajouté une RatingBar dans une mise en page:

<RatingBar 
    android:id="@+id/ratingbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:stepSize="1.0"
    />  

Mais le style par défaut de la barre de notation est trop grand.
J'ai essayé de le changer en ajoutant le style Android:style="?android:attr/ratingBarStyleSmall"

Mais le résultat est trop petit et il est impossible de fixer un tarif avec cette propriété.

Comment pourrais-je faire?

Réponses:


106

Le widget RatingBar par défaut est sorta 'boiteux.

La source fait référence au style " ?android:attr/ratingBarStyleIndicator" en plus du " ?android:attr/ratingBarStyleSmall" que vous connaissez déjà. ratingBarStyleIndicatorest légèrement plus petit mais c'est quand même assez laid et les commentaires indiquent que ces styles "ne supportent pas l'interaction".

Il vaut probablement mieux rouler le vôtre. Il y a un guide d'apparence décente à http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ montrant comment faire cela. (Je ne l'ai pas encore fait moi-même, mais j'essaierai dans un jour ou deux.)

Bonne chance!

ps Désolé, j'allais publier un lien vers la source pour que vous puissiez y fouiller mais je suis un nouvel utilisateur et je ne peux pas publier plus d'une URL. Si vous creusez dans l'arborescence des sources, il se trouve dans frameworks / base / core / java / android / widget / RatingBar.java


Il est préférable d'utiliser? Android: attr / ratingBarStyleSmall et définir un thème de notation globale, mais ne pas utiliser le nom exact du thème, merci beaucoup;)
Tsung Goh

7
si nous définissons la propriété d'indicateur android: isIndicator = "false" que nous interagirons avec elle ..
Mayur R. Amipara

Les documents impliquent que ratingBarStyleSmall est le plus petit des deux. Je pense que votre commentaire est en arrière.
AdamMc331

5
Le lien est rompu.
Denny

Le contenu @Denny est disponible depuis Google Cache . Je ne mets pas à jour le message avec le contenu car je n'ai pas regardé les barres de classification Android depuis des années et je ne suis pas certain que le contenu de ce lien soit toujours valide.
Farray

195

Comment coller le code donné ici ...

Étape 1. Vous avez besoin de vos propres étoiles de notation dans res/drawable...

Une étoile pleine

Étoile vide

Étape-2 Dans res/drawablevous avez besoin ratingstars.xmlcomme suit ...

<?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" />
</layer-list>

Étape-3 Dans res/valuesvous avez besoin styles.xmlcomme suit ...

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

Étape 4 Dans votre mise en page ...

<RatingBar 
      android:id="@+id/rtbProductRating"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:numStars="5"
      android:rating="3.5"
      android:isIndicator="false"
      style="@style/foodRatingBar"    
/>  

7
Ne devrait-il pas: <item android: id = "@ + android: id / secondaryProgress" android: drawable = "@ drawable / star_empty" /> être "@ drawable / star_half" /> ou comme vous l'avez appelé?
StackOverflowed

8
Merci beaucoup. Cependant, juste un petit commentaire: vous n'avez besoin d'aucune image de demi-étoile. Il sera automatiquement généré en fonction de la progression.
Boris Strandjev

1
@Vlad Lisez la première ligne de réponse que j'ai mentionnée d'où je tire cela.
Vaibhav Jani

4
fonctionne parfaitement :) mais j'ai 2 problèmes .. numStars ne fonctionne plus, et je ne peux pas l'obtenir un peu plus grand même si je règle la largeur maximale et
minimale

1
Merci @PiedPiper - cela m'a fait gagner beaucoup de temps !! Meilleure explication jamais!
Edmond Tamas

70

Utilisez simplement:

android:scaleX="0.5"
android:scaleY="0.5"

Modifiez le facteur d'échelle en fonction de vos besoins.

Afin de mettre à l'échelle sans créer de remplissage sur la gauche, ajoutez également

android:transformPivotX="0dp"

scaleX scaleY sont bons mais laissez un rembourrage laid, si vous pouviez vous débarrasser de ce rembourrage, ce serait la réponse parfaite la plus simple
Ahmad Dwaik 'Warlock'

De plus, ils nécessitent Android 3.0 / API 11
averasko

6
Je résolve le remplissage laid (à droite) par codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
hannes ach

1
Bien que cela semble être la solution la plus simple, cela n'a pas fonctionné pour moi. Pour une raison quelconque, il n'y a eu aucun effet. Est-ce parce que je suis sous Android 5.x?
Nautilus

vous pouvez supprimer un rembourrage supplémentaire en spécifiant la hauteur de la barre de notation ex:android:layout_height="40dp"
Manohar Reddy

43

Il n'est pas nécessaire d'ajouter un auditeur au ?android:attr/ratingBarStyleSmall. Ajoutez simplement android:isIndicator=falseet il capturera les événements de clic, par exemple

<RatingBar
  android:id="@+id/myRatingBar"
  style="?android:attr/ratingBarStyleSmall"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:numStars="5"
  android:isIndicator="false" />

4
isIndicator est la clé!
deadfish

19

le petit implémenté par l'OS

<RatingBar
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    />

2
La barre de notation n'est pas cliquable lorsque vous donnez le code ci-dessus.
Sharath

16

appliquer ceci.

<RatingBar android:id="@+id/indicator_ratingbar"
    style="?android:attr/ratingBarStyleIndicator"
    android:layout_marginLeft="5dip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical" />

1
Bien que visuellement, c'est génial. les événements de clic ne fonctionnent pas sur cette solution. avez-vous une solution pour cela?
Gökhan Barış Aker

4
si vous voulez que les clics fonctionnent, utilisez android: isIndicator = "false"
D4rWiNS

15

J'ai trouvé une solution plus facile que je ne le pense donnée par celles ci-dessus et plus facile que de rouler la vôtre. J'ai simplement créé une petite barre d'évaluation, puis j'y ai ajouté un onTouchListener. À partir de là, je calcule la largeur du clic et détermine le nombre d'étoiles à partir de cela. Ayant utilisé ceci plusieurs fois, la seule bizarrerie que j'ai trouvée est que le dessin d'une petite barre de notation ne se révèle pas toujours à droite dans un tableau à moins que je ne l'enferme dans un LinearLayout (semble droit dans l'éditeur, mais pas l'appareil) . Quoi qu'il en soit, dans ma mise en page:

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
                <RatingBar
                    android:id="@+id/myRatingBar"
                    style="?android:attr/ratingBarStyleSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:numStars="5" />
            </LinearLayout>

et au sein de mon activité:

    final RatingBar minimumRating = (RatingBar)findViewById(R.id.myRatingBar);
    minimumRating.setOnTouchListener(new OnTouchListener()
    { 
        public boolean onTouch(View view, MotionEvent event)
        { 
            float touchPositionX = event.getX();
            float width = minimumRating.getWidth();
            float starsf = (touchPositionX / width) * 5.0f;
            int stars = (int)starsf + 1;
            minimumRating.setRating(stars);
            return true; 
        } 
    });

J'espère que ça aidera quelqu'un d'autre. Certainement plus facile que de dessiner le sien (même si j'ai trouvé que cela fonctionne aussi, mais je voulais juste une utilisation facile des étoiles).


Cela fonctionne, et c'est facile ... mais les ratingBarStyleSmallétoiles sont vraiment trop petites pour être utiles. Je pense que je vais devoir rouler moi-même pour obtenir des étoiles de taille intermédiaire.
Beer Me

5
<RatingBar
    android:id="@+id/rating_bar"
    style="@style/Widget.AppCompat.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

5
 <RatingBar
                    android:rating="3.5"
                    android:stepSize="0.5"
                    android:numStars="5"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:theme="@style/RatingBar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

// if you want to style 

 <style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/colorPrimary</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

// ajoutez ces lignes pour une petite barre de notation

style = "?android:attr/ratingBarStyleSmall"

Bien que cet extrait de code puisse être la solution, inclure une explication contribue vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Johan

3

bien que la réponse de Farry fonctionne, pour les appareils Samsung, RatingBar a pris une couleur bleue aléatoire au lieu de celle définie par moi. Alors utilisez

style="?attr/ratingBarStyleSmall"

au lieu.

Code complet comment l'utiliser:

<android.support.v7.widget.AppCompatRatingBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?attr/ratingBarStyleSmall" // use smaller version of icons
                android:theme="@style/RatingBar"
                android:rating="0"
                tools:rating="5"/>

<style name="RatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">@color/grey</item>
        <item name="colorControlActivated">@color/yellow</item>
        <item name="android:numStars">5</item>
        <item name="android:stepSize">1</item>
    </style>

3

La meilleure réponse pour une petite barre de notation

<RatingBar
                    android:layout_width="wrap_content"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:layout_height="wrap_content" />

2

Utilisez ce code

<RatingBar
    android:id="@+id/ratingBarSmalloverall"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="30dp"
    android:isIndicator="false"
    android:numStars="5" />

2
<RatingBar
    android:id="@+id/ratingBar1"
    android:numStars="5"
    android:stepSize=".5"
    android:rating="3.5"
    style="@android:style/Widget.DeviceDefault.RatingBar.Small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

2

La meilleure réponse que j'ai eu

  <style name="MyRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:minHeight">15dp</item>
    <item name="android:maxHeight">15dp</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="colorControlActivated">@color/home_add</item>
</style>

utilisateur aime ça

<RatingBar
                style="?android:attr/ratingBarStyleIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:isIndicator="false"
                android:max="5"
                android:rating="3"
                android:scaleX=".8"
                android:scaleY=".8"
                android:theme="@style/MyRatingBar" />

Augmentation / diminution des tailles à l'aide scaleX et scaleY valeur


1

utilisez le code suivant pour la petite barre de notation avec l'événement onTouch

enter code here


<RatingBar
            android:id="@+id/ratingBar"
            style="?android:ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:isIndicator="false"
            android:rating="4"
            android:stepSize="0.5" />

0

Après de nombreuses recherches, j'ai trouvé la meilleure solution pour réduire la taille des barres de notation personnalisées est d'obtenir la taille de la progression pouvant être dessinée dans certaines tailles, comme mentionné ci-dessous:

xxhdpi - 48 * 48 px

xhdpi - 36 * 36 px

hdpi - 24 * 24 px

Et avec style, mettez le minheight et le maxheight à 16 dp pour toutes les résolutions.

Faites-moi savoir si cela ne vous aide pas à obtenir les meilleures barres de classement de petite taille, car j'ai trouvé ces tailles très compatibles et équivalentes à l'attribut de style ratingbar.small.


0

Cela fonctionne pour moi dans la barre de notation xml style = "? Android: attr / ratingBarStyleSmall" ajoutez this.it fonctionnera.


-4

Je résous ce problème comme suit: style = "? Android: attr / ratingBarStyleSmall"


C'est ce que l'OP a déjà essayé et d'autres réponses ont déjà mentionné.
Pang
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.