Como mudar a cor na barra de progresso circular?

147

Estou usando a barra de progresso circular no Android. Desejo mudar a cor disso. estou usando

"?android:attr/progressBarStyleLargeInverse" 

estilo. Então, como alterar a cor da barra de progresso.

Como personalizar o estilo? Além disso, qual é a definição do estilo?

mooongcle
fonte

Respostas:

163

Na pasta res / drawable, coloque o seguinte:

progress.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:pivotX="50%" 
      android:pivotY="50%" 
      android:fromDegrees="0"
      android:toDegrees="360">

    <shape 
        android:shape="ring" 
        android:innerRadiusRatio="3"
        android:thicknessRatio="8" 
        android:useLevel="false">

    <size 
        android:width="76dip" 
        android:height="76dip" />

    <gradient 
        android:type="sweep" 
        android:useLevel="false"
        android:startColor="#447a29" 
        android:endColor="#00ffffff"
        android:angle="0"/>

    </shape>

</rotate> 

Defina startColore endColorconforme sua escolha.

Agora defina isso progress.xmlno fundo ProgressBar.

Como isso

<ProgressBar
  android:id="@+id/ProgressBar01" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:indeterminateDrawable="@drawable/progress"
 />
Chirag
fonte
1
não está funcionando quando estou usando o diálogo personalizado como cabeçalho de exibição de lista. Há necessidade de outra abordagem?
Pankaj Kumar
22
Isso cria uma forma de anel verde, mas o botão giratório do ProgressBar real ainda é visível.
Mdupls
existe uma maneira de fazer com que as cores giratórias se movam em apenas uma direção?
thepoosh 18/10/12
48
Em vez de definir o fundo com "android: Fundo", use "Android: indeterminateDrawable =" @ drawable / progresso" em vez disso, como destaca outra resposta
baekacaek
1
Use valores android: startColor = "# 447a29" android: endColor = "# 227a29" diferentes para que não forme um círculo estático.
Abhishek Sengupta
137

Para API 21 e superior. Basta definir a propriedade indeterminateTint. Gostar:

android:indeterminateTint="@android:color/holo_orange_dark"

Para suportar dispositivos pré-API 21:

mProgressSpin.getIndeterminateDrawable()
                .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );
Estudante222
fonte
2
com style="?android:attr/progressBarStyle"não funciona
user25 16/16
Se eu tiver uma variedade de cores e quero definir a cor para uma matriz de cor na cada barra de progresso
o príncipe
Isso funcionou bem para mim, só para mudar a cor do anel progressBar :)
Gastón Saillén
Obrigado por enfatizar o aspecto das APIs #
JamisonMan111
Se eu colocar essa cor, pinta o anel cortado rotativo, mas tudo, então ele se transforma em um anel completo para que você não o veja se movendo
Lucas Zanella
135

1.Primeiro, crie um arquivo xml na pasta drawable em resource

chamado "progress.xml"

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false" >

    <size
        android:height="76dip"
        android:width="76dip" />

    <gradient
        android:angle="0"
        android:endColor="color/pink"
        android:startColor="@android:color/transparent"
        android:type="sweep"
        android:useLevel="false" />

    </shape>

</rotate>

2. faça uma barra de progresso usando o snippet a seguir

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/relativeLayout1"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp"
    android:indeterminate="true"
    android:indeterminateDrawable="@drawable/progress" />
Muhamed Riyas M
fonte
Oi Muhamed, estou usando a roda de progresso personalizada, tentei alterar a cor da roda de progresso em tempo de execução. Eu sou tentado. Depois de clicar em um botão, o progresso começa. Eu ajustei a cor como verde. Depois que o progresso atingir 100%, quero que comece novamente, só que desta vez a cor deve ficar vermelha. Mas, eu não poderia capaz de fazer isso .. se possível pls me ajudar
Harikrishnan
1
Obrigado. Funciona 100%. conjunto progress.xml para android: indeterminateDrawable
Leo Nguyen
Quando tentei isso, ele criou uma borda grossa de círculo. Alguma idéia de como reduzir a fronteira?
Tejas
Oi pessoal, Tente alterar esta linha android: thicknessRatio = "8" dentro do progress.xml. Você pode tentar valores diferentes. Espero que funcione.
Muhamed Riyas M
Funciona, mas em vez de dois anéis girando um contra o outro, recebo apenas um anel. Alguma correção para isso?
AX
66

Você pode alterar a cor programaticamente usando este código:

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
                        android.graphics.PorterDuff.Mode.MULTIPLY);

Se você quiser alterar a cor da barra de progresso do ProgressDialog, use:

mDilog.setOnShowListener(new OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            ProgressBar v = (ProgressBar)mDilog.findViewById(android.R.id.progress);
            v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
                    android.graphics.PorterDuff.Mode.MULTIPLY);

        }
    });
Dadroid
fonte
Ei, como vou conectar a barra de progresso do ProgressDialog com Progress.xml?
Meghal Agrawal
Se eu tiver uma variedade de cores e quero definir a cor para uma matriz de cor na cada barra de progresso
o príncipe
36

Para adicionar à resposta de Dato, considero SRC_ATOP um filtro preferível para multiplicar, pois suporta melhor o canal alfa.

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.SRC_ATOP);
aikmanr
fonte
1
No 2.3.x, isso fornece um círculo sólido e cheio onde MULTIPLY preserva a transparência.
azdev
Se eu tiver uma variedade de cores e quero definir a cor para uma matriz de cor na cada barra de progresso
o príncipe
28

android: indeterminateTint = "@ color / progressbar"

Bhupinder Singh
fonte
basta usar acima atributo na barra de progresso: indeterminateTint = sua cor
Bhupinder Singh
Melhor resposta e que apoiaria para todas as versões também
Pankaj Kumar
É tudo o que você precisa, não essas respostas malucas. Embora outros se beneficiem do bloco de código completo.
StarWind0
7
indeterminateTint está disponível para API 21 ou superior. Se isso funciona para você, ótimo!
Andy Weinstein
15

styles.xml

<style name="CircularProgress" parent="Theme.AppCompat.Light">
    <item name="colorAccent">@color/yellow</item>
</style>

  <ProgressBar
        android:layout_width="@dimen/d_40"
        android:layout_height="@dimen/d_40"
        android:indeterminate="true"
        style="@style/Widget.AppCompat.ProgressBar"
        android:theme="@style/CircularProgress"/>
Hardik Vasani
fonte
14
android:indeterminateTint="@color/yellow"

Isso é trabalho para mim, basta adicionar esta linha ao seu código xml progressBar

Yıldırım
fonte
12

Isso é trabalho para mim.

<ProgressBar
android:id="@+id/ProgressBar01" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>
Kaloglu
fonte
4
Disponível a partir do API nível 21
viplezer
11

Para personalizar a ProgressBar circular, precisamos criar um indeterminateDrawable para mostrar a barra de progresso personalizada

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1">

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">

        <size
            android:height="48dip"
            android:width="48dip" />

        <gradient
            android:centerColor="#f96047"
            android:centerY="0.50"
            android:endColor="#fb9c8d"
            android:startColor="#f72d0c"
            android:type="sweep"
            android:useLevel="false" />

    </shape>

</rotate>

Precisamos incluir drawable na barra de progresso, como abaixo:

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_centerInParent="true"
    style="?android:attr/progressBarStyleLarge"
    android:visibility="visible"
    android:progressDrawable="@drawable/widget_progressbar"
    android:indeterminateDrawable="@drawable/widget_progressbar"
    android:layout_height="wrap_content" />
Akshay Mukadam
fonte
rotatefalta uma tag antes shape . Sem ele, o progressbar será estático
Renan Bandeira
@RenanBandeira você pode melhorar a resposta se a sua correcta
Akshay Mukadam
9

para mim, o tema não estava funcionando com o accentColor. Mas funcionou com colorControlActivated

    <style name="Progressbar.White" parent="AppTheme">
        <item name="colorControlActivated">@color/white</item>
    </style>

  <ProgressBar
        android:layout_width="@dimen/d_40"
        android:layout_height="@dimen/d_40"
        android:indeterminate="true"
        android:theme="@style/Progressbar.White"/>
S.Javed
fonte
4

Para complementar a resposta mais votada de Muhamed Riyas M :

Rotação mais rápida

android:toDegrees="1080"

Anel mais fino

android:thicknessRatio="16"

Branco claro

android:endColor="#80ffffff"
Suragch
fonte
4

verifique esta resposta :

para mim, essas duas linhas tinham que estar lá para funcionar e mudar a cor:

android:indeterminateTint="@color/yourColor"
android:indeterminateTintMode="src_in"

PS: mas está disponível apenas no android 21

Amin Keshavarzian
fonte
4

Tente usar um estilo e defina a cor ProgressBar também desejada colorControlActivated.

<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
    <item name="colorControlActivated">@color/COLOR</item>
</style>

Em seguida, defina o tema da ProgressBar para um novo estilo.

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/progressColor"
 />
this.Mitch
fonte
3

Adicione ao seu tema de atividade, item colorControlActivated , por exemplo:

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
            ...
            <item name="colorControlActivated">@color/rocket_black</item>
            ...
    </style>

Aplique esse estilo à sua atividade no manifesto:

<activity
    android:name=".packege.YourActivity"
    android:theme="@style/AppTheme.NoActionBar"/>
Vladislav
fonte
2

Você pode fazer isso com uma caixa de diálogo personalizada com bastante facilidade, reutilizando o xml de outras respostas:

<?xml version="1.0" encoding="utf-8"?>

<shape
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="8"
    android:useLevel="false" >

    <size
        android:height="76dip"
        android:width="76dip" />

    <gradient
        android:angle="0"
        android:endColor="@color/oceanBlue"
        android:startColor="@android:color/transparent"
        android:type="sweep"
        android:useLevel="false" />

</shape>

Apenas faça o seguinte:

public static class ModifiedProgressDialog extends ProgressDialog {
    public ModifiedProgressDialog(Context context) {
        super(context);
    }

    @Override
    public void show() {
        super.show();
        setIndeterminateDrawable(getContext().getResources().getDrawable(R.drawable.blue_progress));
    }
}
Nathaniel D. Waggoner
fonte
2

Você pode usar um estilo para alterar a cor do progresso, como abaixo

 <style name="AppTheme.anyName">
        <item name="colorAccent">YOUR_COLOR</item>
    </style>

e use-o na ProgressBar como abaixo

<ProgressBar
            style="?android:attr/progressBarStyle"
            android:theme="@style/AppTheme.WhiteAccent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/dimen_30"
        />

Espero que ajude.

Rahul
fonte
1

Para todos aqueles que querem saber como aumentar a velocidade do progresso personalizado

  <?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="1080"><!--HERE YOU COULD INCREASE SPEED BY SETTING TODEGRESS(1080 is 3 loops instead of 1 in same amt of time)-->
<shape android:shape="ring" android:innerRadiusRatio="3"
    android:thicknessRatio="8" android:useLevel="false">
    <size android:width="76dip" android:height="76dip" />
    <gradient android:type="sweep" android:useLevel="false"
        android:startColor="#447a29" 
        android:endColor="#447a29"
        android:angle="0"
         />
</shape>

Behl
fonte
0

Ele pega o valor da cor em Res / Values ​​/ Colors.xml -> colorAccent, se você o alterar, a cor progressBar também será alterada.

Noturno
fonte
0

Conjunto android:indeterminateDrawable="@drawable/progress_custom_rotate"

Use o código abaixo para a barra de progresso do anel circular personalizado

Copie o código abaixo e crie "progress_custom_rotate.xml" na pasta Drawable

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
    android:toDegrees="1080">

    <shape android:shape="ring" android:innerRadiusRatio="3"
        android:thicknessRatio="8" android:useLevel="false">

        <size android:width="48dip" android:height="48dip" />

        <gradient android:type="sweep" android:useLevel="false"
            android:startColor="#4c737373" android:centerColor="#4c737373"
            android:centerY="0.50" android:endColor="#ffffd300" />

    </shape>

</rotate>
Bhavesh Moradiya
fonte
0
<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
    <item name="colorControlActivated">@color/colorPrimary</item>
</style>


<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="250dp"
    android:theme="@style/progressColor"
    android:layout_height="250dp"
    android:layout_centerInParent="true" />
Null Pointer Exception
fonte
-1

Você pode alterar a cor da barra de progresso usando o código abaixo:

progressBar.getProgressDrawable().setColorFilter(
    getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);
user3273957
fonte
Se eu tenho uma matriz de cores, então?
Prince