Como posso diminuir o tamanho da Ratingbar?


129

Na minha atividade, tenho algumas barras de classificação. Mas o tamanho dessa barra é tão grande! Como posso torná-lo menor?

Editar

Graças a Gabriel Negut, eu fiz isso com o seguinte estilo:

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

Agora, o tamanho é reduzido, mas o número de estrelas e a classificação não entram em vigor !!! Por quê? Eu tenho 7 estrelas que 6 deles está selecionado.


Você quer dizer uma barra de busca? Definir altura e largura funciona bem para mim. Você pode postar seu snippet de código aqui?
Shailendra Singh Rajawat

Eu recomendaria remover a "edição" e torná-la a resposta aceita. Isso ou @GabrielNegut pode editar sua resposta para incluir esse tipo de solução. A inclusão da solução na pergunta tira a experiência de perguntas e respostas.
Onebree

1
style="?android:attr/ratingBarStyleSmall"funciona para mim.
Muhammad Shahzad

Respostas:


163

O link original que eu publiquei agora está quebrado (há uma boa razão pela qual apenas publicar links não é o melhor caminho a percorrer). Você deve estilizar o estilo RatingBarcom ou com ratingBarStyleSmallum estilo personalizado Widget.Material.RatingBar.Small( desde que você esteja usando o Material Design no seu aplicativo).

Opção 1:

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

Opção 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
ou usando este estilo style = "? android: attr / ratingBarStyleSmall" reduzirá o tamanho.
Mightian

1
Mas há um preenchimento extra inútil à direita! Como remover isso ?!
Dr.jacky

Nota: Certifique-width = "wrap_content" para se livrar de estrelas extra
hkchakladar

72

Esta foi a minha solução depois de muito esforço para reduzir a barra de classificação em tamanho pequeno sem estofamento nem feio

 <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
Fiz logon apenas para votar sua resposta em relação ao uso do transformPivot para mitigar o problema de preenchimento irregular. Obrigado!
Imin

Finalmente não mais preenchimento !!
Uday

Resposta incrível! Obrigado!
Valerybodak 02/09/19

1
A escala incomoda o alinhamento das visualizações dos irmãos e desequilibra as margens e o espaçamento.
Prateek Gupta

63

Se você quiser mostrar a barra de classificação em tamanho pequeno, copie e cole esse código no seu projeto.

  <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
O que é o android: stepSize = "0.1"?
Darwin #


verifique também meu asnwer no final desta página.
Developine

@HammadTariqSahi É bom, continue assim, mas há algum problema no meu código? Deixe-me saber se há alguma coisa, por favor
Pir Fahim Shah

@PirFahimShah obrigado, mano, eu não verifiquei este código. você pode melhorar e estilizar a barra de classificação se seguir essa abordagem.
Developine

42

Você pode configurá-lo no código XML para RatingBar, usar scaleXe scaleYajustar de acordo. "1.0" seria o tamanho normal e qualquer coisa no ".0" o reduzirá, e também algo maior que "1.0" o 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
o problema é que a barra de classificação ainda ocupa a mesma largura e altura de antes, mesmo que os ícones sejam menores. Isso causa problemas de alinhamento, pois existem vários preenchimentos esquerdo e direito ao lado do primeiro e do último ícones. Por exemplo, se você deseja que seus ícones sejam "XXXXX", após o redimensionamento, ficará assim "----- XXXXX -----" onde o "-" é o espaço vazio e "X" é um ícone . Portanto, o seu bar classificação vai parecer que foi empurrado para a direita por causa do espaço vazio
theDazzler

1
Estou supondo que você esteja usando o layout relativo. É uma dor, mas você pode ajustá-lo para ir para a posição correta usando android:layout_marginRight e os gostos para obtê-lo da maneira que desejar.
precisa saber é o seguinte

4
para obter escala sem criar um preenchimento no add esquerda Android: transformPivotX = "0dp"
darwin

37

O trecho abaixo funcionou para redimensionar a ratingBar

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

insira a descrição da imagem aqui


2
como alterar a cor da barra de classificação para essa barra de classificação meio preenchimento, preenchimento completo e cor vazia?
Ganpat Kaliya

parâmetro de classificação é usado para preencher a barra de classificação, certo? Eu usei android: rating = "3.5", então 3.5 estrelas são preenchidas. você pode configurar até 5 porque max = 5 está definido no xml. Se você quer mudar as cores da barra de classificação, você tem que criar um estilo em style.xml ver este link: stackoverflow.com/a/35914622/2915785
Naveed Ahmad

como android: transformPivotX = "0dp" android: transformPivotY = "0dp" Programaticamente?
Salman Khakwani

1
@NaveedAhmad Mas há um preenchimento inútil à direita! Como remover isso ?!
Dr.jacky

@ Mr.Hyde verifique os estilos de raringbar stackoverflow.com/a/24407907/2915785 #
Naveed Ahmad

10

Exemplo de trabalho

             <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 adicione isso no seu arquivo 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>

Dessa forma, você não precisa personalizar a barra de classificação.


9

Confira minha resposta aqui . Melhor maneira de conseguir isso.

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

5
Você poderia elaborar como chegou à solução?
Onebree

Isso não permite RatingBarque seja alterado.
CopsOnRoad

3

Se você estiver usando a barra de classificação no Linearlayout com weightSum. Certifique-se de que você não deve atribuir o layout_weight para a barra de classificação. Em vez disso, coloque a barra de classificação dentro do layout relativo e dê peso ao layout relativo. Faça o conteúdo da quebra da largura da barra de classificação.

<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, você tem 2 estilos para usar; Indicatore Smallpara tamanhos grandes e pequenos, respectivamente. Veja o exemplo abaixo.

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

2

Se você precisar apenas do estilo padrão, verifique se possui a seguinte largura / altura; caso contrário, o numStars poderá ficar bagunçado:

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

1
usando este estilo style = "? android: attr / ratingBarStyleSmall" irá reduzir o tamanho
Mightian


2

Na RatingBartag, adicione essas duas linhas

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

0

Para quem criou a barra de classificação programaticamente e deseja definir uma barra de classificação pequena em vez da barra de classificação grande padrão

    private LinearLayout generateRatingView (valor flutuante) {
        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")); // para ativar meia estrela
        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" />

Basta usá- style="@style/Widget.AppCompat.RatingBar.Small"lo funcionará com certeza!


0

Isso funcionou para mim.
Verifique esta imagem

            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" />
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.