android - stars - ¿Cómo hacer una RatingBar más pequeña?

rating bar custom android

Question

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.
style="?android:attr/ratingBarStyleSmall" 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?

Answer 1

Cómo pegar el código dado http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ ...

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

Paso 2: en res/drawable ratingstars.xml necesitas ratingstars.xml siguiente manera ...

<?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 En res/values necesitas styles.xml como sigue ...

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

Answer 2

Después de una gran cantidad de investigaciones, encontré que la mejor solución para reducir el tamaño de las barras de clasificación personalizadas es obtener el tamaño del avance dibujable 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 el minheight y el maxheight como 16 dp para todas las resoluciones.

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

Answer 3

El widget de RatingBar predeterminado es sorta ''lame.

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

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

¡Buena suerte!

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

Answer 4

Encontré una solución más fácil de lo que creo que ofrecen los anteriores y más fácil que la tuya. Simplemente creé una pequeña barra de clasificación, luego agregué unTouchListener a ella. 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 clasificación no siempre sale bien en una tabla a menos que lo incluya en un LinearLayout (se ve bien 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 uno propio (aunque he descubierto que también funciona, pero solo quería un uso fácil de las estrellas).

Answer 5

Intente utilizar alguna biblioteca para la barra de calificación, por ejemplo, la biblioteca de Android Material Rating Bar .

1. Añadir en sus dependencias:

compile ''me.zhanghai.android.materialratingbar:library:1.2.0''

2.Declare el estilo personalizado en su archivo styles.xml:

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

3.Añada la barra de clasificación en su diseño y aplique este estilo a través de Android: atributo de tema:

<me.zhanghai.android.materialratingbar.MaterialRatingBar
    android:id="@+id/rating_bar"
    android:layout_width="wrap_content"
    android:layout_height="22dp"
    android:isIndicator="true"
    android:numStars="5"
    android:rating="0"
    android:stepSize="0.1"
    android:theme="@style/RatingBar"/>

Si quieres cambiar el tamaño de la barra de calificación usando esta biblioteca, simplemente cambia el android: layout_height y android: layout_width a tu preferencia.

Answer 6

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

Answer 7

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 scaleX y scaleY value

Answer 8

No es necesario agregar un oyente a ?android:attr/ratingBarStyleSmall . Simplemente agregue android:isIndicator=false y capturará los 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" />

Answer 9

Resuelvo este problema de la siguiente manera: style = "? Android: attr / ratingBarStyleSmall"

Answer 10

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"

Answer 11

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

Answer 12

aunque la respuesta de Farry funciona, para los dispositivos Samsung, RatingBar tomó un color azul aleatorio en lugar del definido por mí. Entonces 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>

Answer 13

el pequeño implemento por el sistema operativo

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

Answer 14

utilice el siguiente código para la barra de clasificación pequeña con el 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" />

Answer 15

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

Answer 16

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

Answer 17

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