Android изменить цвет индикатора выполнения

Question

Я хочу получить индикатор прогресса круга, и я хочу, чтобы два цвета: первый - белый, а второй - синий. Я делаю это:

<ProgressBar
    android:id="@+id/PROGRESS_BAR"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@color/background_tutorial"
    android:indeterminateTint="@color/white"
    android:progressTint="@color/background_tutorial" />

Но я вижу только белый цвет, я не вижу синий цвет, который вижу белый цвет и пустой вид

Answer 1

Идея

Самым простым решением, работающим на всех версиях Android, является создание "стека" (например, с использованием RelativeLayout) с использованием ImageView и ProgressBar.

* 1007. * Если вы используете его во многих местах, я бы порекомендовал извлечь его как новый вид, где вы можете надуть ниже макета.

Код

1 ) Макет

Пример реализации:

<RelativeLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/progress_bar_background" />

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/progressBarStyle" />

</RelativeLayout>

Для Android версия> = 21 мы можем использовать:

android:indeterminateTint="#f00"

вместо настройки android:theme.

2) Стиль

К res/values/styles.xml мы должны добавить:

<style name="progressBarStyle" parent="@style/Theme.AppCompat">
    <item name="colorControlActivated">#FF0000</item>
</style>

(изменить цвет #FF0000 на ваш своя)

3) Фоновое кольцо Мы должны создать новый файл:

res/drawable/progress_bar_background.xml

Вы можете назвать этот файл как хотите, но помните, что мы используем это имя в макете (в пункте 1))

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:thicknessRatio="12"
    android:useLevel="false">

    <solid android:color="#FFFF00" />

</shape>

(измените цвет #FFFF00 на свой собственный)

Здесь есть хитрость с thicknessRatio, которая является толщиной кольца, выраженной как отношение ширины кольца.

Например, если толщинаRatio = 3, то толщина равна ширине кольца, деленной на 3.

В случае ProgressBar thicknessRatio равно 12.

Демо:

Редактировать - создать новый вид

1) Извлечь макет в файл:

res/layout/colorful_progress_bar.xml

содержимое файла:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/progress_bar_background" />

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/progressBarStyle" />

</RelativeLayout>

2) Создать новый вид и накачать макет из предыдущей точки

package com.example

import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.widget.RelativeLayout

class ColorfulProgressBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : RelativeLayout(context, attrs, defStyleAttr) {

    init {
        LayoutInflater.from(context).inflate(R.layout.colorful_progress_bar, this, true)
    }

}

3) Вы этот вид в вашем макете:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2F2F2F"
    android:gravity="center">

    <!-- Our own view -->
    <com.example.ColorfulProgressBar
        android:layout_width="100dp"
        android:layout_height="100dp" />

</LinearLayout>

Answer 2

Сделай так. В вашем XML макете:

<ProgressBar
        android:id="@+id/progress_circular"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginTop="12dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:indeterminateDrawable="@drawable/custom_progress_dialog"
        android:layout_gravity="center_horizontal"
        android:indeterminate="true" />

Пользовательский диалог хода выполнения:

<?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="56dip" android:height="56dip" />

    <gradient android:type="sweep" android:useLevel="false"
        android:startColor="#fff"
        android:endColor="#0000FF"
        android:angle="0"
        />

</shape>