¿Cómo cambiar el color en la barra de progreso circular?

147

Estoy usando la barra de progreso circular en Android. Deseo cambiar el color de esto. estoy usando

"?android:attr/progressBarStyleLargeInverse" 

estilo. Entonces, cómo cambiar el color de la barra de progreso.

¿Cómo personalizar el estilo? Además, ¿cuál es la definición del estilo?

mooongcle
fuente

Respuestas:

163

En la carpeta res / drawable, ponga esto:

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> 

Establecer startColory endColorsegún su elección.

Ahora pon eso progress.xmlen ProgressBarel fondo.

Me gusta esto

<ProgressBar
  android:id="@+id/ProgressBar01" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:indeterminateDrawable="@drawable/progress"
 />
Chirag
fuente
1
no funciona cuando estoy usando un diálogo personalizado como encabezado de vista de lista. ¿Hay necesidad de otro enfoque?
Pankaj Kumar
22
Esto crea una forma de anillo verde, pero la ruleta real de ProgressBar todavía es visible.
mdupls
¿Hay alguna manera de hacer que los colores que giran se muevan en una sola dirección?
thepoosh
48
En lugar de establecer el fondo con "android: background", use "android: indeterminateDrawable =" @ drawable / progress "en su lugar, como lo resalta otra respuesta
baekacaek
1
Utilice android: startColor = "# 447a29" android: endColor = "# 227a29" valores diferentes para que no forme un círculo estático.
Abhishek Sengupta
137

Para API 21 y superior. Simplemente establezca la propiedad indeterminateTint. Me gusta:

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

Para admitir dispositivos anteriores a API 21:

mProgressSpin.getIndeterminateDrawable()
                .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );
Estudiante222
fuente
2
con style="?android:attr/progressBarStyle"no funciona
user25
Si tengo una variedad de colores y quiero establecer el color en una matriz de colores en cada barra de progreso
Prince
Esto funcionó bien para mí, solo para cambiar el color del anillo de la
barra de
Gracias por hacer hincapié en el aspecto de la API
JamisonMan111
Si pongo este color, colorea el anillo cortado giratorio pero todo, por lo que se convierte en un anillo completo para que no lo veas moverse
Lucas Zanella
135

1.Primero cree un archivo xml en una carpeta dibujable bajo recurso

llamado "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. Luego haga una barra de progreso usando el fragmento siguiente

<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
fuente
Hola Muhamed, estoy usando la rueda de progreso personalizada, intenté cambiar la rueda de color en progreso en el tiempo de ejecución. Estoy probado, una vez que hago clic en un botón, comienza el progreso. He configurado el color como verde. Después de que el progreso alcance el 100%, quiero que comience nuevamente, solo que esta vez su color debería ser rojo. Pero, no podría hacer eso ... si es posible por favor
ayúdenme
1
Gracias. Funciona al 100%. configure progress.xml en android: indeterminateDrawable
Leo Nguyen
Cuando probé esto, creó un borde grueso de círculo. ¿Alguna idea de cómo reducir la frontera?
Tejas
Hola Tejas, intenta cambiar esta línea android: thickRatio = "8" dentro de progress.xml. Puedes probar diferentes valores. Espero que funcione.
Muhamed Riyas M
Funciona, pero en lugar de dos anillos girando uno contra el otro, obtengo un solo anillo. ¿Alguna solución para esto?
AX
66

Puede cambiar el color mediante programación utilizando este código:

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

Si desea cambiar el color de la barra de progreso de ProgressDialog, puede usar esto:

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
fuente
Hola, ¿cómo voy a conectar la barra de progreso de ProgressDialog con Progress.xml?
Meghal Agrawal
Si tengo una variedad de colores y quiero establecer el color en una matriz de colores en cada barra de progreso
Prince
36

Para agregar a la respuesta de Dato, considero que SRC_ATOP es un filtro preferible para multiplicar, ya que admite mejor el canal alfa.

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.SRC_ATOP);
aikmanr
fuente
1
En 2.3.x esto le da un círculo lleno sólido donde MULTIPLY conserva la transparencia.
azdev
Si tengo una variedad de colores y quiero establecer el color en una matriz de colores en cada barra de progreso
Prince
28

android: indeterminateTint = "@ color / barra de progreso"

Bhupinder Singh
fuente
solo use el atributo anterior en la barra de progreso: indeterminateTint = your color
Bhupinder Singh
La mejor respuesta y sería compatible con todas las versiones también
Pankaj Kumar
Esto es todo lo que necesitas, no estas respuestas locas. Aunque otros se beneficiarían del bloque de código completo.
StarWind0
77
indeterminateTint está disponible para API 21 o superior. Si eso te funciona, ¡genial!
Andy Weinstein el
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
fuente
14
android:indeterminateTint="@color/yellow"

Esto es trabajo para mí, solo agregue esta línea a su código xml de barra de progreso

Yldirim
fuente
12

Eso es trabajo para mi.

<ProgressBar
android:id="@+id/ProgressBar01" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>
Kaloglu
fuente
44
Disponible desde API nivel 21
viplezer
11

Para personalizar la barra de progreso circular, necesitamos crear una barra de progreso indeterminada para mostrar la barra de progreso 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>

Necesitamos incluir dibujables en la barra de progreso de la siguiente manera:

<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
fuente
rotatefalta la etiqueta antes shape. Sin ella, la barra de progreso será estática
Renan Bandeira
@RenanBandeira puede mejorar la respuesta si es correcta
Akshay Mukadam
9

para mí el tema no funcionaba con acentoColor. Pero funcionó con 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
fuente
4

Para complementar la respuesta más votada de Muhamed Riyas M :

Rotación más rápida

android:toDegrees="1080"

Anillo más delgado

android:thicknessRatio="16"

Luz blanca

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

mira esta respuesta :

Para mí, estas dos líneas tenían que estar allí para que funcionara y cambiara el color:

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

PD: pero solo está disponible desde Android 21

Amin Keshavarzian
fuente
4

Intente usar un estilo y establezca colorControlActivated también el color ProgressBar deseado.

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

Luego establezca el tema de ProgressBar en un nuevo estilo.

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

Agregue a su tema de actividad, elemento colorControlActivated , por ejemplo:

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

Aplique este estilo a su Actividad en el manifiesto:

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

Puede hacerlo con un cuadro de diálogo personalizado con bastante facilidad, reutilizando el xml de otras respuestas:

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

Solo haz esto:

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

Puede usar un estilo para cambiar el color del progreso como se muestra a continuación

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

y úsalo en la barra de progreso como a continuación

<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 eso ayude.

Rahul
fuente
1

Para todos aquellos que se preguntan cómo aumentar la velocidad del progreso 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
fuente
0

Toma el valor de color de Res / Values ​​/ Colors.xml -> colorAccent si lo cambia, el color de su barra de progreso también cambia.

Nocturnale
fuente
0

Conjunto android:indeterminateDrawable="@drawable/progress_custom_rotate"

Utilice el siguiente código para la barra de progreso del anillo circular personalizado

Copie el código a continuación y cree "progress_custom_rotate.xml" en la carpeta 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
fuente
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" />
Excepción de puntero nulo
fuente
-1

Puedes cambiar el color de tu barra de progreso usando el siguiente código:

progressBar.getProgressDrawable().setColorFilter(
    getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);
usuario3273957
fuente
Si tengo una variedad de colores, entonces?
Príncipe