¿Cómo hacer un RatingBar más pequeño?


134

He agregado una RatingBar en un diseño:

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

Pero el estilo predeterminado para la barra de calificación es demasiado grande.
Intenté cambiarlo agregando el estilo de Android:style="?android:attr/ratingBarStyleSmall"

Pero el resultado es demasiado pequeño y es imposible establecer una tasa con esta propiedad.

¿Cómo podría hacerlo?

Respuestas:


106

El widget de RatingBar predeterminado es bastante aburrido.

La fuente hace referencia al estilo " ?android:attr/ratingBarStyleIndicator" además del " ?android:attr/ratingBarStyleSmall" con el que ya está familiarizado. ratingBarStyleIndicatores un poco más pequeño pero sigue siendo bastante feo y los comentarios señalan que estos estilos "no admiten interacción".

Probablemente estés mejor rodando el tuyo. Hay una guía de aspecto decente en http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ que muestra cómo hacer esto. (Todavía no lo he hecho, pero lo intentaré en un día más o menos).

¡Buena suerte!

pd Lo siento, iba a publicar un enlace a la fuente para que pudieras hurgar pero soy un usuario nuevo y no puedo publicar más de 1 URL. Si profundiza en el árbol de origen, se encuentra en frameworks / base / core / java / android / widget / RatingBar.java


Es mucho mejor usar? Android: attr / ratingBarStyleSmall y establecer el tema de calificación global pero no usar el nombre exacto del tema, muchas gracias;)
Tsung Goh

77
si establecemos la propiedad del indicador android: isIndicator = "false", entonces interactuaremos con él ..
Mayur R. Amipara

Los documentos implican ratingBarStyleSmall es el más pequeño de los dos. Creo que tu comentario es al revés.
AdamMc331

55
El enlace está roto.
Denny

@Denny Content está disponible en Google Cache . No estoy actualizando la publicación con el contenido, ya que no he visto las barras de calificación de Android en años, y no estoy seguro de si el contenido de ese enlace sigue siendo válido.
Farray

195

Cómo pegar el código dado aquí ...

Paso 1. Necesitas tus propias estrellas de calificación en res/drawable...

Una estrella llena

Estrella vacía

Paso-2 res/drawableNecesitas ratingstars.xmllo siguiente ...

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

Paso-3 res/valuesNecesitas styles.xmllo siguiente ...

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

Paso-4 en su diseño ...

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

77
¿No debería esto: <item android: id = "@ + android: id /daryProgress" android: drawable = "@ drawable / star_empty" /> be "@ drawable / star_half" /> o como se llame?
StackOverflowed

8
Gracias un montón. Sin embargo, solo un pequeño comentario: no necesitas una imagen de media estrella. Se generará automáticamente en función del progreso.
Boris Strandjev el

1
@Vlad Lee la primera línea de respuesta que mencioné de donde obtengo esto.
Vaibhav Jani

44
funciona perfectamente :) pero tengo 2 problemas ... numStars ya no funciona, y no puedo hacerlo un poco más grande incluso si configuro el ancho máximo y mínimo
Ahmad Dwaik 'Warlock'

1
Gracias @PiedPiper, ¡esto me ahorró mucho tiempo! ¡La mejor explicación de todas!
Edmond Tamas el

70

Solo usa:

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

Cambie el factor de escala según su necesidad.

Para escalar sin crear un relleno a la izquierda, también agregue

android:transformPivotX="0dp"

scaleX scaleY son buenos, pero deja un relleno feo, si pudieras deshacerte de ese relleno sería la respuesta perfecta más fácil
Ahmad Dwaik 'Warlock' el

además, requieren Android 3.0 / API 11
averasko

66
Resuelvo el feo relleno (derecho) por codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
hannes ach

1
Aunque parece la solución más fácil, no me funcionó. Por alguna razón no hubo efecto. ¿Es porque estoy en Android 5.x?
Nautilus

puede quitar algo de relleno adicional especificando la altura de la barra de clasificación, por ejemplo:android:layout_height="40dp"
Manohar Reddy

43

No es necesario agregar un oyente al ?android:attr/ratingBarStyleSmall. Simplemente agregue android:isIndicator=falsey capturará eventos de clic, por ejemplo

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

44
isIndicator es la clave!
deadfish

19

el pequeño implementado por el sistema operativo

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

2
No se puede hacer clic en la barra de calificación al dar el código anterior.
Sharath

16

aplica esto.

<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
Aunque visualmente es genial. los eventos de clic no funcionan en esta solución. ¿Tienes alguna solución para esto?
Gökhan Barış Aker

44
si desea que los clics funcionen, use android: isIndicator = "false"
D4rWiNS

15

Encontré una solución más fácil de lo que creo dada por las anteriores y más fácil que lanzar la suya. Simplemente creé una pequeña barra de calificación, luego le agregué un onTouchListener. A partir de ahí, calculo el ancho del clic y determino el número de estrellas a partir de eso. Después de haber usado esto varias veces, la única peculiaridad que he encontrado es que el dibujo de una pequeña barra de calificación no siempre aparece en una tabla a menos que lo incluya en un diseño lineal (se ve directamente en el editor, pero no en el dispositivo) . De todos modos, en mi diseño:

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

y dentro de mi actividad:

    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; 
        } 
    });

Espero que esto ayude a alguien más. Definitivamente más fácil que dibujar el propio (aunque descubrí que eso también funciona, pero solo quería un uso fácil de las estrellas).


Funciona y es fácil ... pero las ratingBarStyleSmallestrellas son realmente demasiado pequeñas para ser útiles. Creo que tendré que rodar el mío para obtener estrellas de tamaño intermedio.
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>

// agregue estas líneas para la barra de calificación pequeña

style = "?android:attr/ratingBarStyleSmall"

Si bien este fragmento de código puede ser la solución, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código.
Johan

3

aunque la respuesta de Farry funciona, para los dispositivos Samsung, RatingBar tomó un color azul aleatorio en lugar del definido por mí. Así que usa

style="?attr/ratingBarStyleSmall"

en lugar.

Código completo de cómo usarlo:

<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 mejor respuesta para una pequeña barra de calificación

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

2

Use este código

<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 mejor respuesta que obtuve

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

usuario como este

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

Aumentar / disminuir tamaños usando el valor scaleX y scaleY


1

use el siguiente código para una pequeña barra de calificación con evento 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

Después de mucha investigación, encontré que la mejor solución para reducir el tamaño de las barras de calificación personalizadas es obtener el tamaño del progreso en ciertos tamaños, como se menciona a continuación:

xxhdpi - 48 * 48 px

xhdpi - 36 * 36 px

HDPI - 24 * 24 px

Y con estilo coloque la altura mínima y máxima como 16 dp para todas las resoluciones.

Avíseme si esto no le ayuda a obtener las mejores barras de calificación de tamaño pequeño, ya que estos tamaños me parecieron muy compatibles y equivalentes al atributo de estilo ratingbar.small.


0

Me está funcionando en la barra de calificación xml style = "? Android: attr / ratingBarStyleSmall" agregue this.it funcionará.


-4

Resuelvo este problema lo siguiente: style = "? Android: attr / ratingBarStyleSmall"


Esto es lo que el OP ya ha intentado y otras respuestas ya han mencionado.
Pang
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.