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

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

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

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

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

        }
    });

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

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"


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


14
android:indeterminateTint="@color/yellow"

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


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

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

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

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"

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


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

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

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));
    }
}

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.


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>


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.


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>

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

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

Si tengo una variedad de colores, entonces?
Príncipe
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.