CODEWITHSUNDEEP
androidgradientfadeprogress
Max Bowden
Max Bowden

Reputation: 13

Android ProgressBar make gradient fade transparent

Here is my ProgressBar at present.

Note how the pink colour fades into a back colour. This is not just because the background is grey (this is just a snip from the layout preview in Android Studio), since even in the app which has a white background it still fades to black.

What I want to achieve is the pink fading into transparent, so as the amount of pink in the gradient decreases, more of the background becomes visible.

Does anyone know how to achieve this?

Here is the drawable for the progress bar:

<?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="30"
        android:useLevel="false">

    <gradient
        android:centerColor="#00000000"
        android:centerY="0.50"
        android:endColor="@color/colorAccent"
        android:startColor="@color/colorAccent"
        android:type="sweep"
        android:useLevel="false" />
   </shape>

And here is it's declaration in my layout:

 <ProgressBar
     android:layout_width="210sp"
     android:layout_height="210sp"
     style="?android:attr/progressBarStyleLarge"
     android:indeterminateDrawable="@drawable/circular_progress_bar_big"
     android:indeterminate="false"
     android:id="@+id/progressPose"
     android:layout_gravity="center"
     android:visibility="visible"
     android:progress="100" />

All help appreciated, thank you! Max

Upvotes: 1

Views: 1706

Answers (1)

Arjun saini
Arjun saini

Reputation: 4182

for Transparency in color used this answer Hex transparency in colors

  • 100% — FF
  • 95% — F2
  • 90% — E6
  • 85% — D9
  • 80% — CC
  • 75% — BF
  • 70% — B3
  • 65% — A6
  • 60% — 99
  • 55% — 8C
  • 50% — 80
  • 45% — 73
  • 40% — 66
  • 35% — 59
  • 30% — 4D
  • 25% — 40
  • 20% — 33
  • 15% — 26
  • 10% — 1A
  • 5% — 0D
  • 0% — 00

(source)

So in your drawable you set transparency like that for color accent

 <?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="30"
    android:useLevel="false">

<gradient
    android:centerColor="#00000000"
    android:centerY="0.50"
    android:endColor="@color/colorAccent"
    android:startColor="@color/colorAccent"
    android:type="sweep"
    android:useLevel="false" />
  </shape>
</rotate>

color.xml

for 50%

  <color name="colorAccent">#80FF4081</color>

85% — D9

  <color name="colorAccent">#D9FF4081</color>

etc. you use...

Upvotes: 1

Related Questions