how to fill images using progressbar in android

Question

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%:

and this for 0% progress:

Answer 1

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.