Hi I wanted to use speech bubbles as background images for my app. I came across this posted here
Android drawable speech bubble
The example starts from the right direction I wanted to achieve this in the opposite direction I have tried
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="30dp">
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#CCC" />
</shape>
</rotate>
</item>
<item android:right="10dp">
<shape android:shape="rectangle" >
<solid android:color="#CCC" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
But I'm unable to get it to work, any help would be greatly appreciated!
Incoming message:
<?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="0%" >
<shape android:shape="rectangle">
<solid android:color="#color/chat_message_background_incoming" />
</shape>
</rotate>
</item>
<item android:left="20dp">
<shape
android:shape="rectangle">
<solid android:color="#color/chat_message_background_incoming"/>
<corners
android:radius="1dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="5dp"
android:topRightRadius="15dp" />
</shape>
</item>
</layer-list>
Outgoing message:
<?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="100%"
android:pivotY="0%" >
<shape android:shape="rectangle">
<solid android:color="#color/chat_message_background_outcoming" />
</shape>
</rotate>
</item>
<item android:right="20dp">
<shape
android:shape="rectangle">
<solid android:color="#color/chat_message_background_outcoming"/>
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="5dp" />
</shape>
</item>
</layer-list>
Hopefully, it would help
incoming bubble shape background
<?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="100%"
android:pivotY="100%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#color/colorSendMessageBg" />
</shape>
</rotate>
</item>
<item android:right="5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/colorSendMessageBg" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
outgoing bubble shape background
<?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/colorReciveMessageBg" />
</shape>
</rotate>
</item>
<item android:left="5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/colorReciveMessageBg" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
Final result
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 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'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.
Could I please ask if anyone knows how to create an xml shape of the chat bubble below? The only examples I found online were two separate shapes that were put as two separate backgrounds in a layout - a triangle and a rectangle. I tried combining the triangle and rectangle to no avail. The triangle seems to hide in the rectangle.
Setting a top attribute to the triangle to move it down makes the ImageView object blank.
Please see what I tried:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--rectangle with rounded corners-->
<item android:top="0dp" android:bottom="20dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:width="106dp"
android:height="20dp"/>
<stroke
android:width="1dp"
android:color="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--triangle-->
<item android:bottom="0dp" android:top="20dp" android:gravity="center_horizontal|bottom">
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="135%"
android:pivotY="15%">
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:height="10dp"
android:width="10dp"/>
</shape>
</rotate>
</item>
</layer-list>
This is the usage in the imageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="net.eventilate.shapes.Balloon">
<ImageView
android:layout_width="106dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:contentDescription="#string/test"
android:background="#drawable/balloon"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
You can Use this code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="0dp" android:bottom="10dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_blue_light" />
<size
android:width="106dp"
android:height="20dp"/>
<stroke
android:width="1dp"
android:color="#40adc2" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:bottom="0dp"
android:top="0dp"
android:gravity="center_horizontal|bottom">
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="135%"
android:pivotY="15%">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_blue_light" />
<size
android:height="10dp"
android:width="10dp"/>
</shape>
</rotate>
</item>
</layer-list>
it get this result:
This is exactly what you need:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- red shape -->
<item
android:bottom="0dp"
android:gravity="center_horizontal|bottom"
android:top="0dp">
<rotate
android:fromDegrees="45"
android:pivotX="110%"
android:pivotY="17%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</rotate>
</item>
<item
android:bottom="10dp"
android:top="0dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#android:color/holo_red_dark" />
<size
android:width="50dp"
android:height="20dp" />
</shape>
</item>
<!-- black shape -->
<item
android:bottom="0dp"
android:gravity="center_horizontal|bottom"
android:top="0dp">
<rotate
android:fromDegrees="45"
android:pivotX="120%"
android:pivotY="15%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#android:color/black" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</rotate>
</item>
<item
android:bottom="10.5dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#android:color/black" />
<size
android:width="50dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
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>