5

I am working on a project and it requires to fill the image. means i want to use the image shape as a progress bar. I don't get any idea of how to use custom progress-bar. here is an image and its an image-button.

So this is when progress is 100%:

first image

and this for 0% progress:

second image

techraf
  • 64,883
  • 27
  • 193
  • 198
Aakash MEHTA
  • 75
  • 1
  • 5
  • You need to create a series of images like 10 for each10% and you can show them as the progressbar progresses – surya Oct 06 '16 at 00:11
  • Check this http://stackoverflow.com/questions/29398156/bitmapdrawable-as-progressbar-in-android-how-to-build-it – surya Oct 06 '16 at 00:13

1 Answers1

15

You need to learn about drawable resources.

Drawable Resources | Android Developers

You can do this with a Layer List and a Clip Drawable.

First, let's talk about level. Every drawable has a level that goes from 0 to 10000. The level can be used to modify the appearance of the drawable.

Let's start with the Clip Drawable. A Clip Drawable will clip the drawable based on its level. This is great for progress-bar style. I'll assume you want to draw the red heart from the bottom up over the grey heart.

/res/drawable/red_heart_clip.xml

<?xml version="1.0" encoding="utf-8"?>
<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/red_heart"
    android:clipOrientation="horizontal"
    android:gravity="bottom"/>

Now that you have the revealing on the way up, you want to show the grey heart as a background, so that it looks like the grey heart is becoming red. You can overlay two drawables with a Layer List.

/res/drawable/progress_heart.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/grey_heart"/>
    <item android:drawable="@drawable/red_heart_clip"/>
</layer-list>

Now you assign this drawable to the background of a view. It could also be the src of an ImageView.

<View
    android:background="@drawable/progress_heart"
    ...

Now you can set the level of the drawable like this:

    int level = 100 * pct;   // pct goes from 0 to 100
    view.getBackground().setLevel(level)

Oh, and BTW you don't even need a ProgressBar.

kris larson
  • 30,387
  • 5
  • 62
  • 74
  • 1
    Is it possible to do that with images that are inside a gridView? if yes, how? thanks – Francy Grillo Jan 08 '20 at 19:48
  • It is naturally possible to do with every object that uses a drawable object as its background. You don't even have to use an ImageView, you can achive it using a plain view object. In order to use it in a GridView you'd have to create an item cell to supply it to an adapter and create a representative object that will hold the actual data. Then in the item cell you add a view to hold that background drawable. When you update the progress value for each data object, you call notifyDataSetChanged and new value wil be bound in the adapter's getView method. You must implement this method. – Kozmotronik Apr 18 '21 at 10:09