Aakash MEHTA Aakash MEHTA - 13 days ago 4x
Android Question

how to fill images using progressbar in android

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


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.


<?xml version="1.0" encoding="utf-8"?>

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.


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

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


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

    int level = 100 * pct;   // pct goes from 0 to 100

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