2015-01-12 19 views
5

C'è un modo per creare cerchi con sfumature come questa?android crea pie dount con gradiente

enter image description here

Per quanto riguarda che ottengo è questo:

<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

Qual è il tuo vero risultato? – TheRedFox

risposta

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 drawable

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

Risultato

enter image description here

+0

grazie, per il tuo replay ma, ho bisogno di supportare anche in 100 progressi, che nella tua risposta se cambi il progresso a 100 il "effetto giallo" verrà visualizzato su entrambi i lati, –

+0

aggiornato la mia risposta. –

+0

grazie! lavoro impeccabile –

3

uso questo

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

a circular_progress_bar disegnabile (cambiamento di colore secondo le vostre necessità)

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

Si dovrebbe usare type = "spazzare" invece di "radiale" per creare gradiente come o nella foto Per esempio:

<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

uso questo

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

a circular_progress_bar disegnabile (cambiano colore in base alle proprie necessità)

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