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


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

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

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

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

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í


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.


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

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

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>

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

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"

1
el uso de este estilo style = "? android: attr / ratingBarStyleSmall" reducirá el tamaño
Mightian


2

En la RatingBaretiqueta, agregue estas dos líneas

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

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


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!


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