Last Updated: December 19, 2019
·
25.71K
· mostafagazar

How to draw heart shaped ImageView in Android using PorterDuffXfermode and SVG

Custom shape ImageView using PorterDuffXfermode and SVGs

Library https://github.com/MostafaGazar/CustomShapeImageView

Gist https://gist.github.com/MostafaGazar/ee345987fa6c8924d61b

Usage:

<com.meg7.widget.SvgImageView
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:src="@drawable/sample"
    app:svg_raw_resource="@raw/shape_heart"
    android:scaleType="centerCrop" />

Picture

4 Responses
Add your response

How can i create my own shape ? i mean u did it with coding in SVG file !!!!
but how can i ?
can i directly convert image to svg file or i have to make the shape ????
babulpatel1309@gmail.com

over 1 year ago ·

You can use an image as a mask by:
1- Create new class BitmapMaskedImageView extends BaseImageView and load the image mask you want in getBitmap(int width, int height), https://github.com/MostafaGazar/CustomShapeImageView
2- Read the image file in getMask line: 175 in the attached gist, https://gist.github.com/MostafaGazar/ee345987fa6c8924d61b

The edges would look rougher most probably so svg or simple canvas draw methods might be a better option.

You can use Inkscape which is an opensource software for desktops to create/edit svg files.

over 1 year ago ·

hi how can i select single shape just for single imageView not in gridView for example if user want to select start shape then in application just only show star shape imageView no others shape will show can u help me out with this please m waiting for ur suggestions

over 1 year ago ·

You can use an image as a mask by:
1- Create new class BitmapMaskedImageView extends BaseImageView and load the image mask you want in getBitmap(int width, int height), https://github.com/MostafaGazar/CustomShapeImageView
2- Read the image file in getMask line: 175 in the attached gist, https://gist.github.com/MostafaGazar/ee345987fa6c8924d61b

Can u write the code in detailed manner??

over 1 year ago ·