Comment puis-je réduire la taille de Ratingbar?


129

Dans mon activité, j'ai des barres de notation. Mais la taille de cette barre est si grande! Comment puis-je le réduire?

Éditer

Grâce à Gabriel Negut, je l'ai fait avec le style suivant:

<RatingBar
style = "?android:attr/ratingBarStyleSmall"
android:numStars = "5"
android:rating   = "4" />

Maintenant, la taille est réduite mais le nombre d'étoiles et la note ne prennent pas effet !!! Pourquoi? J'ai 7 étoiles dont 6 sont sélectionnées.


Voulez-vous dire une barre de recherche? Le réglage de la hauteur et de la largeur fonctionne bien pour moi. Pouvez-vous publier votre extrait de code ici?
Shailendra Singh Rajawat

Je recommanderais de supprimer le "modifier" et d'en faire la réponse acceptée. Cela ou @GabrielNegut peut modifier sa réponse pour inclure ce type de solution. Inclure la solution dans la question en quelque sorte retire l'expérience de questions-réponses.
onebree

1
style="?android:attr/ratingBarStyleSmall"travaille pour moi.
Muhammad Shahzad

Réponses:


163

Le lien original que j'ai publié est maintenant cassé (il y a une bonne raison pour laquelle publier des liens uniquement n'est pas la meilleure façon de procéder). Vous devez styliser le RatingBaravec l'un ratingBarStyleSmallou l' autre ou un style personnalisé hérité de Widget.Material.RatingBar.Small(en supposant que vous utilisez Material Design dans votre application).

Option 1:

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

Option 2:

// styles.xml
<style name="customRatingBar"   
    parent="android:style/Widget.Material.RatingBar.Small">
    ... // Additional customizations
</style>

// layout.xml
<RatingBar
    android:id="@+id/ratingBar"
    style="@style/customRatingBar"
    ... />

21
ou en utilisant ce style style = "? android: attr / ratingBarStyleSmall" réduira la taille.
Mightian

1
Mais il y a un rembourrage supplémentaire inutile sur la droite! Comment supprimer ça?!
Dr.jacky

Remarque: make width = "wrap_content" pour se débarrasser des étoiles supplémentaires
hkchakladar

72

C'était ma solution après avoir beaucoup de mal à réduire la barre de notation en petite taille sans même un rembourrage laid

 <RatingBar
        android:id="@+id/listitemrating"
        style="@android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleX=".5"
        android:scaleY=".5"
        android:transformPivotX="0dp"
        android:transformPivotY="0dp"
        android:isIndicator="true"
        android:max="5" />

3
Je me suis connecté juste pour voter pour votre réponse concernant l'utilisation de transformPivot pour atténuer le problème de remplissage irrégulier. Merci!
imin le

Enfin plus de rembourrage !!
Uday

Réponse géniale! Je vous remercie!
valerybodak

1
L'échelle gêne l'alignement des vues des frères et déséquilibre les marges et l'espacement.
Prateek Gupta

63

Si vous souhaitez afficher la barre d'évaluation en petite taille, copiez et collez simplement ce code dans votre projet.

  <RatingBar
    android:id="@+id/MyRating"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/getRating"
    android:isIndicator="true"
    android:numStars="5"
    android:stepSize="0.1" />

3
Qu'est-ce que Android: stepSize = "0.1"?
darwin


Consultez également mon réponse à la fin de cette page.
Developine

@HammadTariqSahi C'est bien, continuez comme ça, mais y a-t-il un problème dans mon code? Faites-moi savoir s'il y a quelque chose, s'il vous plaît
Pir Fahim Shah

@PirFahimShah merci, frère, je n'ai pas vérifié ce code. vous pouvez améliorer et styliser la barre de notation si vous suivez cette approche.
Developine

42

Vous pouvez le définir dans le code XML pour RatingBar, utiliser scaleXet scaleYajuster en conséquence. "1.0" serait la taille normale, et tout ce qui se trouve dans ".0" la réduira, ainsi que tout ce qui est supérieur à "1.0" l'augmentera.

<RatingBar
  android:id="@+id/ratingBar1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:scaleX="0.5"
  android:scaleY="0.5" />

14
le problème avec ceci est que la barre de notation occupe toujours la même largeur et hauteur qu'avant même si les icônes sont plus petites. Cela provoque des problèmes d'alignement car il y a un tas de rembourrages gauche et droit à côté des première et dernière icônes. Par exemple, si vous voulez que vos icônes ressemblent à ceci "XXXXX", après la mise à l'échelle, elles ressembleront à ceci "----- XXXXX -----" où le "-" est un espace vide et "X" est une icône . Ainsi, votre barre de notation semblera avoir été poussée vers la droite à cause de l'espace vide
theDazzler

1
Je suppose que vous utilisez une disposition relative. C'est une douleur, mais vous pouvez l'ajuster pour aller dans la bonne position en utilisant android:layout_marginRight et les goûts pour l'obtenir comme vous le souhaitez.
ZeWolfe15

4
pour obtenir une échelle sans créer de remplissage sur la gauche, ajoutez android: transformPivotX = "0dp"
darwin

37

L'extrait ci-dessous a fonctionné pour moi pour redimensionner la ratingBar

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleIndicator"
    android:scaleX=".5"
    android:rating="3.5"
    android:scaleY=".5"
    android:transformPivotX="0dp"
    android:transformPivotY="0dp"
    android:max="5"/>

entrez la description de l'image ici


2
Comment changer la couleur de la barre de cliquetis pour cette barre de notation à moitié remplie, à remplissage complet et à couleur vide?
Ganpat Kaliya

Le paramètre de notation est utilisé pour remplir la barre de notation, non? J'ai utilisé android: rating = "3.5" donc 3,5 étoiles sont remplies. vous pouvez définir jusqu'à 5 car max = 5 est défini dans le xml. Si vous souhaitez changer les couleurs de la barre de notation, vous devez créer un style dans style.xml voir ce lien: stackoverflow.com/a/35914622/2915785
Naveed Ahmad

comment Android: transformPivotX = "0dp" android: transformPivotY = "0dp" par programme?
Salman Khakwani

1
@NaveedAhmad Mais il y a un rembourrage inutile sur la droite! Comment supprimer ça?!
Dr.jacky

@ Mr.Hyde vérifier les styles de raringbar stackoverflow.com/a/24407907/2915785
Naveed Ahmad

10

Exemple de travail

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

et ajoutez ceci dans votre fichier xml de styles

<style name="RatingBar"   
parent="android:style/Widget.Material.RatingBar.Small">
<item name="colorControlNormal">@color/primary_light</item>
<item name="colorControlActivated">@color/primary_dark</item>
</style>

De cette façon, vous n'avez pas besoin de personnaliser ratingBar.


9

Vérifiez ma réponse ici . Meilleur moyen d'y parvenir.

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

et utilisez comme

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

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

5
Pourriez-vous expliquer comment vous êtes arrivé à la solution?
onebree

Cela ne permet pas RatingBarde changer.
CopsOnRoad

3

Si vous utilisez la barre de notation dans Linearlayout avec weightSum. Veuillez vous assurer que vous ne devez pas attribuer le layout_weight à la barre de notation. Au lieu de cela, cette barre de classement place à l'intérieur de la disposition relative et donne du poids à la disposition relative. Créez un contenu enveloppant la largeur de la barre d'évaluation.

<RelativeLayout
    android:layout_width="0dp"
    android:layout_weight="30"
    android:layout_gravity="center"
    android:layout_height="wrap_content">
        <RatingBar
            android:id="@+id/userRating"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:stepSize="1" />
</RelativeLayout>

3

En utilisant Widget.AppCompat.RatingBar, vous avez 2 styles à utiliser; Indicatoret Smallpour les grandes et petites tailles respectivement. Voir l'exemple ci-dessous.

<RatingBar
    android:id="@+id/rating_star_value"
    style="@style/Widget.AppCompat.RatingBar.Small"
    ... />

2

Si vous n'avez besoin que du style par défaut, assurez-vous d'avoir la largeur / hauteur suivante, sinon les numStars pourraient être gâchées:

android:layout_width="wrap_content"
android:layout_height="wrap_content"

1
en utilisant ce style style = "? android: attr / ratingBarStyleSmall" réduira la taille
Mightian


2

Dans la RatingBarbalise, ajoutez ces deux lignes

style="@style/Widget.AppCompat.RatingBar.Small"
android:isIndicator="false"

0

Pour ceux qui ont créé une barre de notation par programmation et qui souhaitent définir une petite barre de notation au lieu de la grande barre de notation par défaut

    private LinearLayout generateRatingView (valeur flottante) {
        LinearLayout linearLayoutRating = new LinearLayout (getContext ());
        linearLayoutRating.setLayoutParams (nouveau TableRow.LayoutParams (TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
        linearLayoutRating.setGravity (Gravity.CENTER);
        RatingBar ratingBar = nouveau RatingBar (getContext (), null, android.R.attr.ratingBarStyleSmall);
        ratingBar.setEnabled (false);
        ratingBar.setStepSize (Float.parseFloat ("0.5")); // pour activer la demi-étoile
        ratingBar.setNumStars (5);
        ratingBar.setRating (valeur);
        linearLayoutRating.addView (ratingBar);
        return linearLayoutRating;
    }


0
 <RatingBar     android:id="@+id/id_tv_rating_bar"
                style="@style/Widget.AppCompat.RatingBar.Small"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/_20sdp"
                android:layout_marginLeft="@dimen/_80sdp"
                android:numStars="5"
                android:paddingTop="@dimen/_5sdp"
                android:rating="5" />

Utilisez simplement style="@style/Widget.AppCompat.RatingBar.Small"cela fonctionnera pour sûr!


0

Cela a fonctionné pour moi.
Vérifiez cette image

            android:id="@+id/ratingBar"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:scaleX=".8"
            android:scaleY=".8"
            android:stepSize="0.5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.543"
            app:layout_constraintStart_toEndOf="@+id/title"
            app:layout_constraintTop_toTopOf="parent" />
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.