Benutzerdefiniert für ProgressBar / ProgressDialog

128

Wenn ich die eingeschränkte Dokumentation von Google lese, habe ich das Gefühl, dass es möglich ist, das Aussehen (zeichnbar) einer ProgressBar / ProgressDialog zu ändern, indem einfach ein neuer Stil erstellt und der Stileigenschaft der ProgressBar zugewiesen wird. Aber ich kann das nicht richtig zum Laufen bringen. Folgendes habe ich bisher gemacht:

Ich habe eine Form wie diese erstellt (mp2.xml)

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="ring"
  android:innerRadiusRatio="4"
  android:thicknessRatio="4"
  android:useLevel="false">
 <size android:width="50dip" android:height="50dip" />
 <gradient android:type="sweep" android:useLevel="false" android:startColor="#300000ff" android:centerColor="#500000ff" android:endColor="#ff0000ff" />
</shape>

Dann erstellte ich eine Animation (mp3.xml) wie folgt:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="30" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="30" android:toDegrees="60" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="60" android:toDegrees="90" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="90" android:toDegrees="120" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="120" android:toDegrees="150" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="150" android:toDegrees="180" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="180" android:toDegrees="210" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="210" android:toDegrees="240" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="240" android:toDegrees="270" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="270" android:toDegrees="300" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="300" android:toDegrees="330" android:repeatCount="1" />
 </item>
 <item android:duration="70">
  <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/mp2" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="330" android:toDegrees="360" android:repeatCount="1" />
 </item>
</animation-list>

Dann erstellte ich einen Stil (attrs.xml) wie folgt:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style parent="@android:style/Widget.ProgressBar" name="customProgressBar">
  <item name="android:progressDrawable">@anim/mp3</item>
 </style>
</resources>

und in meiner main.xml habe ich den Stil wie folgt eingestellt:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent" android:drawingCacheQuality="high">
 <ProgressBar android:id="@+id/ProgressBar01"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" style="@style/customProgressBar"/>
</LinearLayout>

Aber es zeigt immer noch das gleiche Zeichen wie zuvor. Was mache ich falsch?

android  progress-bar  progressdialog 
— Sam
quelle
Gerade passierten Proben zu browsen und kam über Sie nach der Lektüre dieses . Hoffentlich löst es Ihr Problem.
— Reuscam
Ich wusste, wie man Formen / Farbverläufe / Animationen erstellt. Das oben erstellte basiert auf dem Beitrag, auf den Sie sich beziehen (ich musste es ein wenig ändern, da es sehr abgehackt und langsam aussieht). Ich hatte nur gehofft, dies mit dem "Stil" erreichen zu können. Trotzdem danke für die Antwort
— Sam
Wenn Sie Ihren Fortschrittsbalken vollständig anpassen und wirklich ausgefallen werden möchten, schauen Sie sich diesen Blog-Beitrag an. Er geht möglicherweise etwas über das hinaus, was Sie wollten, oder ist genau das, wonach Sie suchen. Ich hoffe es hilft!
— Jagsund

Antworten:

142

Ich habe Folgendes verwendet, um einen benutzerdefinierten Fortschrittsbalken zu erstellen.

Datei res/drawable/progress_bar_states.xmldeklariert die Farben der verschiedenen Zustände:

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

    <item android:id="@android:id/background">
        <shape>
            <gradient
                    android:startColor="#000001"
                    android:centerColor="#0b131e"
                    android:centerY="0.75"
                    android:endColor="#0d1522"
                    android:angle="270"
            />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                        android:startColor="#234"
                        android:centerColor="#234"
                        android:centerY="0.75"
                        android:endColor="#a24"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#144281"
                    android:centerColor="#0b1f3c"
                    android:centerY="0.75"
                    android:endColor="#06101d"
                    android:angle="270"
                />
            </shape>
        </clip>
    </item>

</layer-list>

Und der Code in Ihrer Layout-XML:

<ProgressBar android:id="@+id/progressBar"
    android:progressDrawable="@drawable/progress_bar_states"
    android:layout_width="fill_parent" android:layout_height="8dip" 
    style="?android:attr/progressBarStyleHorizontal" 
    android:indeterminateOnly="false" 
    android:max="100">
</ProgressBar>

Genießen!

— Jona
quelle
@ YuliaRogovaya ist es, weil die Drawables nicht in Clip-Elementen sind? Ich konnte es auch nicht zum Laufen bringen; Ich vermute, das Clip-Element ist der Schlüssel.
— Andrew Wyld
2
wie geht das für a ProgressDialog?
— Nezam
@Nezam Ich kann Ihnen keinen genauen Code oder Beispiele geben, aber das ist, was Sie tun müssten. Stellen Sie dem ProgressDialog ein benutzerdefiniertes Thema zur Verfügung. Das benutzerdefinierte Thema würde den Fortschrittsbalkenstil definieren.
— Jona
Es wäre schön, einen Screenshot dieser Sache in Aktion zu sehen
— QED
@Jona Ich weiß, es ist eine Weile her, aber wie könnte ich dieses Zeichen in der Höhe kleiner machen?
— Leofontes
55

Ich hatte einige Probleme, einen unbestimmten Fortschrittsdialog mit der Lösung hier zu verwenden. Nach einiger Arbeit und Versuch und Irrtum habe ich ihn zum Laufen gebracht.

Erstellen Sie zunächst die Animation, die Sie für den Fortschrittsdialog verwenden möchten. In meinem Fall habe ich 5 Bilder verwendet.

../res/anim/progress_dialog_icon_drawable_animation.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_progress_dialog_drawable_1" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_2" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_3" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_4" android:duration="150" />
    <item android:drawable="@drawable/icon_progress_dialog_drawable_5" android:duration="150" />
</animation-list>

Wo Sie einen ProgressDialog anzeigen möchten:

dialog = new ProgressDialog(Context.this);
dialog.setIndeterminate(true);
dialog.setIndeterminateDrawable(getResources().getDrawable(R.anim.progress_dialog_icon_drawable_animation));
dialog.setMessage("Some Text");
dialog.show();

Diese Lösung ist wirklich einfach und hat für mich funktioniert. Sie können ProgressDialog erweitern und das Zeichnen intern überschreiben lassen. Dies war jedoch zu kompliziert für das, was ich brauchte, sodass ich es nicht getan habe.

— Blindware
quelle
1
Vielen Dank für die Notiz "dialog.setIndeterminateDrawable ()"
— scottyab
Gibt es eine Möglichkeit, nur ein Bild im Dialog zu haben, also keine Nachricht, sondern eine Zeichnung im gesamten Dialog?
— Diego
@Diego Ich habe es nicht versucht, aber ich verstehe nicht warum nicht. Haben Sie versucht, ein Zeichenelement zu verwenden, das den gewünschten Platz einnimmt (dh ein langes Seitenverhältnis hat) und keinen Text für den Dialog festlegt?
— Blindstuff
40

Versuchen Sie die Einstellung:

android:indeterminateDrawable="@drawable/progress"

Es hat bei mir funktioniert. Hier ist auch der Code für 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="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>
— Schlamm
quelle
3
Wenn Sie ein Zeichenobjekt verwenden möchten, klicken Sie einfach android:drawable=auf das Tag und entfernen Sie die Form. Endlich jemand, der die Frage nach dem sich drehenden Fortschrittsbalken beantwortet.
— MinceMan
2
Es setzt Farbe, aber Fortschrittsbalken dreht sich nicht
— Crawler
Zum schnellen Einstellen der Drehzahl android:toDegreeskann ein höherer Wert eingestellt werden. Durch Einstellen auf android:toDegrees="1080"wird die Drehung um das Dreifache erhöht.
— Levor
10

Ihr Stil sollte so aussehen:

<style parent="@android:style/Widget.ProgressBar" name="customProgressBar">
    <item name="android:indeterminateDrawable">@anim/mp3</item>
</style>
— Sieger
quelle
6

Benutzerdefinierter Fortschritt mit Skalierung!

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_no_smile_eyes_off"
            android:scaleGravity="center" />
    </item>
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_no_smile_eyes_on"
            android:scaleGravity="center" />
    </item>
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_smile_eyes_off"
            android:scaleGravity="center" />
    </item>
    <item android:duration="150">
        <scale
            android:drawable="@drawable/face_smile_eyes_on"
            android:scaleGravity="center" />
    </item>

</animation-list>
— Dmitry
quelle
5

Ich mache deinen Code. Ich kann laufen, aber ich muss zwei Stellen ändern:

  1. name="android:indeterminateDrawable" anstatt android:progressDrawable

  2. Ändern Sie den Namen attrs.xml ---> styles.xml

— Pengwang
quelle
Sie ändern Ihr Android: startColor = "# 300000ff" zu # FF00ff00, ändern Sie eine andere Farbe
— Pengwang
0

Ich bin mir nicht sicher, aber in diesem Fall können Sie trotzdem einen vollständig angepassten AlertDialog erstellen, indem Sie im Alarmdialog eine separate Layoutdatei festlegen und die Animation für Ihre Bildansicht mithilfe eines Teils Ihres obigen Codes festlegen, der dies auch tun sollte!

— Jayshil Dave
quelle
0 
public class CustomProgressBar {
    private RelativeLayout rl;
    private ProgressBar mProgressBar;
    private Context mContext;
    private String color__ = "#FF4081";
    private ViewGroup layout;
    public CustomProgressBar (Context context, boolean isMiddle, ViewGroup layout) {
        initProgressBar(context, isMiddle, layout);
    }

    public CustomProgressBar (Context context, boolean isMiddle) {
        try {
            layout = (ViewGroup) ((Activity) context).findViewById(android.R.id.content).getRootView();
        } catch (Exception e) {
            e.printStackTrace();
        }
        initProgressBar(context, isMiddle, layout);
    }

    void initProgressBar(Context context, boolean isMiddle, ViewGroup layout) {
        mContext = context;
        if (layout != null) {
            int padding;
            if (isMiddle) {
                mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleSmall);
                // mProgressBar.setBackgroundResource(R.drawable.pb_custom_progress);//Color.parseColor("#55000000")
                padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
            } else {
                padding = context.getResources().getDimensionPixelOffset(R.dimen.padding);
                mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleSmall);
            }
            mProgressBar.setPadding(padding, padding, padding, padding);
            mProgressBar.setBackgroundResource(R.drawable.pg_back);
            mProgressBar.setIndeterminate(true);
                try {
                    color__ = AppData.getTopColor(context);//UservaluesModel.getAppSettings().getSelectedColor();
                } catch (Exception e) {
                    color__ = "#FF4081";
                }
                int color = Color.parseColor(color__);
//                color=getContrastColor(color);
//                color__ = color__.replaceAll("#", "");//R.color.colorAccent
                mProgressBar.getIndeterminateDrawable().setColorFilter(color, android.graphics.PorterDuff.Mode.SRC_ATOP);
            } 
            }

            RelativeLayout.LayoutParams params = new
                    RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            rl = new RelativeLayout(context);
            if (!isMiddle) {
                int valueInPixels = (int) context.getResources().getDimension(R.dimen.padding);
                lp.setMargins(0, 0, 0, (int) (valueInPixels / 1.5));//(int) Utils.convertDpToPixel(valueInPixels, context));
                rl.setClickable(false);
                lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
            } else {
                rl.setGravity(Gravity.CENTER);
                rl.setClickable(true);
            }
            lp.addRule(RelativeLayout.CENTER_IN_PARENT);
            mProgressBar.setScaleY(1.55f);
            mProgressBar.setScaleX(1.55f);
            mProgressBar.setLayoutParams(lp);

            rl.addView(mProgressBar);
            layout.addView(rl, params);
        }
    }

    public void show() {
        if (mProgressBar != null)
            mProgressBar.setVisibility(View.VISIBLE);
    }

    public void hide() {
        if (mProgressBar != null) {
            rl.setClickable(false);
            mProgressBar.setVisibility(View.INVISIBLE);
        }
    }
}

Und dann anrufen 

customProgressBar = new CustomProgressBar (Activity, true);
customProgressBar .show();
— VV W.
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.