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


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.