Jak stworzyć okrągły pasek postępu w Androidzie, który się na nim obraca?

154

Próbuję utworzyć zaokrąglony pasek postępu. To jest to, co chcę osiągnąć

W tle znajduje się szary pierścień. Na górze pojawia się niebieski pasek postępu, który porusza się po okrągłej ścieżce od 0 do 360 w ciągu 60 lub dowolnej ilości sekund.

wprowadź opis obrazu tutaj

Oto mój przykładowy kod.

<ProgressBar
            android:id="@+id/ProgressBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            style="?android:attr/progressBarStyleLarge"
            android:indeterminateDrawable="@drawable/progressBarBG"
            android:progress="50"
            />

Aby to zrobić, w możliwym do rysowania „progressBarBG” tworzę listę warstw, a wewnątrz tej listy warstw podaję dwa elementy, jak pokazano.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape
            android:shape="ring"
            android:innerRadius="64dp"
            android:thickness="8dp"
            android:useLevel="false">

        <solid android:color="@color/grey" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape
                android:shape="ring"
                android:innerRadius="64dp"
                android:thickness="8dp"
                android:useLevel="false">

            <solid android:color="@color/blue" />
        </shape>
    </clip>
</item>

Teraz pierwszy szary pierścień jest generowany dobrze. Jednak niebieski pierścień zaczyna się od lewej strony rysunku i przechodzi w prawo, tak jak działa liniowy pasek postępu. W ten sposób pokazuje 50% postęp z czerwoną strzałką pokazującą kierunek.

wprowadź opis obrazu tutaj

Chcę przesunąć niebieski pasek postępu po ścieżce kołowej zgodnie z oczekiwaniami.

Saurav Srivastava
źródło
9
Nie jestem pewien, dlaczego zostałeś przegłosowany, wydaje się trochę niesprawiedliwy.
BenjaminPaul
1
Spojrzałem przed wysłaniem tego pytania. Znalazłem kilka odpowiedzi, ale nie zadziałały w tym, co próbuję osiągnąć. Może ktoś zlekceważył mnie, myśląc, że to zduplikowany post.
Saurav Srivastava
1
może to wskaże Ci właściwy kierunek github.com/grmaciel/two-level-circular-progress-bar
gmemario
1
możesz korzystać z tej biblioteki github.com/emre1512/CircleProgressBar
Zapdos
1
Czy mógłbyś wynagrodzić jedną z hojnych osób, które próbowały znaleźć dla ciebie rozwiązanie, za jej wielki wysiłek, akceptując jedną z udzielonych odpowiedzi?
CEO tech4lifeapps,

Odpowiedzi:

324

Oto moje dwa rozwiązania.

Krótka odpowiedź:

Zamiast tworzyć plik layer-list, podzieliłem go na dwa pliki. Jeden za ProgressBari jeden za tło.

Jest to ProgressDrawableplik (@drawable folder): circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

A to dla jego background(folderu @drawable): circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="1dp"
    android:useLevel="false">

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

</shape>

I na koniec, wewnątrz układu, w którym pracujesz:

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:background="@drawable/circle_shape"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="65" />

Oto wynik:

wynik 1

Długa odpowiedź:

Użyj widoku niestandardowego, który dziedziczy android.view.View

wynik 2

Oto pełny projekt na github

M. Reza Nasirloo
źródło
@Pedram Jak ustawić procent na pasku postępu? Jak na przykład, obecnie jest to 50%. Jak ustawić 50% na pasku postępu?
@ 20 centów, Przeczytaj dokumentację, powinieneś otrzymać odniesienie do swojego progressbar i wywołać jego setProgressmetodę, a następnie przekazać wartość. google.com/…
M. Reza Nasirloo
Oszalałem, próbując znaleźć prawidłowe wartości, czerwone dziesiątki tematów związanych z przepełnieniem stosu, tylko po to, aby znaleźć tutaj android:fromDegrees="270" android:toDegrees="270"rozwiązanie .. rozwiązałem to !! Wielkie dzięki!
Henrique de Sousa
@Skynet Tak i nie próbowałem tego naprawiać, ponieważ wolę stworzyć w pełni dostosowaną
wersję
1
@MimArmand Hej, dzięki, w rzeczywistości zaczyna ponownie działać w aktualizacji Lollipop 5.1, i ta linia rozwiązuje problem z interfejsem API 21.
M. Reza Nasirloo
23

Zrobiłem w prosty sposób:

Sprawdź zrzut ekranu dla tego samego.

CustomProgressBarActivity.java :

public class CustomProgressBarActivity extends AppCompatActivity {

    private TextView txtProgress;
    private ProgressBar progressBar;
    private int pStatus = 0;
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_progressbar);

        txtProgress = (TextView) findViewById(R.id.txtProgress);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);

        new Thread(new Runnable() {
            @Override
            public void run() {
                while (pStatus <= 100) {
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            progressBar.setProgress(pStatus);
                            txtProgress.setText(pStatus + " %");
                        }
                    });
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    pStatus++;
                }
            }
        }).start();

    }
}

activity_custom_progressbar.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.skholingua.android.custom_progressbar_circular.MainActivity" >


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/custom_progressbar_drawable"
            android:secondaryProgress="0" />


        <TextView
            android:id="@+id/txtProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/progressBar"
            android:layout_centerInParent="true"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </RelativeLayout>



</RelativeLayout>

custom_progressbar_drawable.xml :

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="270" >

    <shape
        android:shape="ring"
        android:useLevel="false" >
        <gradient
            android:centerY="0.5"
            android:endColor="#FA5858"
            android:startColor="#0099CC"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

Mam nadzieję, że to ci pomoże.

Hiren Patel
źródło
Cześć Hiren, próbuję wyświetlić tylko dwa kolory w widoku. Czerwone i zielone. Ale widzę też w kole mieszankę czerwieni i zieleni. Jak mogę to usunąć?
Lokesh Pandey
20

Napisałem szczegółowy przykład na okrągłym pasku postępu w Androidzie tutaj na moim blogu demonuts.com . Możesz tam również polubić pełny kod źródłowy i wyjaśnienia.

Oto, jak utworzyłem okrągły pasek postępu z procentem wewnątrz koła w czystym kodzie bez żadnej biblioteki.

wprowadź opis obrazu tutaj

najpierw utwórz plik do rysowania o nazwie circular.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">


            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">

            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">


                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />

                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

Teraz w Twoim activity_main.xml dodaniu:

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dialog"
    tools:context="com.example.parsaniahardik.progressanimation.MainActivity">

    <ProgressBar

        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="50"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/circular"
        android:secondaryProgress="100"
        />

    <ImageView
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@drawable/whitecircle"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="25%"
        android:layout_centerInParent="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

</RelativeLayout>

W activity_main.xmlprzypadku użyłem jednego okrągłego obrazu z białym tłem, aby pokazać białe tło wokół wartości procentowej. Oto obraz:

wprowadź opis obrazu tutaj

Możesz zmienić kolor tego obrazu, aby ustawić niestandardowy kolor wokół tekstu procentowego.

Teraz wreszcie dodaj następujący kod do MainActivity.java :

import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.DecelerateInterpolator;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    int pStatus = 0;
    private Handler handler = new Handler();
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.circular);
        final ProgressBar mProgress = (ProgressBar) findViewById(R.id.circularProgressbar);
        mProgress.setProgress(0);   // Main Progress
        mProgress.setSecondaryProgress(100); // Secondary Progress
        mProgress.setMax(100); // Maximum Progress
        mProgress.setProgressDrawable(drawable);

      /*  ObjectAnimator animation = ObjectAnimator.ofInt(mProgress, "progress", 0, 100);
        animation.setDuration(50000);
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();*/

        tv = (TextView) findViewById(R.id.tv);
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                while (pStatus < 100) {
                    pStatus += 1;

                    handler.post(new Runnable() {

                        @Override
                        public void run() {
                            // TODO Auto-generated method stub
                            mProgress.setProgress(pStatus);
                            tv.setText(pStatus + "%");

                        }
                    });
                    try {
                        // Sleep for 200 milliseconds.
                        // Just to display the progress slowly
                        Thread.sleep(8); //thread will take approx 1.5 seconds to finish
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

Jeśli chcesz zrobić poziomy pasek postępu, kliknij ten link, zawiera wiele cennych przykładów z kodem źródłowym:
http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar

Parsania Hardik
źródło
15

Zdałem sobie sprawę z biblioteki Open Source na GitHub CircularProgressBar, która robi dokładnie to, co chcesz w najprostszy możliwy sposób:

Demo GIF CircularProgressBar

STOSOWANIE

Aby utworzyć okrągły pasek ProgressBar, dodaj CircularProgressBar do kodu XML układu i dodaj bibliotekę CircularProgressBar do projektora lub możesz też pobrać go za pomocą Gradle:

compile 'com.mikhaellopez:circularprogressbar:1.0.0'

XML

<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:background_progressbar_color="#FFCDD2"
    app:background_progressbar_width="5dp"
    app:progressbar_color="#F44336"
    app:progressbar_width="10dp" />

Aby zmienić CircularProgressBar, musisz użyć następujących właściwości w kodzie XML.

Nieruchomości:

  • app:progress (integer) >> domyślnie 0
  • app:progressbar_color (kolor) >> domyślny CZARNY
  • app:background_progressbar_color (kolor) >> domyślnie SZARY
  • app:progressbar_width (wymiar) >> domyślnie 7dp
  • app:background_progressbar_width (wymiar) >> domyślnie 3dp

JAWA

CircularProgressBar circularProgressBar = (CircularProgressBar)findViewById(R.id.yourCircularProgressbar);
circularProgressBar.setColor(ContextCompat.getColor(this, R.color.progressBarColor));
circularProgressBar.setBackgroundColor(ContextCompat.getColor(this, R.color.backgroundProgressBarColor));
circularProgressBar.setProgressBarWidth(getResources().getDimension(R.dimen.progressBarWidth));
circularProgressBar.setBackgroundProgressBarWidth(getResources().getDimension(R.dimen.backgroundProgressBarWidth));
int animationDuration = 2500; // 2500ms = 2,5s
circularProgressBar.setProgressWithAnimation(65, animationDuration); // Default duration = 1500ms

Znajdź lub pobierz tę bibliotekę tutaj >> https://github.com/lopspower/CircularProgressBar

lopez.mikhael
źródło
Próbuję tego, to jest naprawdę niesamowite, ale teraz znalazłem każdego słuchacza zmian animacji. Czy znasz jakiś sposób?
Md Imran Choudhury
@ lopez.mikhael Hej, czy masz jakieś pomysły, jak dodać obrazek pomiędzy okólnikiem?
hyperfkcb
@DeniseTan możesz po prostu użyć do tego FrameLayout lub RelativeLayout.
lopez.mikhael
8

Oto prosty niestandardowy widok postępu kręgu wyświetlania. Możesz modyfikować i optymalizować bardziej, aby pasowały do ​​Twojego projektu.

class CircleProgressBar @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private val backgroundWidth = 10f
    private val progressWidth = 20f

    private val backgroundPaint = Paint().apply {
        color = Color.LTGRAY
        style = Paint.Style.STROKE
        strokeWidth = backgroundWidth
        isAntiAlias = true
    }

    private val progressPaint = Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = progressWidth
        isAntiAlias = true
    }

    var progress: Float = 0f
        set(value) {
            field = value
            invalidate()
        }

    private val oval = RectF()
    private var centerX: Float = 0f
    private var centerY: Float = 0f
    private var radius: Float = 0f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        centerX = w.toFloat() / 2
        centerY = h.toFloat() / 2
        radius = w.toFloat() / 2 - progressWidth
        oval.set(centerX - radius,
                centerY - radius,
                centerX + radius,
                centerY + radius)
        super.onSizeChanged(w, h, oldw, oldh)
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.drawCircle(centerX, centerY, radius, backgroundPaint)
        canvas?.drawArc(oval, 270f, 360f * progress, false, progressPaint)
    }
}

Przykład użycia

xml

<com.example.androidcircleprogressbar.CircleProgressBar
    android:id="@+id/circle_progress"
    android:layout_width="200dp"
    android:layout_height="200dp" />

kotlin

class MainActivity : AppCompatActivity() {
    val TOTAL_TIME = 10 * 1000L

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        timeOutRemoveTimer.start()
    }

    private var timeOutRemoveTimer = object : CountDownTimer(TOTAL_TIME, 10) {
        override fun onFinish() {
            circle_progress.progress = 1f
        }

        override fun onTick(millisUntilFinished: Long) {
            circle_progress.progress = (TOTAL_TIME - millisUntilFinished).toFloat() / TOTAL_TIME
        }
    }
}

Wynik

Phan Van Linh
źródło
5

Jestem nowy, więc nie mogę komentować, ale chciałem podzielić się leniwą poprawką. Używam również oryginalnego podejścia Pedrama i właśnie napotkałem ten sam problem z Lollipopem. Ale alanv w innym poście miał jedną poprawkę. To jakiś błąd lub przeoczenie w API21. Dosłownie po prostu dodaj android:useLevel="true"do swojego kręgu xml postępu. Nowe podejście Pedrama wciąż jest właściwą poprawką, ale pomyślałem, że podzielę się również leniwym rozwiązaniem.

Miao Liu
źródło
3

wypróbuj tę metodę, aby utworzyć mapę bitową i ustawić ją na widok obrazu.

private void circularImageBar(ImageView iv2, int i) {


    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint();

        paint.setColor(Color.parseColor("#c4c4c4"));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(150, 150, 140, paint);

        paint.setColor(Color.parseColor("#FFDB4C"));
        paint.setStrokeWidth(10);   
        paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(10,10,290,290);

        canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
        paint.setStrokeWidth(0);    
        paint.setTextAlign(Align.CENTER);
        paint.setColor(Color.parseColor("#8E8E93")); 
        paint.setTextSize(140);

        canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 

        iv2.setImageBitmap(b);
}
mani
źródło
2

https://github.com/passsy/android-HoloCircularProgressBar to jeden z przykładów biblioteki, która to robi. Jak stwierdził Tenfour04, będzie musiał być nieco niestandardowy, ponieważ nie jest obsługiwany bezpośrednio po wyjęciu z pudełka. Jeśli ta biblioteka nie zachowuje się tak, jak chcesz, możesz ją rozwidlić i zmodyfikować szczegóły, aby działała zgodnie z własnymi upodobaniami. Jeśli zaimplementujesz coś, co inni mogą następnie ponownie wykorzystać, możesz nawet przesłać żądanie ściągnięcia, aby ponownie to scalić!

Travis
źródło
Widziałem też tę bibliotekę, ale nie chciałem używać innej biblioteki innej firmy tylko do tego małego zadania. Jednak spróbuję obu metod wymienionych przez Ciebie i Tenfour04, aby zobaczyć, która z nich działa, i odpowiedzieć tutaj.
Saurav Srivastava
1
@SauravSrivastava: Szukam również podobnej animacji w mojej aplikacji. Czy znalazłeś rozwiązanie? Jeśli tak, udostępnij rozwiązanie.
Basher51
@Travis Zobacz to pytanie - stackoverflow.com/questions/44801280/…
Kumar
2

@Pedram, twoje stare rozwiązanie działa również dobrze w Lollipop (i jest lepsze niż nowe, ponieważ można go używać wszędzie, w tym w zdalnych widokach), po prostu zmień circular_progress_bar.xmlkod na ten:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="1dp"
        android:useLevel="true"> <!-- Just add this line -->
        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>
mim
źródło
2
Doskonała uwaga na temat Androida: useLevel = "true" !!! Pomogłeś mi rozwiązać ważny problem na Androidzie 5! Dziękuję Ci bardzo!
DmitryKanunnikoff
2
package com.example.ankitrajpoot.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;


public class MainActivity extends Activity {

    private ProgressBar spinner;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner=(ProgressBar)findViewById(R.id.progressBar);
        spinner.setVisibility(View.VISIBLE);
    }
}

xml

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

<ProgressBar
    android:id="@+id/progressBar"

    android:layout_width="48dp"
    style="?android:attr/progressBarStyleLarge"
    android:layout_height="48dp"
    android:indeterminateDrawable="@drawable/circular_progress_bar"
    android:indeterminate="true" />
</RelativeLayout>





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

        <gradient
            android:type="sweep"
            android:useLevel="false"
            android:startColor="@android:color/transparent"
            android:endColor="#1e9dff"
            android:angle="0"
            />

    </shape>
</rotate>
Ankit Rajpoot
źródło
Warto rozważyć dodanie opisu proponowanego rozwiązania.
il_raffa
2

Dzięki Bibliotece komponentów materiałów można używać ProgressIndicatorze Widget.MaterialComponents.ProgressIndicator.Circular.Determinatestylem.

Coś jak:

<com.google.android.material.progressindicator.ProgressIndicator
    style="@style/Widget.MaterialComponents.ProgressIndicator.Circular.Determinate"
    app:indicatorColor="@color/...."
    app:trackColor="@color/...."
    app:circularRadius="64dp"/>

Możesz użyć tych atrybutów:

  • circularRadius: określa promień okrągłego wskaźnika postępu
  • trackColor: kolor toru postępu. Jeśli nie zostanie zdefiniowany, zostanie ustawiony na indicatorColori zastosowany android:disabledAlphaz motywu.
  • indicatorColor: pojedynczy kolor używany dla wskaźnika w trybie określonym / nieokreślonym. Domyślnie używa podstawowego koloru motywu

wprowadź opis obrazu tutaj

Służy progressIndicator.setProgressCompat((int) value, true);do aktualizowania wartości wskaźnika.

Uwaga: wymaga co najmniej wersji 1.3.0-alpha01.

Gabriele Mariotti
źródło
Jaka jest wymagana zależność od biblioteki?
bikram
@bikram Biblioteka komponentów materiałowych dostarczona przez Google.
Gabriele Mariotti
Dodałem implementację „com.google.android.material: material: 1.1.0” do build.gradle, ale nadal ProgressIndicator się nie pojawia.
bikram
@bikram Jak opisano w odpowiedzi: wymaga przynajmniej wersji 1.3.0-alpha01.
Gabriele Mariotti
1

Zmiana

android:useLevel="false"

do

android:useLevel="true"

dla drugiego sahpe z id="@android:id/progress

mam nadzieję, że to działa

ASHMIL HUSSAIN K.
źródło