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
Related
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>
I have to create a shape like this
I will be creating a rounded rectangle and placing the triangle at the centre bottom of the rectangle.
So far I have my rectangle
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#001E33" />
<corners android:radius="30dp" />
</shape>
I created a upside triangle
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="-40%"
android:pivotY="87%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#android:color/transparent" />
<solid android:color="#000000" />
<corners android:radius="30dp"/>
</shape>
</rotate>
</item>
</layer-list>
How do I make the triangle point down and how do I club these 2 files to make a single drawable?
Draw it in Adobe illustrator(or other similar software) and use svg file format.
Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="40dp"
android:right="40dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<size android:width="100dp"
android:height="100dp"/>
<padding android:bottom="30dp"
/>
<stroke
android:width="30dp"
android:color="#android:color/transparent" />
<solid android:color="#001E33" />
<corners android:radius="30dp"/>
</shape>
</rotate>
</item>
<item>
<shape>
<solid android:color="#001E33" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>
We can add multiple shape items inside layer list.
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>
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
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>