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>
Related
The drawable is not getting displayed
circle_add.xml in drawable
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="5dp" android:color="#000000"/>
</shape>
</item>
<item>
<shape android:shape="line">
<stroke android:width="5dp" android:color="#000000" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-90">
<shape android:shape="line">
<stroke android:width="5dp" android:color="#000000" />
</shape>
</rotate>
</item>
</layer-list>
I have used it inside the editText
<EditText
android:id="#+id/member_email"
android:layout_width="340dp"
android:layout_height="46dp"
android:background="#d4d4d4"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="20dp"
tools:ignore="MissingConstraints"
android:drawableRight="#drawable/circle_add"
tools:layout_editor_absoluteX="36dp"
tools:layout_editor_absoluteY="312dp" />
But it is not getting displayed inside the textbox.
How to make it appear at the end of the textbox.
You didn't define the size of it.
Copy the below codes and try again. it will be shown.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<size
android:height="10dp"
android:width="10dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#000000"/>
</shape>
</item>
<item>
<shape android:shape="line">
<stroke android:width="1dp" android:color="#000000" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-90">
<shape android:shape="line">
<stroke android:width="1dp" android:color="#000000" />
</shape>
</rotate>
</item>
</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 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
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>