¿Cómo puedo disminuir el tamaño de la barra de calificación?

129

En mi actividad tengo algunas barras de calificación. ¡Pero el tamaño de esta barra es tan grande! ¿Cómo puedo hacerlo más pequeño?

Editar

Gracias a Gabriel Negut, lo hice con el siguiente estilo:

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

¡Ahora, el tamaño se reduce pero el número de estrellas y la calificación no surten efecto! ¿Por qué? Tengo 7 estrellas que 6 de ellas están seleccionadas.

Hesam
fuente
¿Te refieres a un Seekbar? Establecer altura y anchura funciona bien para mí. ¿Puedes publicar tu fragmento de código aquí?
Shailendra Singh Rajawat
Recomendaría eliminar la "edición" y, en su lugar, convertirla en la respuesta aceptada. Eso o @GabrielNegut puede editar su respuesta para incluir ese tipo de solución. Incluir la solución en la pregunta le quita la experiencia de preguntas y respuestas.
onebree
1
style="?android:attr/ratingBarStyleSmall"funciona para mi.
Muhammad Shahzad

Respuestas:

163

El enlace original que publiqué ahora está roto (hay una buena razón por la cual publicar solo enlaces no es la mejor manera de hacerlo). Debe aplicar el estilo RatingBarcon uno ratingBarStyleSmallo con un estilo personalizado heredado de Widget.Material.RatingBar.Small(suponiendo que esté utilizando Material Design en su aplicación).

Opción 1:

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

Opcion 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"
    ... />
Gabriel Negut
fuente
21
o usando este estilo style = "? android: attr / ratingBarStyleSmall" reducirá el tamaño.
Mightian
1
¡Pero hay un relleno adicional inútil a la derecha! ¿Cómo eliminar eso?
Dr.jacky
Nota: make width = "wrap_content" para deshacerse de las estrellas adicionales
hkchakladar
72

Esta fue mi solución después de muchas dificultades para reducir la barra de clasificación en un tamaño pequeño sin siquiera un relleno feo

 <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" />
TechArcSri
fuente
3
Me conecté solo para votar su respuesta con respecto al uso de transformPivot para mitigar el problema de relleno desigual. ¡Gracias!
Imin
¡Finalmente no más relleno!
Uday
Respuesta impresionante! ¡Gracias!
valerybodak
1
La escala molesta la alineación de las vistas entre hermanos y desequilibra los márgenes y el espaciado.
Prateek Gupta
63

Si desea mostrar la barra de calificación en tamaño pequeño, simplemente copie y pegue este código en su proyecto.

  <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" />
Pir Fahim Shah
fuente
3
¿Qué es android: stepSize = "0.1"?
darwin
También revise mi respuesta al final de esta página.
Developine
@HammadTariqSahi Está bien, sigan así, pero ¿hay algún problema en mi código? Avíseme si hay algo, por favor
Pir Fahim Shah
@PirFahimShah gracias, hermano. No he verificado este código. puede mejorar y diseñar la barra de calificación si sigue ese enfoque.
Developine
42

Puede configurarlo en el código XML para RatingBar, usar scaleXy scaleYajustar en consecuencia. "1.0" sería el tamaño normal, y cualquier cosa en ".0" lo reducirá, también algo mayor que "1.0" lo aumentará.

<RatingBar
  android:id="@+id/ratingBar1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:scaleX="0.5"
  android:scaleY="0.5" />
ZeWolfe15
fuente
14
El problema con esto es que la barra de clasificación aún ocupa el mismo ancho y alto que antes, aunque los íconos son más pequeños. Esto causa problemas de alineación ya que hay un montón de relleno izquierdo y derecho al lado del primer y último ícono. Por ejemplo, si desea que sus iconos como este "XXXXX", después de la escala, se vea así "----- XXXXX -----" donde "-" es un espacio vacío y "X" es un icono . Por lo tanto, su barra de calificación parecerá que se empujó hacia la derecha debido al espacio vacío
theDazzler
1
Supongo que estás usando un diseño relativo. Es un dolor, pero puede ajustarlo para que se coloque en la posición correcta usando android:layout_marginRight y los gustos para obtenerlo de la manera que desee.
ZeWolfe15
44
para obtener escala sin crear un relleno a la izquierda, agregue android: transformPivotX = "0dp"
darwin
37

El fragmento a continuación funcionó para mí para cambiar el tamaño de la barra de calificación

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

ingrese la descripción de la imagen aquí

Naveed Ahmad
fuente
2
¿Cómo cambiar el color de la barra de ratting para esta barra de clasificación de relleno medio, relleno completo y color vacío?
Ganpat Kaliya
parámetro de calificación se utiliza para llenar la barra de calificación ¿verdad? Utilicé android: rating = "3.5" para que se llenen 3.5 estrellas. puede configurar hasta 5 porque max = 5 está configurado en el xml. Si desea cambiar los colores de la barra de calificación, debe crear un estilo en style.xml, vea este enlace: stackoverflow.com/a/35914622/2915785
Naveed Ahmad
cómo android: transformPivotX = "0dp" android: transformPivotY = "0dp" ¿Programáticamente?
Salman Khakwani
1
@NaveedAhmad ¡Pero hay un relleno inútil a la derecha! ¿Cómo eliminar eso?
Dr.jacky
@ Mr.Hyde verifique los estilos de raringbar stackoverflow.com/a/24407907/2915785
Naveed Ahmad
10

Ejemplo de trabajo

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

y agregue esto en su archivo xml de estilos

<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 esta forma no necesita personalizar ratingBar.

Desarrollo
fuente
9

Mira mi respuesta aquí . La mejor manera de lograrlo.

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

y usar como

<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" />
AMAN SINGH
fuente
6
<RatingBar
  style="?android:attr/ratingBarStyleIndicator"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
/>
nafees4343
fuente
55
¿Podrías explicar cómo llegaste a la solución?
onebree
Esto no permite RatingBarque se cambie.
CopsOnRoad
3

Si está utilizando la barra de calificación en Linearlayout con weightSum. Asegúrese de que no debe asignar el layout_weight para la barra de calificación. En cambio, coloca la barra de calificación dentro del diseño relativo y le da peso al diseño relativo. Haga que el contenido de la envoltura del ancho de la barra de calificación.

<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>
Varnith Kumar M
fuente
3

Usando Widget.AppCompat.RatingBar, tienes 2 estilos para usar; Indicatory Smallpara tamaños grandes y pequeños respectivamente. Ver ejemplo a continuación.

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

Si solo necesita el estilo predeterminado, asegúrese de tener el siguiente ancho / alto, de lo contrario, los numStars podrían estropearse:

android:layout_width="wrap_content"
android:layout_height="wrap_content"
Sean
fuente
1
el uso de este estilo style = "? android: attr / ratingBarStyleSmall" reducirá el tamaño
Mightian
2

En RatingBardar atributo:

style="?android:attr/ratingBarStyleIndicator" 
rajlaxmi_jagdale
fuente
2

En la RatingBaretiqueta, agregue estas dos líneas

style="@style/Widget.AppCompat.RatingBar.Small"
android:isIndicator="false"
Mirza Haider
fuente
0

Para aquellos que crearon la barra de calificación mediante programación y desean establecer una barra de calificación pequeña en lugar de la barra de calificación grande predeterminada

    LinearLayout privado generateRatingView (valor flotante) {
        LinearLayout linearLayoutRating = new LinearLayout (getContext ());
        linearLayoutRating.setLayoutParams (nuevo 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 (falso);
        ratingBar.setStepSize (Float.parseFloat ("0.5")); // para habilitar media estrella
        ratingBar.setNumStars (5);
        ratingBar.setRating (valor);
        linearLayoutRating.addView (ratingBar);
        return linearLayoutRating;
    }

Sachin Tanpure
fuente
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" />

¡Solo style="@style/Widget.AppCompat.RatingBar.Small"úsalo funcionará seguro!

Prateek Gupta
fuente
0

Esto funcionó para mí.
Mira esta imagen

            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" />
Syed Umair
fuente