Como criar ProgressBar circular no android? [fechadas]


152

Você tem alguma idéia de como fazer uma barra de progresso circular como a do aplicativo Google Fit? Como na imagem abaixo.

insira a descrição da imagem aqui


7
Eu realmente fiz algo assim recentemente. Este pode ser um ponto de partida útil? github.com/daentech/CircularDemo
daentech

@daentech Ótimo! obrigado
Mohamed

1
Alguém recebeu uma resposta em que as bordas da peça de carregamento são arredondadas, como no exemplo?
Siebe

1
@Se você pode usar a biblioteca que mencionei na minha resposta. Ela pode ser personalizada para carregar a parte que você deseja.
WannaBeGeek

2
talvez isso você pode apontar na direção certa github.com/grmaciel/two-level-circular-progress-bar
gmemario

Respostas:


128

Você pode experimentar esta biblioteca do Circle Progress

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Nota: use sempre a mesma largura e altura para as vistas de progresso

DonutProgress:

 <com.github.lzyzsd.circleprogress.DonutProgress
        android:id="@+id/donut_progress"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:circle_progress="20"/>

CircleProgress:

  <com.github.lzyzsd.circleprogress.CircleProgress
        android:id="@+id/circle_progress"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:circle_progress="20"/>

ArcProgress:

<com.github.lzyzsd.circleprogress.ArcProgress
        android:id="@+id/arc_progress"
        android:background="#214193"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:arc_progress="55"
        custom:arc_bottom_text="MEMORY"/>

como eles estão mostrando valores em andamento ao tentar setProgress no protegido void onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues ​​(); } mas não está funcionando
Erum

@Top Cat Como posso adicionar animação, como aumentar o zoom no progresso do círculo ou mikinw.blogspot.com/2013/03/glow-effect.html
user3233280

29
maior licença
radu122

19
Licença WTF. Haha
z21 29/09/2015

1
obtendo erro de prefixo não acoplado
Animesh Mangla

338

É fácil criar você mesmo

No seu layout, inclua o seguinte ProgressBarcom um drawable específico ( observe que você deve obter a largura das dimensões ). O valor máximo é importante aqui:

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:max="500"
    android:progress="0"
    android:progressDrawable="@drawable/circular" />

Agora crie o drawable em seus recursos com a seguinte forma. Brinque com os valores de raio (você pode usar em innerRadiusvez de innerRadiusRatio) e espessura.

circular (nível pré-pirulito OU API <21)

   <shape
        android:innerRadiusRatio="2.3"
        android:shape="ring"
        android:thickness="3.8sp" >
        <solid android:color="@color/yourColor" />
   </shape>

circular (> = pirulito OU nível da API> = 21)

    <shape
        android:useLevel="true"
        android:innerRadiusRatio="2.3"
        android:shape="ring"
        android:thickness="3.8sp" >
        <solid android:color="@color/yourColor" />
     </shape>

useLevel é "false" por padrão no nível 21 da API (pirulito).

Iniciar animação

Em seguida, no seu código, use um ObjectAnimatorpara animar o campo de progresso ProgessBardo seu layout.

ProgressBar progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
ObjectAnimator animation = ObjectAnimator.ofInt(progressBar, "progress", 0, 500); // see this max value coming back here, we animate towards that value
animation.setDuration(5000); // in milliseconds
animation.setInterpolator(new DecelerateInterpolator());
animation.start();

Stop Animation

progressBar.clearAnimation();

PS, ao contrário dos exemplos acima, ele fornece animação suave.


6
existem etapas, se você seguir isso, 99% de certeza de obter o resultado.
Murtaza Khursheed Hussain

5
Funciona como um encanto. Desejo que eu posso upvote este mais de uma vez
Mushtaq Jameel

2
Não funciona para mim a vista não é visível
JMRboosties

9
Eu não sei o que você está fazendo, a visualização não é visível, não é uma descrição completa do problema #
Murtaza Khursheed Hussain /

6
A sua resposta aparência pode trabalhar muito .. mas uma imagem = 1000 palavras .. por isso, se você adicionar a sua saída como imagem for útil para os futuros utilizadores - IMHO
Ranjith Kumar
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.