Come posso ridurre la dimensione della barra di valutazione?


129

Nella mia attività ho alcune barre di valutazione. Ma le dimensioni di questa barra sono così grandi! Come posso ridurlo?

modificare

Grazie a Gabriel Negut, l'ho fatto con il seguente stile:

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

Ora, la dimensione è ridotta ma il numero di stelle e la valutazione non hanno effetto !!! Perché? Ho 7 stelle che 6 sono selezionate.


Intendi una barra di ricerca? L'impostazione di altezza e larghezza funziona bene per me. Puoi pubblicare lo snippet di codice qui?
Shailendra Singh Rajawat,

Consiglierei di rimuovere la "modifica" e di renderla invece la risposta accettata. That o @GabrielNegut possono modificare la sua risposta per includere quel tipo di soluzione. Includere la soluzione nel tipo di domanda toglie l'esperienza di domande e risposte.
onebree,

1
style="?android:attr/ratingBarStyleSmall"per me va bene.
Muhammad Shahzad,

Risposte:


163

Il link originale che ho pubblicato è ora interrotto (c'è una buona ragione per cui pubblicare solo link non è il modo migliore per andare). Devi applicare lo stile RatingBarcon uno ratingBarStyleSmallo uno stile personalizzato ereditato da Widget.Material.RatingBar.Small(supponendo che stai utilizzando Material Design nella tua app).

Opzione 1:

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

Opzione 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
o usando questo stile style = "? android: attr / ratingBarStyleSmall" ridurrà le dimensioni.
Mightian il

1
Ma c'è un'inutile imbottitura extra sulla destra! Come rimuoverlo ?!
Dr.jacky,

Nota: make width = "wrap_content" per sbarazzarsi di stelle extra
hkchakladar

72

Questa è stata la mia soluzione dopo molte lotte per ridurre la barra di valutazione in dimensioni ridotte senza nemmeno una brutta imbottitura

 <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
Ho effettuato l'accesso solo per votare la tua risposta sull'utilizzo di transformPivot per mitigare il problema di riempimento irregolare. Grazie!
imin,

Finalmente niente più imbottitura !!
Uday,

Risposta fantastica! Grazie!
valerybodak,

1
Il ridimensionamento disturba l'allineamento delle viste dei fratelli e sbilancia i margini e la spaziatura.
Prateek Gupta,

63

Se vuoi mostrare la barra di valutazione in dimensioni ridotte, copia e incolla questo codice nel tuo progetto.

  <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
Che cos'è Android: stepSize = "0.1"?
darwin,


controlla anche il mio asnwer alla fine di questa pagina.
Sviluppa

@HammadTariqSahi È buono, continuate così, ma c'è qualche problema nel mio codice? Fammi sapere se c'è qualcosa, per favore
Pir Fahim Shah,

@PirFahimShah grazie, fratello non ho controllato questo codice. puoi migliorare e modellare la barra di valutazione se segui questo approccio.
Sviluppa

42

È possibile impostarlo nel codice XML per RatingBar, utilizzare scaleXe scaleYregolare di conseguenza. "1.0" sarebbe la dimensione normale e qualsiasi cosa in ".0" la ridurrà, anche qualsiasi cosa maggiore di "1.0" la aumenterà.

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

14
il problema è che la barra di valutazione occupa ancora la stessa larghezza e altezza di prima anche se le icone sono più piccole. Ciò causa problemi di allineamento poiché è presente una serie di imbottiture sinistra e destra accanto alla prima e all'ultima icona. Ad esempio, se vuoi le tue icone come questa "XXXXX", dopo il ridimensionamento sembrerà così "----- XXXXX -----" dove "-" è spazio vuoto e "X" è un'icona . Quindi la tua barra di valutazione sembrerà essere stata spinta a destra a causa dello spazio vuoto
theDazzler

1
Immagino che stai usando il layout relativo. È una seccatura ma puoi modificarlo per andare nella posizione giusta usando android:layout_marginRight e cose del genere per farlo nel modo che preferisci.
ZeWolfe15

4
per ottenere la scala senza creare un'imbottitura sulla sinistra aggiungi android: transformPivotX = "0dp"
darwin

37

Lo snippet di seguito ha funzionato per me per ridimensionare la barra di valutazione

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

inserisci qui la descrizione dell'immagine


2
come modificare il colore della barra di valutazione per questo riempimento a metà barra, riempimento completo e colore vuoto?
Ganpat Kaliya,

parametro di valutazione viene utilizzato per riempire la barra di valutazione giusto? Ho usato Android: rating = "3.5", quindi vengono riempite 3,5 stelle. puoi impostare fino a 5 perché max = 5 è impostato in xml. Se vuoi cambiare i colori della barra di classificazione, devi creare uno stile in style.xml vedi questo link: stackoverflow.com/a/35914622/2915785
Naveed Ahmad

come android: transformPivotX = "0dp" android: transformPivotY = "0dp" Programmaticamente?
Salman Khakwani,

1
@NaveedAhmad Ma sulla destra c'è un'imbottitura inutile! Come rimuoverlo ?!
Dr.jacky,

@ Mr.Hyde controllare gli stili di raringbar stackoverflow.com/a/24407907/2915785
Naveed Ahmad

10

Esempio di lavoro

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

e aggiungilo nel tuo file xml di stili

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

In questo modo non è necessario personalizzare la barra di valutazione.


9

Controlla la mia risposta qui . Il modo migliore per raggiungerlo.

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

e usa come

<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
Potresti approfondire come sei arrivato alla soluzione?
onebree,

Ciò non consente RatingBardi essere modificato.
CopsOnRoad,

3

Se si utilizza la barra di valutazione in Linearlayout con weightSum. Assicurati di non assegnare layout_weight per la barra di valutazione. Invece, posiziona la barra di valutazione all'interno del layout relativo e dai peso al layout relativo. Rendi avvolgente la larghezza della barra di classificazione.

<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

Usando Widget.AppCompat.RatingBar, hai 2 stili da usare; Indicatore Smallper dimensioni grandi e piccole rispettivamente. Vedi esempio sotto.

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

2

Se hai solo bisogno dello stile predefinito, assicurati di avere la seguente larghezza / altezza, altrimenti numStars potrebbe incasinare:

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

1
usando questo stile style = "? android: attr / ratingBarStyleSmall" riduci le dimensioni
Mightian


2

Nel RatingBartag, aggiungi queste due righe

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

0

Per coloro che hanno creato una barra di valutazione a livello di codice e desiderano impostare una barra di valutazione piccola anziché una barra di valutazione grande predefinita

    private LinearLayout generateRatingView (valore float) {
        LinearLayout linearLayoutRating = new LinearLayout (getContext ());
        linearLayoutRating.setLayoutParams (new TableRow.LayoutParams (TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
        linearLayoutRating.setGravity (Gravity.CENTER);
        RatingBar ratingBar = new RatingBar (getContext (), null, android.R.attr.ratingBarStyleSmall);
        ratingBar.setEnabled (false);
        ratingBar.setStepSize (Float.parseFloat ("0.5")); // per abilitare la mezza stella
        ratingBar.setNumStars (5);
        ratingBar.setRating (valore);
        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" />

Basta usarlo style="@style/Widget.AppCompat.RatingBar.Small"funzionerà per certo!


0

Questo ha funzionato per me.
Controlla questa immagine

            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" />
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.