SeekBar oder Fortschrittsbalken mit mehreren Farben

Question

Ich möchte eine Bar wie dies zunächst zu schaffen, wenn Fortschritt Null ist, wird es ein verblassen in der Farbe sein, aber und als Fortschritt weiter geht es auf diesem Teil hell werden (Diese ist das Beste, was ich erklären kann) Hauptsache, ich will Bar, um alle Farben gleichzeitig zu zeigen.

Answer 1

Clip Ihres "auf" ziehbar:
über die "off" ziehbar:

von res/drawable/custom_progress_drawable.xml

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

    <!-- Background --> 
    <item 
     android:id="@android:id/background" 
     android:drawable="@drawable/custom_progress_bar_off"/> 

    <!-- Secondary progress - this is optional --> 
    <item android:id="@android:id/secondaryProgress"> 
     <clip android:drawable="@drawable/custom_progress_bar_secondary" /> 
    </item> 

    <!-- Progress --> 
    <item android:id="@android:id/progress"> 
     <clip android:drawable="@drawable/custom_progress_bar_on" /> 
    </item> 

</layer-list> 

Von einer Activity arbeiten, verwendet

Drawable progressDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.custom_progress_drawable, getTheme()); 
myProgressBar.setProgressDrawable(progressDrawable); 

oder in xml, verwenden Sie

android:progressDrawable="@drawable/custom_progress_drawable" 

Und hier ist das Ergebnis, wenn android:max="10" in XML:

Es ist ein wenig ab, aber man setMax() mit etwas mehr wie 10000 und hat einige Aufrechnungs Berechnungen wenn setProgress() Aufruf verwenden könnte zu machen es ist sauberer.

Answer 2

Wie bereits vorgeschlagen, ich denke, dass Sie eine Schicht-Liste gehen und dann mehrere Drawables eingestellt. Hauptproblem ist, dass ich resizeable sein müssen. Eine Lösung mit fester Größe wäre ziemlich einfach zu implementieren.

Answer 3

Endlich! Ich bin auf eine Mission gegangen, um das herauszufinden, also wenn das ausreicht, kannst du mir diese Prämie geben, haha.

---

Versuchen Sie dies in Ihrem Layout mit:

<View android:layout_width="fill_parent" 
     android:layout_height="0dip" 
     android:layout_weight=".20"/> 

      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="fill_parent" 
       android:layout_height="0dip" 
       android:orientation="horizontal" 
       android:gravity="center" 
       android:layout_weight="0.62"> 
       <View android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight=".03"/> 
       <ProgressBar style="?android:attr/progressBarStyleHorizontal" 
        android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight="0.94" 
        android:progressDrawable="@drawable/progressmask" 
        android:progress="0" 
        android:max="10" 
        android:rotation="180"/> 
       <View android:layout_width="0dip" 
        android:layout_height="fill_parent" 
        android:layout_weight=".03"/> 
      </LinearLayout> 
    <View 
     android:layout_width="fill_parent" 
     android:layout_height="0dip" 
     android:layout_weight=".18"/> 
</LinearLayout> 

die dieses ziehbar verweist (progressmask.xml):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="50dip" /> 
     <gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270" /> 
     <stroke android:width="1dp" android:color="#00000000" /> 
    </shape> 
</item> 
<item android:id="@android:id/progress"> 
    <clip> 
     <shape> 
      <corners android:radius="50dip" /> 
      <gradient android:startColor="#aa000000" android:endColor="#aa000000" 
       android:angle="270" /> 
      <stroke android:width="1dp" android:color="#00000000" /> 
     </shape> 
    </clip> 
</item> 
</layer-list> 

und dieses Bild (colorprogress.png)

Was sie tut, ist das Bild als Hintergrund eines Linearlayout festgelegt, die eine progressbar enthält. Die Fortschrittsanzeige fügt dem Bild eine halbtransparente schwarze Maske hinzu, damit die Lichter ausgeschaltet werden.

HINWEIS: Um diesen Effekt zu bekommen, musste ich mit dem Fortschrittsbalken umgehen (dh es umdrehen, und es auf nur 10 Intervalle setzen. Sie müssen etwas Mathe tun, um den Fortschritt in Einklang zu bringen mit dem image ie setprogress ((100-trueprogress)/10) Sorry, ich habe diesen Teil nicht für dich gemacht

So wird es im Verlauf 50% aussehen (die kleinen x und Dreiecke verschwinden auf dem Gerät))

ich hoffe, dass dies Ihre Frage beantwortet!

Answer 4

Sie können die Fortschrittsbalken nicht auf verschiedene Farben einstellen. Sie können jedoch nur die on Zeichnungsdatei verwenden und den gewünschten Effekt erzielen. Sie könnten einfach eine Ebenenmaske anwenden. Was ich meine, ist, ein relatives Layout hinzuzufügen, das anfänglich beispielsweise dark grey ist, d. H. Der Gradient hat nur EINE Farbe, die dunkelgrau ist. Verwenden Sie jetzt code, um die Farbverlaufsfarbe auf der linken Seite programmgesteuert festzulegen. Offensichtlich wird die Farbe auf der linken Seite transparent sein. Erfahren Sie mehr über Linear Gradients. Das ist alles. Sie müssen nur die Position berechnen, von wo der richtige Gradient beginnt, statt wo der linke Gradient (transparent) endet.

Diese Methode ist leicht fehlerhaft und funktioniert möglicherweise nicht auf ALLEN Geräten.

Die fehlerfreie Methode wäre, mehrere .9png Bilder zu erstellen und das Zeichen des Fortschrittsdialogs jedes Mal programmgesteuert festzulegen.