Custom drawable speech bubble

Question

I need to create a speech bubble background for an icons container like the white one in this image:

Required Appearance

I decided to use a drawable xml rather than a 9 patch image, so I can control of the rounded corner radii in my code. So, with the help of this answer to a related question, I have created the following xml:

bg_icons_container.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:left="0dp"
        android:top="27dp"> <!-- How to make this 50% of height? -->

        <rotate
            android:fromDegrees="-45"
            android:toDegrees="0"
            android:pivotX="0%"
            android:pivotY="0%"> <!-- How to make the triangle more acute? -->

            <shape
                android:shape="rectangle" >

                <solid
                    android:color="@color/white"/>

            </shape>

        </rotate>

    </item>

    <item
        android:left="10dp">

        <shape
            android:shape="rectangle">

            <solid
                android:color="@color/white"/>

            <corners
                android:radius="@dimen/border_radius_small"/>

        </shape>

    </item>

</layer-list>

This results in:

Actual Apperance (enlarged)

My problem is that the triangular part of the drawable is too wide. How can I make it more acute? (My minSdkVersion is 16, so I cannot use android_width on the first item to try and stretch it.)

Also, I am having to hard code android:top of the first item to 27dp. Is it possible to make this 50%, so it will correctly adjust when the height of the drawable changes?

You could use a VectorDrawable. You might also try something different instead of a triangle, in that case - something like a "half-banana" or a "horn". — Phantômaxx, Jul 18 '18 at 10:46
Thanks. I'll check out VectorDrawable. How would I implement a half-banana or horn? — ban-geoengineering, Jul 18 '18 at 11:07
Draw the image (or convert an existing png - or download a speech balloon in svg format) using something like InkScape. Then use something like [this](https://stackoverflow.com/a/49604598/2649012) or a proper tool (there should be dozens) to convert the SVG to a VectorDrawable. — Phantômaxx, Jul 18 '18 at 14:45

Custom drawable speech bubble

0 Answers0