So passen Sie einen Fortschrittsbalken in Android an

Ich arbeite an einer App, in der ich eine anzeigen möchte ProgressBar, aber ich möchte das Standard-Android ersetzen ProgressBar.

Wie kann ich das anpassen ProgressBar?

Benötige ich dafür Grafiken und Animationen?

Ich habe den folgenden Beitrag gelesen, konnte ihn aber nicht zum Laufen bringen:

Benutzerdefinierte Fortschrittsanzeige Android

ProgressBarZum Anpassen von a müssen Sie das Attribut oder die Eigenschaften für den Hintergrund und den Fortschritt Ihres Fortschrittsbalkens definieren.

Erstellen Sie eine XML-Datei mit dem Namen customprogressbar.xmlin Ihrem res->drawableOrdner:

custom_progressbar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color etc -->
    <item android:id="@android:id/background">
    <shape>
        <gradient
                android:startColor="#000001"
                android:centerColor="#0b131e"
                android:centerY="1.0"
                android:endColor="#0d1522"
                android:angle="270"
        />
    </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#007A00"
                android:centerColor="#007A00"
                android:centerY="1.0"
                android:endColor="#06101d"
                android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list> 

Jetzt müssen Sie die progressDrawableEigenschaft in customprogressbar.xml(zeichnbar) setzen

Sie können dies in der XML-Datei oder in der Aktivität (zur Laufzeit) tun.

Gehen Sie in Ihrem XML wie folgt vor:

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/custom_progressbar"         
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Gehen Sie zur Laufzeit wie folgt vor

// Get the Drawable custom_progressbar                     
    Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
    progressBar.setProgressDrawable(draw);

Bearbeiten: XML-Layout korrigiert

Bei komplexen ProgressBarwie diese,

verwenden ClipDrawable.

HINWEIS: Ich habe ProgressBarhier in diesem Beispiel nicht verwendet . Ich habe dies mit ClipDrawable erreicht, indem ich das Bild mit abgeschnitten habe Animation.

A Drawable, das einen anderen Drawablebasierend auf Drawabledem aktuellen Pegelwert dieses Clips schneidet. Sie können steuern, wie viel das Kind Drawablein Breite und Höhe abgeschnitten wird, basierend auf der Stufe sowie der Schwerkraft, um zu steuern, wo es in seinem Gesamtbehälter platziert wird. Most often used to implement things like progress barsdurch Erhöhen des Levels des Drawables mit setLevel().

HINWEIS: Das Zeichenobjekt wird vollständig abgeschnitten und ist nicht sichtbar, wenn der Pegel 0 ist, und wird vollständig angezeigt, wenn der Pegel 10.000 beträgt.

Ich habe diese beiden Bilder verwendet, um dies zu machen CustomProgressBar.

scall.png

ballon_progress.png

MainActivity.java

public class MainActivity extends ActionBarActivity {

private EditText etPercent;
private ClipDrawable mImageDrawable;

// a field in your class
private int mLevel = 0;
private int fromLevel = 0;
private int toLevel = 0;

public static final int MAX_LEVEL = 10000;
public static final int LEVEL_DIFF = 100;
public static final int DELAY = 30;

private Handler mUpHandler = new Handler();
private Runnable animateUpImage = new Runnable() {

    @Override
    public void run() {
        doTheUpAnimation(fromLevel, toLevel);
    }
};

private Handler mDownHandler = new Handler();
private Runnable animateDownImage = new Runnable() {

    @Override
    public void run() {
        doTheDownAnimation(fromLevel, toLevel);
    }
};

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

    etPercent = (EditText) findViewById(R.id.etPercent);

    ImageView img = (ImageView) findViewById(R.id.imageView1);
    mImageDrawable = (ClipDrawable) img.getDrawable();
    mImageDrawable.setLevel(0);
}

private void doTheUpAnimation(int fromLevel, int toLevel) {
    mLevel += LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel <= toLevel) {
        mUpHandler.postDelayed(animateUpImage, DELAY);
    } else {
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

private void doTheDownAnimation(int fromLevel, int toLevel) {
    mLevel -= LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel >= toLevel) {
        mDownHandler.postDelayed(animateDownImage, DELAY);
    } else {
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

public void onClickOk(View v) {
    int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;

    if (toLevel == temp_level || temp_level > MAX_LEVEL) {
        return;
    }
    toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;
    if (toLevel > fromLevel) {
        // cancel previous process first
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;

        mUpHandler.post(animateUpImage);
    } else {
        // cancel previous process first
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;

        mDownHandler.post(animateDownImage);
    }
}
}

activity_main.xml

<LinearLayout 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:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/etPercent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="number"
        android:maxLength="3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ok"
        android:onClick="onClickOk" />

</LinearLayout>

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/scall" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/clip_source" />

</FrameLayout>

clip_source.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/ballon_progress"
    android:gravity="bottom" />

Bei komplexer HorizontalProgressBarnur Veränderung cliporientationin clip_source.xml wie diese,

android:clipOrientation="horizontal"

Sie können die vollständige Demo hier herunterladen .

in Ihrer XML

<ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="@style/CustomProgressBar" 
        android:layout_margin="5dip" />

Und in res/values/styles.xml:

<resources> 
        <style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
          <item name="android:indeterminateOnly">false</item>
          <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
          <item name="android:minHeight">10dip</item>
          <item name="android:maxHeight">20dip</item>
        </style>       
    <style name="AppTheme" parent="android:Theme.Light" />
</resources>

Und custom_progress_bar_horizontalist eine XML-Datei, die in einem zeichnbaren Ordner gespeichert ist und Ihren benutzerdefinierten Fortschrittsbalken definiert. Weitere Details finden Sie in diesem Blog .

Ich hoffe, dies wird dir helfen.

Das Anpassen der Farbe des Fortschrittsbalkens, insbesondere für den Spinner-Typ, erfordert eine XML-Datei und das Initiieren von Codes in den jeweiligen Java-Dateien.

Erstellen Sie eine XML-Datei und nennen Sie sie progressbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    tools:context=".Radio_Activity" >

    <LinearLayout
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ProgressBar
            android:id="@+id/spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </ProgressBar>
    </LinearLayout>

</LinearLayout>

Verwenden Sie den folgenden Code, um den Spinner in verschiedenen erwarteten Farben zu erhalten. Hier verwenden wir den Hexcode, um den Spinner in blauer Farbe anzuzeigen.

Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner);
spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
                android.graphics.PorterDuff.Mode.MULTIPLY);

Es gibt zwei Arten von Fortschrittsbalken, die als bestimmter Fortschrittsbalken (feste Dauer) und unbestimmter Fortschrittsbalken (unbekannte Dauer) bezeichnet werden.

Drawables für beide Arten von Fortschrittsbalken können angepasst werden, indem Drawable als XML-Ressource definiert wird. Weitere Informationen zu Fortschrittsbalkenstilen und -anpassungen finden Sie unter http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples .

Feste oder horizontale Fortschrittsanzeige anpassen:

Unter XML befindet sich eine zeichnbare Ressource für die Anpassung des horizontalen Fortschrittsbalkens.

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="?attr/colorControlNormal">
            <corners android:radius="8dp"/>
            <size android:height="20dp" />
            <solid android:color="#90caf9" />
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle"
                android:tint="?attr/colorControlActivated">
                <corners android:radius="8dp"/>
                <size android:height="20dp" />
                <solid android:color="#b9f6ca" />
            </shape>
        </scale>
    </item>
</layer-list>

Anpassen eines unbestimmten Fortschrittsbalkens

Unter XML befindet sich eine zeichnbare Ressource für die Anpassung des zirkulären Fortschrittsbalkens.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress"
        android:top="16dp"
        android:bottom="16dp">
                <rotate
                    android:fromDegrees="45"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="315">
                    <shape android:shape="rectangle">
                        <size
                            android:width="80dp"
                            android:height="80dp" />
                        <stroke
                            android:width="6dp"
                            android:color="#b71c1c" />
                    </shape>
                </rotate>           
    </item>
</layer-list>

Benutzerdefinierte ProgressBar wie Hotstar erstellen.

1. Fügen Sie der Layoutdatei einen Fortschrittsbalken hinzu und legen Sie die Datei unbestimmt mit Zeichnungsdatei fest.

activity_main.xml

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/player_progressbar"
    android:indeterminateDrawable="@drawable/custom_progress_bar"
    />

2. Erstellen Sie eine neue XML-Datei in res \ drawable

custom_progress_bar.xml

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

    <shape
        android:innerRadius="35dp"
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="false" >
       <size
           android:height="80dp"
           android:width="80dp" />

       <gradient
            android:centerColor="#80b7b4b2"
            android:centerY="0.5"
            android:endColor="#f4eef0"
            android:startColor="#00938c87"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

Einfachste Möglichkeit zum Anpassen eines Fortschrittsbalkens in Android:

1. Dialog initialisieren und anzeigen:

   MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
   progressdialog.show();

2. Methode erstellen:

   public class MyProgressDialog extends AlertDialog {
         public MyProgressDialog(Context context) {
             super(context);
             getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
         }
   
         @Override
         public void show() {
             super.show();
             setContentView(R.layout.dialog_progress);
         }
   }

3. Layout-XML erstellen:

   <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="@android:color/transparent"
     android:clickable="true">
   
       <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true">
   
         <ProgressBar
            android:id="@+id/progressbarr"
            android:layout_width="@dimen/eightfive"
            android:layout_height="@dimen/eightfive"
            android:layout_centerInParent="true"
           android:indeterminateDrawable="@drawable/progresscustombg" />
   
         <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_below="@+id/progressbarr"
            android:layout_marginTop="@dimen/_3sdp"
            android:textColor="@color/white"
            android:text="Please wait"/>
       </RelativeLayout>
   </RelativeLayout>

4. Erstellen Sie die Form progresscustombg.xml und setzen Sie res / drawable:

   <?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="20"
          android:useLevel="false" >
           <size
               android:height="@dimen/eightfive"
               android:width="@dimen/eightfive" />
   
           <gradient
               android:centerY="0.50"
               android:endColor="@color/color_green_icash"
               android:startColor="#FFFFFF"
               android:type="sweep"
               android:useLevel="false" />
       </shape>
   
   </rotate>

Für die Verwendung von benutzerdefinierten Zeichen:

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

(unter res / drawable hinzufügen progress.xml). my_drawablekann xml, png sein

Dann in Ihrem Layout verwenden

<ProgressBar
        android:id="@+id/progressBar"
        android:indeterminateDrawable="@drawable/progress_circle"
...
/>

Wenn Sie dies im Code tun möchten, finden Sie hier ein Beispiel:

pd = new ProgressDialog(MainActivity.this);
pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
TextView tv = new TextView(this);
tv.setTextColor(Color.WHITE);
tv.setTextSize(20);
tv.setText("Waiting...");
pd.setCustomTitle(tv);
pd.setIndeterminate(true);
pd.show();

Mit TextView können Sie Farbe, Größe und Schriftart Ihres Textes ändern. Ansonsten können Sie wie gewohnt einfach setMessage () aufrufen.