Fill a image view or bitmap with color in Android dynamically and sequentially

Question

I have a bitmap in android which can be used with either imageview or via canvas. I have a heart shaped bitmap and I need to fill it with color dynamically, I have to fill the inner part of the heart with color. Only the inner part of the heart has to be filled and the outer part has to be neglected. I have already dealt with a issue of same kind but I was using Canvas to draw the heart and now I need to use a bitmap of a heart shaped structure to fill the heart with color.

My previous question is here

For example, consider the following image :

The shape of the heart image is actually a perfect square and there are white backgrounds on either side of the heart outline. So, my question is how do I find the inner part of the heart in this image. In my previous question, there was canvas and it was ok to get an idea and achieve but in this case, I don't have much idea to figure this out.

Any help or reference will be highly appreciated.

Update :

When I started with this question, I had a white background for the heart but now I have a semi-transparent layer with background color to heart.

Here is what I have

Code :

            <RelativeLayout
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:id="@+id/first_heart_beat"
                android:layout_centerInParent="true"
                android:layout_below="@+id/member_name_heart_beat"
                >

                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:id="@+id/first_heart_beat_filled_relative"
                    android:background="@color/heart_filled_color"
                    android:layout_alignLeft="@+id/first_heart_imageview"
                    android:layout_alignRight="@+id/first_heart_imageview"
                    android:layout_alignParentBottom="true">

                </RelativeLayout>

                <ImageView
                    android:layout_width="180dp"
                    android:layout_height="150dp"
                    android:src="@drawable/heartwhite2"
                    android:id="@+id/first_heart_imageview"
                    android:layout_alignParentBottom="true"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="0 %"
                    android:padding="2dp"
                    android:id="@+id/heart_filled_percentage_text"
                    android:textSize="9sp"
                    android:gravity="center"/>


            </RelativeLayout>

Using this code, I am increasing the height of first_heart_beat_filled_relative dynamically according to the amount of data filled by the user. But as the background is also semi-transparent, I am not able to achieve what I want. Any workarounds for this ?

Answer 1

If the inner part of the heart is transparent (and you say the outer elements of the heart square are white), then put the image in a container (RelativeLayout or LinearLayout with same dimensions as your image) and set the background colour of that container programatically.