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>

Plus sign in android

I'm trying to create a plus sign as shape, so here is my code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="90"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%" >
<shape android:shape="line">
<solid android:color="#00000000" />
<stroke android:width="5dp" android:color="#807DFF96" />
<size android:width="50dp" android:height="50dp" />
</shape>
</rotate>
<shape android:shape="line">
<solid android:color="#00000000" />
<stroke android:width="5dp" android:color="#807DFF96" />
<size android:width="50dp" android:height="50dp" />
</shape>
</item>
</selector>
But it seems to be rendering only a line, based on which one I keep above.
How can I resolve this ?

Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="90"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%" >
<shape android:shape="line">
<solid android:color="#00000000" />
<stroke android:width="5dp" android:color="#807DFF96" />
<size android:width="50dp" android:height="50dp" />
</shape>
</rotate>
</item>
<item>
<shape android:shape="line">
<solid android:color="#00000000" />
<stroke android:width="5dp" android:color="#807DFF96" />
<size android:width="50dp" android:height="50dp" />
</shape>
</item>
</layer-list>
Whenever you want to add multiple items use layer-list.

How to change the length of line in drawable resource?

I used the following xml code to draw a drawable image:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle" >
<corners
android:topLeftRadius="30dp"
android:topRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp" />
<solid
android:color="#color/black" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<size
android:width="60dp"
android:height="60dp" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape
android:shape="line">
<stroke
android:width="2dp"
android:color="#color/white" />
</shape>
</rotate>
</item>
</layer-list>
By the above code, I ended up with this image:
Now I have to reduce the length of the white line in the center of the circle. i have used both <size android:height="40dp" /> and <size android:width="40dp" /> on the line and it doesn't do anything. So, how can I reduce the length of the line?

You can try this
Add bottom,top,end & start to your item
<item
android:bottom="10dp"
android:top="10dp"
android:end="10dp"
android:start="10dp">
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape
android:shape="line">
<stroke
android:width="2dp"
android:color="#color/white" />
</shape>
</rotate>
</item>

use this code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<solid android:color="#color/black" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:width="60dp"
android:height="60dp" />
</shape>
</item>
<item
android:bottom="5dp"
android:end="10dp"
android:start="10dp"
android:top="5dp">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#color/white" />
</shape>
</rotate>
</item>
</layer-list>

You can adjust padding of rectangle shape to reduce the width of line
You can try this code
<item>
<shape
android:shape="rectangle" >
<corners
android:topLeftRadius="30dp"
android:topRightRadius="30dp"
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp" />
<solid
android:color="#color/black" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<size
android:width="60dp"
android:height="60dp" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="50%"
android:pivotY="50%">
<shape
android:shape="line">
<stroke
android:width="2dp"
android:color="#color/white" />
</shape>
</rotate>
</item>

Draw tooltip in drawable

I want to add tooltip up to my button. Is there any easy way to do this. I want to draw shape. But I only find methods with draw view or suggest to add lib.
Is it possible to draw tooltip(make tooltip with xml)?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="12dp"
android:height="12dp"
android:gravity="bottom|center_horizontal">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<gradient
android:angle="0"
android:endColor="#cc00b8 "
android:startColor="#ef89ff "
android:type="linear" />
</shape>
</rotate>
</item>
<item
android:width="120dp"
android:height="36dp"
android:bottom="6dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#cc00b8 "
android:startColor="#ef89ff "
android:type="linear" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>

insert the width and height into a size tag so it will be usable in lower API levels:
<item android:gravity="bottom|center_horizontal">
<rotate android:fromDegrees="45" android:toDegrees="45"
android:pivotX="50%" android:pivotY="50%" >
<shape android:shape="rectangle">
<size android:width="12dp" android:height="12dp" />
<corners android:bottomRightRadius="2dp"/>
<gradient android:type="linear"
android:angle="0"
android:endColor="#color/gradient_red"
android:startColor="#color/gradient_red" />
</shape>
</rotate>
</item>
<item android:bottom="6dp">
<shape android:shape="rectangle">
<size android:width="120dp" android:height="36dp" />
<gradient android:type="linear"
android:angle="0"
android:endColor="#color/gradient_red"
android:startColor="#color/gradient_red" />
<corners android:radius="6dp" />
</shape>
</item>

<item
android:top="17dp">
<shape
android:shape="rectangle">
<solid
android:color="#FF7276" />
<corners
android:radius="8dp" />
<padding
android:top="17dp" />
</shape>
</item>
<item
android:width="24dp"
android:height="24dp"
android:end="32dp"
android:gravity="end"
android:top="-12dp">
<rotate
android:fromDegrees="45">
<shape
android:shape="rectangle">
<solid
android:color="#FF7276" />
</shape>
</rotate>
</item>
Try this, you will get perfect Tooltip shape in UI, after coping this code just check your UI(xml) or run the the program
enter image description here

Android: writing drawables in xml

I need to create some drawables that look like image below, is there a way to do this in xml?
Edit:
I have got this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/darker_gray" />
<corners android:radius="6dp" />
</shape>
</item>
<item
android:bottom="3dp">
<shape android:shape="rectangle">
<solid android:color="#color/dark_gray" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>
it's the same like on the picture without that blue corner and I have no idea how to do that diagonal shape. Now I'm using 9 patch, but since all my other buttons are in xml, I was just wondering if there is some way to write this also in xml

Try this code, i guess this is what you want:
draw.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<size android:width="100dp"
android:height="60dp"/>
<stroke android:width="2dp" android:color="#333333" />
<solid android:color="#333333" />
<padding android:bottom="3dp"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<size android:width="100dp"
android:height="60dp"/>
<stroke android:width="2dp" android:color="#000000" />
<solid android:color="#000000" />
<padding android:bottom="1dp"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees="-45"
android:toDegrees="45"
android:pivotX="-40%"
android:pivotY="87%" >
<shape
android:shape="rectangle" >
<size android:width="50dp"
android:height="50dp"/>
<stroke android:color="#android:color/transparent" android:width="0dp"/>
<solid
android:color="#android:color/holo_blue_light" />
<corners android:radius="5dp"/>
</shape>
</rotate>
</item>
<item>
<shape
android:shape="rectangle">
<size android:width="100dp"
android:height="60dp"/>
<stroke android:width="2dp" android:color="#android:color/transparent" />
<solid android:color="#android:color/transparent" />
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
and in your layout file
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_centerInParent="true"
android:background="#drawable/draw" >
</RelativeLayout>

You should use layer list to combine multiple drawables below is an example.
You should also check this very complete guide to android drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#585858" />
<solid android:color="#FF9009" />
<padding android:bottom="1dp"/>
</shape>
</item>
<item android:left="10dp" android:top="20dp" android:bottom="20dp" android:right="150dp">
<shape
android:shape="oval">
<stroke android:width="1dp" android:color="#ffffff" />
<solid android:color="#118C4E" />
<padding android:bottom="1dp"/>
</shape>
</item>
<item android:left="150dp" android:top="20dp" android:bottom="20dp" android:right="10dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#ffffff" />
<solid android:color="#C1E1A6" />
<padding android:bottom="1dp"/>
</shape>
</item>
</layer-list>