Wie erstelle ich eine kreisförmige Fortschrittsleiste in Android, die sich darauf dreht?

Ich versuche, eine abgerundete Fortschrittsanzeige zu erstellen. Das will ich erreichen

Es gibt einen grauen farbigen Hintergrund Ring. Darüber hinaus erscheint eine blaue Farb-Fortschrittsanzeige, die sich in einem Kreisweg von 0 bis 360 in 60 oder in beliebiger Sekunden bewegt.

Bildbeschreibung hier eingeben

Hier ist mein Beispielcode.

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

Um dies zu tun, in der ziehbaren "progressBarBG", ich bin die Schaffung einer Layer-Liste und innerhalb dieser Layer-Liste Ich gebe zwei Elemente wie gezeigt.

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

Nun wird der erste graue Ring gut gemacht. Der blaue Ring beginnt jedoch von links vom Zug und geht nach rechts, wie eine lineare Fortschrittsleiste funktioniert. Dies ist, wie es zeigt bei 50% Fortschritt mit dem roten Farbe Pfeil zeigt Richtung.

Bildbeschreibung hier eingeben

Ich möchte die blaue Fortschrittsleiste im Kreisweg wie erwartet bewegen.

  • Wie bekomme ich die gleiche undefinierte ProgressBar wie ICS mit 2 rotierenden Kreisen?
  • Android: Benutzerdefinierte horizontale Progress Bar Animation
  • Custom Drawable für ProgressBar / ProgressDialog
  • Wie kann man eine ProgressBar stoppen und starten?
  • Wie ändere ich die Farbe im kreisförmigen Fortschrittsbalken?
  • Android-Fortschrittsbalken auf ImageView
  • Wie verwende ich Android ProgressBar im bestimmten Modus?
  • Warum funktioniert nicht auf Android ProgressBar?
  • 8 Solutions collect form web for “Wie erstelle ich eine kreisförmige Fortschrittsleiste in Android, die sich darauf dreht?”

    Hier ist meine zwei Lösung.

    Kurze Antwort:

    Anstatt eine layer-list erstellen, trennte ich sie in zwei Dateien. Einer für ProgressBar und einer für seinen Hintergrund.

    Dies ist die ProgressDrawable Datei (@Drawable Ordner): 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> 

    Und das ist für seinen background (@Drawable Ordner): 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> 

    Und am Ende, in dem Layout, das du arbeitest:

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

    Hier ist das Ergebnis:

    Bildbeschreibung hier eingeben

    Lange Antwort:

    Eine Unterklasse der View-Klasse, eine benutzerdefinierte Ansicht

    Bildbeschreibung hier eingeben

    Hier ist das volle Projekt auf github

    Ich habe eine Open Source Bibliothek auf GitHub CircularProgressBar realisiert , die genau das macht, was man so einfach wie möglich mag:

    Gif Demo CircularProgressBar

    VERWENDUNG

    Um eine kreisförmige ProgressBar zu machen, füge CircularProgressBar in deinem Layout-XML hinzu und füge CircularProgressBar-Bibliothek in deinem Projektor hinzu oder kannst du auch über Gradle greifen:

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

    Sie müssen die folgenden Eigenschaften in Ihrem XML verwenden, um Ihre CircularProgressBar zu ändern.

    Eigenschaften:

    • app:progress (integer) >> default 0
    • app:progressbar_color (Farbe) >> default BLACK
    • app:background_progressbar_color (Farbe) >> default GRAU
    • app:progressbar_width (Dimension) >> default 7dp
    • app:background_progressbar_width (Dimension) >> default 3dp

    JAVA

     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 

    Fork oder diese Bibliothek hier herunterladen >> https://github.com/lopspower/CircularProgressBar

    Ich habe mit einfachem Weg gemacht:

    Bitte überprüfen Sie den Screenshot für das gleiche.

    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> 

    Hoffe das wird dir helfen

    Ich habe ausführliches Beispiel für kreisförmige Fortschrittsleiste in android hier auf meinem blog demonuts.com geschrieben . Sie können auch gern voller Quellcode und Erklärung dort.

    Hier ist, wie ich kreisförmige Fortschrittsbalken mit Prozentsatz innerhalb Kreis in reinen Code ohne Bibliothek gemacht.

    Bildbeschreibung hier eingeben

    Erstellen Sie zunächst eine Zeichnungsdatei namens 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> 

    Jetzt in deinem activity_main.xml folge folgendes:

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

    In activity_main.xml ich ein kreisförmiges Bild mit weißem Hintergrund verwendet, um weißen Hintergrund um Prozentsatz zu zeigen. Hier ist das Bild:

    Bildbeschreibung hier eingeben

    Sie können die Farbe dieses Bildes ändern, um benutzerdefinierte Farbe um Prozentsatztext festzulegen.

    Jetzt endlich den folgenden Code zu 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(); } } 

    Wenn du eine horizontale Fortschrittsanzeige machen möchtest, folge diesem Link, es hat viele wertvolle Beispiele mit Quellcode:
    http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar

    Ich bin neu, so kann ich nicht kommentieren, aber dachte, die faulen Fix zu teilen. Ich benutze auch den ursprünglichen Ansatz von Pedram und bin gerade in die gleiche Lollipop-Ausgabe gerannt. Aber Alanv über in einem anderen Post hatte eine Einzeilen-Fix. Es ist eine Art Bug oder Aufsicht in API21. Buchstäblich nur addieren android:useLevel="true" zu deinem Circle Fortschritt xml. Der neue Ansatz von Pedram ist immer noch der richtige Fehler, aber ich dachte nur, ich teile auch die faulen Fixierung.

    https://github.com/passsy/android-HoloCircularProgressBar ist ein Beispiel für eine Bibliothek, die dies tut. Wie Tenfour04 gesagt hat, muss es etwas Brauch sein, da dies nicht direkt aus der Box unterstützt wird. Wenn sich diese Bibliothek nicht so verhält, wie Sie es wünschen, können Sie es gabeln und die Details ändern, damit sie nach Ihren Wünschen arbeiten können. Wenn du etwas implementierst, das andere dann wiederverwenden können, kannst du sogar eine Pull-Anfrage einreichen, um das wieder zusammenzufassen!

    Versuchen Sie diese Methode, um eine Bitmap zu erstellen und auf die Bildansicht zu setzen.

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

    @Pedram, deine alte Lösung funktioniert eigentlich auch gut in Lutscher (und besser als neu, da es überall überall einsetzbar ist, auch in Remoteansichten) ändere einfach deinen circular_progress_bar.xml Code dazu:

     <?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> 
    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.