Drawing a tooltip with a border

Issue

I am trying to achieve an a bordered tooltip like this (well not exactly, just the part where I want to have a smooth border):

So far, this is what I have tried:

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

        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <stroke android:color="@android:color/holo_blue_bright" android:width="1dp"/>
            </shape>
        </rotate>
    </item>
    <item>
        <shape android:shape="rectangle">
            <size android:width="206dp" android:height="76dp" />
            <solid android:color="@color/white"/>
            <stroke android:color="@android:color/holo_blue_bright"  android:width="1dp"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item android:gravity="top|right">
        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <solid android:color="@color/white"/>
            </shape>

        </rotate>
    </item>

</layer-list>

Here's my output:

Solution

I got something working, though it's not perfect. Here's the output:

Notice the edges are not very smooth. Here's the modified code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="top|right" android:right="10dp">
        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <stroke android:color="@android:color/holo_blue_bright" android:width="1dp"/>
            </shape>
        </rotate>
    </item>
    <item>
        <shape android:shape="rectangle">
            <size android:width="206dp" android:height="76dp" />
            <solid android:color="@color/white"/>
            <stroke android:color="@android:color/holo_blue_bright"  android:width="1dp"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item android:gravity="top|right" android:right="10dp" android:top="1dp">
        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <solid android:color="@color/white"/>
            </shape>

        </rotate>
    </item>

</layer-list>

Answered By - dev