2015-01-12 16 views
5

Gibt es eine Möglichkeit, einen Kreis mit einem solchen Gradienten zu erstellen?android erstellen pie dount mit Farbverlauf

enter image description here

Soweit ich bekommen, ist dies:

<shape 
     android:innerRadiusRatio="3" 
     android:thicknessRatio="10" 
     android:shape="ring"> 
    <gradient 
       android:endColor="@color/cyan_dark" 
       android:startColor="@color/red" 
       android:type="radial" 
       android:gradientRadius="340" 
       android:centerX="50%" 
       android:centerY="0" /> 
</shape> 
+0

Was ist Ihr tatsächliches Ergebnis? – TheRedFox

Antwort

3

XML

<ProgressBar 
     android:id="@+id/yourId" 
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_width="89dp" 
     android:layout_height="89dp" 
     android:layout_centerHorizontal="true" 
     android:layout_centerVertical="true" 
     android:max="100" 
     android:progress="70" 
     android:progressDrawable="@drawable/shapering" /> 

shapering ziehbar

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:innerRadiusRatio="3" 
    android:shape="ring" 
    android:thicknessRatio="10" > 

    <gradient 
     android:centerColor="#D6DE47" 
     android:centerX="50%" 
     android:centerY="0" 
     android:endColor="#DE47A7" 
     android:gradientRadius="340" 
     android:startColor="#6D47DE" 
     android:type="sweep" /> 

</shape> 

Ergebnis

enter image description here

+0

danke, für deine Wiederholung aber, ich brauche auch in 100 Fortschritt zu unterstützen, die in deiner Antwort, wenn du den Fortschritt auf 100 änderst, der "gelbe Effekt" wird auf beiden Seiten angezeigt werden, –

+0

meine Antwort aktualisiert. –

+0

danke! funktionieren einwandfrei –

3

Verwendung dieses

<ProgressBar 
     android:id="@+id/progressWheel" 
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_width="152dp" 
     android:layout_height="152dp" 
     android:layout_centerInParent="true" 
     android:progress="100" 
     android:indeterminate="false" 
     android:progressDrawable="@drawable/circular_progress_bar" /> 

in ziehbar circular_progress_bar (ändern Farbe nach Ihrem Bedarf)

<?xml version="1.0" encoding="UTF-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
<item android:id="@android:id/progress"> 
    <rotate 
     android:fromDegrees="270" 
     android:toDegrees="270" 
     android:pivotX="50%" 
     android:pivotY="50%" > 
     <shape 
      android:innerRadiusRatio="2.5" 
      android:shape="ring" 
      android:thicknessRatio="25.0" > 
      <gradient 
       android:centerColor="@color/red" 
       android:endColor="@color/gray" 
       android:startColor="@color/gray" 
       android:type="sweep" /> 
     </shape> 
    </rotate> 
</item> 
<item android:id="@android:id/secondaryProgress"> 
    <rotate 
     android:fromDegrees="270" 
     android:toDegrees="270" 
     android:pivotX="50%" 
     android:pivotY="50%" > 
     <shape 
      android:innerRadiusRatio="2.5" 
      android:shape="ring" 
      android:thicknessRatio="25.0" > 
      <gradient 
       android:centerColor="@color/green" 
       android:endColor="@color/green" 
       android:startColor="@color/green" 
       android:type="sweep" /> 
     </shape> 
    </rotate> 
</item> 
</layer-list>  
1

Sie type = verwenden sollte statt "radial" "Sweep" Gradienten zu erzeugen wie o n das Bild. Zum Beispiel:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
<item> 
    <shape 
     android:innerRadiusRatio="3" 
     android:shape="ring" 
     android:thicknessRatio="7.0"> 
     <gradient 
      android:startColor="#FF0000" 
      android:centerColor="#00FF00" 
      android:endColor="#0000FF" 
      android:type="sweep" /> 
    </shape> 
</item> 

3

Verwendung dieses

<ProgressBar 
    android:id="@+id/progressWheel" 
    style="?android:attr/progressBarStyleHorizontal" 
    android:layout_width="152dp" 
    android:layout_height="152dp" 
    android:layout_centerInParent="true" 
    android:progress="100" 
    android:indeterminate="false" 
    android:progressDrawable="@drawable/circular_progress_bar" /> 

in ziehbar circular_progress_bar (ändern Farbe nach Ihrem Bedarf)

<?xml version="1.0" encoding="UTF-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
<item android:id="@android:id/progress"> 
<rotate 
    android:fromDegrees="270" 
    android:toDegrees="270" 
    android:pivotX="50%" 
    android:pivotY="50%" > 
    <shape 
     android:innerRadiusRatio="2.5" 
     android:shape="ring" 
     android:thicknessRatio="25.0" > 
     <gradient 
      android:centerColor="@color/red" 
      android:endColor="@color/gray" 
      android:startColor="@color/gray" 
      android:type="sweep" /> 
    </shape> 
</rotate> 
</item> 
<item android:id="@android:id/secondaryProgress"> 
<rotate 
    android:fromDegrees="270" 
    android:toDegrees="270" 
    android:pivotX="50%" 
    android:pivotY="50%" > 
    <shape 
     android:innerRadiusRatio="2.5" 
     android:shape="ring" 
     android:thicknessRatio="25.0" > 
     <gradient 
      android:centerColor="@color/green" 
      android:endColor="@color/green" 
      android:startColor="@color/green" 
      android:type="sweep" /> 
    </shape> 
</rotate> 
</item> 
</layer-list>