Como criar uma RatingBar menor?

134

Adicionei uma RatingBar em um layout:

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

Mas o estilo padrão da barra de classificação é muito grande.
Eu tentei alterá-lo adicionando o estilo android:style="?android:attr/ratingBarStyleSmall"

Mas o resultado é muito pequeno e é impossível definir uma taxa com essa propriedade.

Como eu poderia fazer?

Clem
fonte

Respostas:

106

O widget RatingBar padrão é meio que manco.

A fonte faz referência ao estilo " ?android:attr/ratingBarStyleIndicator", além do " ?android:attr/ratingBarStyleSmall" que você já conhece. ratingBarStyleIndicatoré um pouco menor, mas ainda é muito feio e os comentários observam que esses estilos "não suportam interação".

Você provavelmente está melhor rolando o seu próprio. Há um guia de aparência decente em http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/ mostrando como fazer isso. (Eu ainda não o fiz, mas tentarei em um dia ou mais.)

Boa sorte!

ps Desculpe, estava indo para postar um link para a fonte para você bisbilhotar, mas eu sou um novo usuário e não pode postar mais de 1 URL. Se você vasculhar a árvore de origem, ela estará localizada em frameworks / base / core / java / android / widget / RatingBar.java

Farray
fonte
É muito melhor para usar o Android: attr / ratingBarStyleSmall e tema rating global definida, mas não usar o nome exatamente tema, muito obrigado;)?
Tsung Goh
7
se nós conjunto de propriedades indicador Android: isIndicator = "false" do que vai interagir com ele ..
Mayur R. Amipara
Os documentos implicam ratingBarStyleSmall é o menor dos dois. Eu acho que seu comentário está atrasado.
AdamMc331
5
Link quebrado.
9119 Denny
O Conteúdo @Denny está disponível no Google Cache . Não atualizo a postagem com o conteúdo, pois não vejo as barras de classificação do Android há anos e não tenho certeza se o conteúdo desse link ainda é válido.
Farray
195

Como colar o código fornecido aqui ...

Passo 1. Você precisa de suas próprias estrelas de classificação em res/drawable...

Uma estrela cheia

Estrela vazia

Passo-2 Em res/drawablevocê precisa ratingstars.xmlcomo segue ...

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

Passo-3 Em res/valuesvocê precisa styles.xmlcomo segue ...

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

Etapa 4 no seu layout ...

<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"    
/>  
Vaibhav Jani
fonte
7
Não deve: <item android: id = "@ + android: id / secundárioProgress" android: drawable = "@ drawable / star_empty" /> ser "@ drawable / star_half" /> ou como você o chamou?
StackOverflowed
8
Muitíssimo obrigado. No entanto, apenas um pequeno comentário: você não precisa de uma imagem de meia estrela. Será gerado automaticamente com base no progresso.
Boris Strandjev
1
@ Vlad Leia a primeira linha de resposta que mencionei de onde recebo isso.
Vaibhav Jani
4
funciona perfeitamente :) mas eu tenho 2 problemas .. o numStars não funciona mais, e eu não posso ficar um pouco maior, mesmo se eu definir a largura máxima e mínima
Ahmad Dwaik 'Warlock'
1
Obrigado @PiedPiper - isso me salvou muito tempo !! Melhor explicação de sempre!
Edmond Tamas
70

Apenas use:

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

Mude o fator de escala de acordo com sua necessidade.

Para escalar sem criar um preenchimento à esquerda, adicione

android:transformPivotX="0dp"
Loolooii
fonte
scaleX scaleY são bons, mas deixam um preenchimento feio, se você pudesse se livrar desse preenchimento, seria a resposta perfeita mais fácil
Ahmad Dwaik 'Warlock'
Além disso, eles exigem Android 3.0 / API 11
averasko
6
I resolver o preenchimento feio (direita) por codeandroid:scaleX="0.75" android:scaleY="0.75" android:layout_marginRight="-25dp"
Hannes ach
1
Embora essa pareça a solução mais fácil, ela não funcionou para mim. Por alguma razão, não houve efeito. É porque eu estou no Android 5.x?
Nautilus
você pode remover alguma cobertura extra especificando altura da barra de classificação ex:android:layout_height="40dp"
Manohar Reddy
43

Não há necessidade de adicionar um ouvinte ao arquivo ?android:attr/ratingBarStyleSmall. Basta adicionar android:isIndicator=falsee ele capturará eventos de clique, por exemplo

<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" />
zyamys
fonte
4
isIndicator é a chave!
deadfish
19

o pequeno implementar pelo sistema operacional

<RatingBar
    android:id="@+id/ratingBar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    />
Bouchehboun Saad
fonte
2
A barra de classificação não é clicável ao fornecer o código acima.
Sharath
16

aplique isso.

<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" />
Mohammed Azharuddin Shaikh
fonte
1
Embora visualmente seja ótimo. eventos de clique que não funcionam nesta solução. você tem alguma correção para isso?
Gökhan Barış Aker
4
se você quiser que os cliques uso de trabalho Android: isIndicator = "false"
D4rWiNS
15

Encontrei uma solução mais fácil do que acho que foi dada pelos mencionados acima e mais fácil do que criar a sua própria. Eu simplesmente criei uma pequena barra de classificação e adicionei um onTouchListener a ela. A partir daí, calculo a largura do clique e determino o número de estrelas a partir disso. Depois de usar isso várias vezes, a única peculiaridade que encontrei é que o desenho de uma pequena barra de classificação nem sempre fica certo em uma tabela, a menos que eu o inclua em um LinearLayout (parece correto no editor, mas não no dispositivo) . Enfim, no meu layout:

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

e dentro da minha atividade:

    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 isto ajude alguém. Definitivamente mais fácil do que desenhar (embora eu tenha achado que isso também funciona, mas eu só queria um uso fácil das estrelas).

user1676075
fonte
Funciona e é fácil ... mas as ratingBarStyleSmallestrelas são realmente pequenas demais para serem úteis. Acho que vou ter que rolar sozinho para conseguir estrelas de tamanho intermediário.
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" />
chry
fonte
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>

// adicione estas linhas para uma pequena barra de classificação

style = "?android:attr/ratingBarStyleSmall"
indrajeet jyoti
fonte
Embora esse snippet de código possa ser a solução, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
27719 Johan Johan
3

embora a resposta de Farry funcione, para dispositivos Samsung o RatingBar tomou a cor azul aleatória em vez da definida por mim. Então use

style="?attr/ratingBarStyleSmall"

em vez de.

Código completo de como usá-lo:

<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>
murt
fonte
3

A melhor resposta para a barra de classificação pequena

<RatingBar
                    android:layout_width="wrap_content"
                    style = "?android:attr/ratingBarStyleSmall"
                    android:layout_height="wrap_content" />
Arun Prajapati
fonte
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" />
Dharmendra Mishra
fonte
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" />
MDP
fonte
2

A melhor resposta que recebi

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

usuário 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" />

Aumente / diminua os tamanhos usando o valor scaleX e scaleY

AMAN SINGH
fonte
1

use o código a seguir para uma barra de classificação pequena com o 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" />
arunkrishna
fonte
0

Depois de muita pesquisa, encontrei a melhor solução para reduzir o tamanho das barras de classificação personalizadas: obter o tamanho do progresso desenhável em determinados tamanhos, conforme mencionado abaixo:

xxhdpi - 48 * 48 px

xhdpi - 36 * 36 px

hdpi - 24 * 24 px

E com estilo, coloque a minheight e maxheight como 16 dp para toda a resolução.

Informe-me se isso não ajudar a obter as melhores barras de classificação para tamanhos pequenos, pois achei esses tamanhos muito compatíveis e equivalentes ao atributo de estilo ratingbar.small.

praveen dewangan
fonte
0

Está funcionando para mim na barra de classificação xml style = "? Android: attr / ratingBarStyleSmall" adicione this.it funcionará.

S HemaNandhini
fonte
-4

Resolvo esse problema da seguinte maneira: style = "? Android: attr / ratingBarStyleSmall"

Hai Rom
fonte
Isso é o que o OP já tentou e outras respostas já mencionaram.
Pang