Develop Reference

how to Draw tooltip with border in android?

I am new to android and I wish to achieve a tooltip with border. Tooltip pointing to left.
i.e: like below with text of choice.
please help me with this, stuck with this for quite sometime now.
I was able to create a tooltip at top righ but how to get it in left ceter_verticle like the diagram.
my code looks like.
<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>

Try the below code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="16dp"
android:right="16dp"
android:top="17dp"
android:bottom="17dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="15dp" />
</shape>
</item>
<item
android:bottom="345dp"
android:right="360dp"
android:top="345dp">
<rotate
android:fromDegrees="-45"
android:pivotX="10%"
android:pivotY="10%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</rotate>
</item>
<item
android:bottom="350dp"
android:right="350dp"
android:top="350dp">
<rotate
android:fromDegrees="-45"
android:pivotX="1%"
android:pivotY="-5%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</rotate>
</item>
<item
android:bottom="19dp"
android:left="19dp"
android:right="19dp"
android:top="19dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
</layer-list>

Android drawable xml reverse corners

I'm trying to replicate the following shape in Android studio:
I can't figure out how to do it in android drawable xml.
At the moment I used a layer-list where:
As the first item I placed a transparent (or white) rectangle, to which I gave a padding on the left side and vertically.
As the second item I placed a rectangle containing the gradient and the corners on the left.
Now, I don't know how I can make the two "reverse angles" on the right, I've tried everything but online there aren't many examples to refer.
Here's my current code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/transparent" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="0dp"
android:top="8dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#color/green"
android:startColor="#color/blue"
android:type="linear" />
<corners
android:bottomLeftRadius="22dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="22dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
How can I change the code to obtain this shape?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="600dp"
android:height="400dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#android:color/holo_green_light"
android:startColor="#android:color/holo_blue_light"
android:type="linear" />
</shape>
</item>
<item android:width="600dp"
android:height="100dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:bottomRightRadius="100dp" />
</shape>
</item>
<item android:width="600dp"
android:height="100dp"
android:top="300dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:topRightRadius="100dp" />
</shape>
</item>
<item android:width="200dp"
android:height="200dp"
android:top="100dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:width="600dp"
android:height="200dp"
android:top="100dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#android:color/holo_green_light"
android:startColor="#android:color/holo_blue_light"
android:type="linear" />
<corners android:radius="100dp" />
</shape>
</item>
</layer-list>
Here is a preview image
try this

Chat Bubble background Xml

I am trying create chat drawable background but not for chat just for view.Tried using some codes no able acheive fully as per the required. please help me to finish this.
Required image:
My code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="0%"
android:pivotY="100%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#color/colorWhite" />
</shape>
</rotate>
</item>
<item android:left="20dp">
<shape android:shape="rectangle" >
<solid android:color="#color/colorWhite" />
<corners android:radius="5dp" />
</shape>
</item>

try this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="0%"
android:pivotY="10%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#color/colorBlack" />
</shape>
</rotate>
</item>
<item
android:top="50dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>

Drawing a tooltip with a border

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:

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>

You should just use 9-patch. On Android Studio, choose "create 9-patch file" :
Then, have the left and top marking for the parts you wish to duplicate the larger/smaller you have the image.
And have the right and bottom markings for the parts you wish to have the content.
On many cases, those are the same areas. but on your case, I think it won't be as such.
I also suggest to make the image as small as possible, so that it will take minimal size that you allow it to be. This would save a bit of space.
You can read more about those on the docs:
https://developer.android.com/guide/topics/graphics/drawables#nine-patch
https://developer.android.com/studio/write/draw9patch

layer-list not working as expected, I want to understand this concept

I have fair Idea about layer_list referred from here and here
here is my code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#FEBB02" />
<corners android:radius="4dp" />
<size
android:width="40dp"
android:height="20dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="10dp"
android:right="10dp"
>
<rotate
android:toDegrees="45"
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape android:shape="rectangle">
<solid android:color="#3F51B5" />
<corners android:radius="2dp" />
</shape>
</rotate>
</item>
This is how it is look line in studio
but when I am applying background of Linearlayout it gives this result
I am expecting corner would be below the pointed as seen in studio.

I think you should try setting the clipToPadding and clipChildren attributes to false, inside the parent view of the linear layout.

Plz change size of Linearlayout to 150dp * 100dp.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item>-->
<!--<scale android:drawable="#drawable/ic_launcher" android:useIntrinsicSizeAsMinimum="true">-->
<!--<!–<shape android:shape="rectangle" android:useLevel="true">–>-->
<!--<!–<solid android:color="#color/red" />–>-->
<!--<!–<size–>-->
<!--<!–android:width="60dp"–>-->
<!--<!–android:height="60dp" />–>-->
<!--<!–</shape>–>-->
<!--</scale>-->
<!--</item>-->
<item
android:bottom="15dp"
android:left="0dp"
android:right="0dp"
android:top="15dp">
<shape android:shape="rectangle">
<solid android:color="#FEBB02" />
<corners android:radius="4dp" />
<size
android:width="150dp"
android:height="70dp" />
</shape>
</item>
<item
android:bottom="15dp"
android:left="40dp"
android:right="40dp"
android:top="15dp"
>
<rotate
android:toDegrees="45"
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape android:shape="rectangle">
<solid android:color="#3F51B5" />
<corners android:radius="2dp" />
<size
android:width="70dp"
android:height="70dp" />
</shape>
</rotate>
</item>
</layer-list>