2

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 :

heart

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 ?

Community
  • 1
  • 1
San
  • 2,078
  • 1
  • 24
  • 42

1 Answers1

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.

iaindownie
  • 1,046
  • 12
  • 28
  • So if I get a the inner part of the heart to be transparent, I can achieve what I want ? – San Jan 14 '16 at 11:50
  • Yes. You will have to access the underlying layout within your activity, but then it's just setting the background colour with setBackgroundColor() – iaindownie Jan 14 '16 at 11:55
  • 1
    I think I got it, I never thought it would be so simple. I mean, I was so foolish not to think like this, I didn't know about the transparency part. You just saved me a lot of time. – San Jan 14 '16 at 12:21
  • I had some small changes in my UI, I am now creating the same heart but with different background and the background is semi-transparent and its not white. Its a solid color with some transparency in it. I cant seem to have the outer background of the heart to be of the semi-transparent color cause it seems a bit weird. Any idea on how I can overcome this situation ? – San Jan 28 '16 at 07:21
  • So it looks weird because changing the Layout background colour makes the outer-heart semi-transparency change to an undesired colour too? Think I can see a solution: Have two images overlaying each other, both with transparent hearts. Bottom image has white outer, Upper image semi-transparent outer. Changing Layout background colour shouldn't penetrate Bottom image. – iaindownie Jan 28 '16 at 12:05
  • I am not sure I understand I understand what you are saying but let me add a screenshot so as to have a better understanding. But I do believe that your idea can actually solve my problem if I understand it well. – San Jan 28 '16 at 12:50
  • Not sure I can solve this one, after looking at image. Think you'd be best creating a new question as this has evolved quite a bit. – iaindownie Jan 28 '16 at 13:26
  • Thanks for your help anyways. Will do. – San Jan 28 '16 at 13:29