Как изменить цвет в круговой индикатор выполнения?


147

Я использую круговой индикатор на Android. Я хочу изменить цвет этого. Я использую

"?android:attr/progressBarStyleLargeInverse" 

стиль. Так как поменять цвет индикатора выполнения.

Как настроить стиль? Кроме того, каково определение стиля?

Ответы:


163

В папке res / drawable поместите это:

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> 

Установить startColorи endColorпо вашему выбору.

Теперь установите это progress.xmlв ProgressBarфоновом режиме.

Как это

<ProgressBar
  android:id="@+id/ProgressBar01" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:indeterminateDrawable="@drawable/progress"
 />

1
его не работает, когда я использую пользовательский диалог в качестве заголовка представления списка. Нужен ли другой подход?
— Панкадж Кумар

22
Это создает зеленую форму кольца, но фактический счетчик ProgressBar все еще виден.
— mdupls

Есть ли способ заставить вращающиеся цвета двигаться только в одном направлении?
— thepoosh

48
Вместо того, чтобы устанавливать фон с помощью «android: background», используйте «android: indeterminateDrawable =« @ drawable / progress »вместо этого, как это выделено другим ответом
— baekacaek

1
Используйте значения android: startColor = "# 447a29" android: endColor = "# 227a29", чтобы они не образовывали статический круг.
— Абхишек Сенгупта

137

Для API 21 и выше. Просто установите свойство indeterminateTint. Подобно:

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

Для поддержки устройств до API 21:

mProgressSpin.getIndeterminateDrawable()
                .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );

2
с style="?android:attr/progressBarStyle"не работает
— user25

Если у меня есть массив цветов, и я хочу установить цвет на массив цветов на каждом индикаторе выполнения
— Принц

Для меня это работало нормально, просто поменял цвет кольца progressBar :)
— Gastón Saillén

Спасибо за то, что подчеркнули аспект API
— JamisonMan111

Если я нарисую этот цвет, он раскрашивает вращающееся кольцо, но не все, поэтому оно превращается в полное кольцо, поэтому вы не видите его движущимся
— Лукас Занелла,

135

1. Сначала создайте XML-файл в папке Drawable под ресурсом.

с именем "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. затем сделайте индикатор выполнения, используя следующий фрагмент

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

Привет, Мухаммед, я использую пользовательское колесо прогресса, я пытался изменить цвет колеса прогресса во время выполнения. меня судят, как только я нажимаю на кнопку, прогресс начинается. Я установил зеленый цвет. После того, как прогресс достигнет 100%, я хочу, чтобы он начался снова, только на этот раз его цвет должен быть красным. Но я не смог этого сделать .. если возможно,
— пожалуйста,

1
Спасибо. Это работает на 100%. установить progress.xml на android: indeterminateDrawable
— Лео Нгуен

Когда я попробовал это, он создал толстую границу круга. Есть идеи как уменьшить границу?
— Tejas

Привет, Теджас, попробуйте изменить эту строку android: толщинаRatio = "8" внутри файла progress.xml. Вы можете попробовать разные значения. Надеюсь, это сработает.
— Мухаммед Рияс М

Это работает, но вместо двух колец, вращающихся друг против друга, я получаю только одно кольцо. Любое исправление для этого?
— AX

66

Вы можете изменить цвет программно с помощью этого кода:

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

Если вы хотите изменить цвет индикатора выполнения ProgressDialog, вы можете использовать это:

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

        }
    });

Эй, как я могу связать индикатор выполнения ProgressDialog с Progress.xml ??
— Мегхал Агравал

Если у меня есть массив цветов, и я хочу установить цвет на массив цветов на каждом индикаторе выполнения
— Принц

36

Чтобы добавить ответ Дато, я считаю SRC_ATOP предпочтительным фильтром для умножения, поскольку он лучше поддерживает альфа-канал.

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

1
На 2.3.x это дает сплошной закрашенный круг, в котором MULTIPLY сохраняет прозрачность.
— Аздев

Если у меня есть массив цветов, и я хочу установить цвет на массив цветов на каждом индикаторе выполнения
— Принц

28

андроид: indeterminateTint = "@ цвет / ProgressBar"


просто используйте вышеуказанный атрибут в строке состояния: indeterminateTint = ваш цвет
— Bhupinder Singh

Лучший ответ, и он будет поддерживать все версии также
— Pankaj Kumar

Это все, что вам нужно, а не эти сумасшедшие ответы. Хотя другие выиграют от полного блока кода.
— StarWind0

7
IndeterminateTint доступен для API 21 или выше. Если это работает для вас, потрясающе!
— Энди Вайнштейн


15
android:indeterminateTint="@color/yellow"

Это работа для меня, просто добавьте эту строку в ваш XML-код progressBar


12

Это работа для меня.

<ProgressBar
android:id="@+id/ProgressBar01" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>

4
Доступно с уровня API 21
— viplezer

11

Чтобы настроить круговой ProgressBar, нам нужно создать IndeterminateDrawable, чтобы показать пользовательский индикатор выполнения

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

Нам нужно включить drawable в ProgressBar, как показано ниже:

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

rotateтег отсутствует , прежде чем shape. Без этого прогрессбар будет статичным
— Ренан Бандейра

@RenanBandeira вы можете улучшить ответ, если он правильный
— Акшай Мукадам

9

для меня тема не работает с accentColor. Но это действительно работает с ColorControlActivation

    <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

проверить этот ответ :

для меня эти две строки должны были быть там, чтобы он работал и менял цвет:

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

PS: но это доступно только с Android 21


4

Попробуйте использовать стиль и установите colorControlActivation слишком нужный цвет ProgressBar.

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

Затем установите тему ProgressBar в новом стиле.

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

3

Добавьте в тему своей деятельности элемент colorControlActivation , например:

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

Примените этот стиль к своей Деятельности в манифесте:

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

2

Вы можете сделать это с помощью пользовательского диалога довольно легко, используя xml из других ответов:

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

Просто сделай это:

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

Вы можете использовать стиль для изменения цвета прогресса, как показано ниже

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

и использовать его в ProgressBar, как показано ниже

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

Надеюсь, поможет.


1

Для всех тех, кто интересуется, как увеличить скорость пользовательского прогресса

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

Он принимает значение цвета из вашего Res / Values ​​/ Colors.xml -> colorAccent, если вы его измените, ваш цвет progressBar также изменится.


0

Устанавливать android:indeterminateDrawable="@drawable/progress_custom_rotate"

Используйте код ниже для пользовательского индикатора выполнения кругового кольца

Скопируйте код ниже и создайте "progress_custom_rotate.xml" в папке 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

Вы можете изменить свой цвет индикатора выполнения, используя код ниже:

progressBar.getProgressDrawable().setColorFilter(
    getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);

Если у меня есть массив цветов тогда?
— Принц
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.