Android drawable speech bubble

Question

I've looked for days and can not find any good leads on how I can draw a bubble or where a draw 9 patch images is to use as a background. i am a terrible artist --Can anyone help?

the best sample i found is here on stackoverflow, but it's written in objective c

How to draw a "speech bubble" on an iPhone?

Thank you

Answer 1

If you are creating a chat screen you are probably going to want to implement an incoming speech bubble and an outgoing speech bubble. Here is how I did that :

shape_bg_incoming_bubble.xml

<?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%"             android:toDegrees="0" >             <shape android:shape="rectangle" >                 <solid android:color="@color/primary" />             </shape>         </rotate>     </item>     <item android:left="16dp">         <shape android:shape="rectangle" >             <solid android:color="@color/primary" />             <corners android:radius="4dp" />         </shape>     </item> </layer-list> 

shape_bg_outgoing_bubble.xml

<?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%"             android:toDegrees="0" >             <shape android:shape="rectangle" >                 <solid android:color="@color/grey_500" />             </shape>         </rotate>     </item>     <item android:right="16dp">         <shape android:shape="rectangle" >             <solid android:color="@color/grey_500" />             <corners android:radius="4dp" />         </shape>     </item> </layer-list> 

Answer 2

I know its bit too late for this. For those, who don't want to use 9-patch images yet want to cast shadows from speech bubble. This is closest I could get to WhatsApp speech bubble. And thanks to @toobsco42 for the answer above.

Here you go..

Incoming Speech Bubble :

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <!--Shadow Layers-->  <item>     <rotate         android:fromDegrees="-35"         android:pivotX="0%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <corners android:radius="4dp"/>             <padding                 android:bottom="1px"                 android:left="1px"                 android:right="1px"/>             <solid android:color="#01000000" />         </shape>     </rotate> </item> <item android:left="8dp">     <shape android:shape="rectangle">         <padding             android:bottom="1px"             android:left="1px"             android:right="1px"/>         <solid android:color="#01000000" />         <corners android:radius="8dp" />     </shape> </item>  <!--===============--> <item>     <rotate         android:fromDegrees="-35"         android:pivotX="0%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <corners android:radius="4dp"/>             <padding                 android:bottom="1px" />             <solid android:color="#09000000" />         </shape>     </rotate> </item> <item android:left="8dp">     <shape android:shape="rectangle">         <padding             android:bottom="1px" />         <solid android:color="#09000000" />         <corners android:radius="8dp" />     </shape> </item>  <!--===============-->  <item>     <rotate         android:fromDegrees="-35"         android:pivotX="0%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <corners android:radius="4dp"/>             <padding                 android:bottom="1px"                 android:left="1px"                 android:right="1px"/>             <solid android:color="#10000000" />         </shape>     </rotate> </item> <item android:left="8dp">     <shape android:shape="rectangle">         <padding             android:bottom="1px"             android:left="1px"             android:right="1px"/>         <solid android:color="#10000000" />         <corners android:radius="8dp" />     </shape> </item>  <!--ForeGround-->  <item>     <rotate         android:fromDegrees="-35"         android:pivotX="0%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <corners android:radius="4dp"/>             <solid android:color="@color/colorWhite" />         </shape>     </rotate> </item> <item android:left="8dp">     <shape android:shape="rectangle">         <solid android:color="@color/colorWhite" />         <corners android:radius="8dp" />     </shape> </item>  </layer-list> 

Outgoing Speech Bubble :

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <!--Shadow Layer-->  <item>     <rotate         android:fromDegrees="40"         android:pivotX="100%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <corners android:radius="4dp" />             <padding                 android:bottom="1px"                 android:left="1px"                 android:right="1px" />             <solid android:color="#01000000" />         </shape>     </rotate> </item> <item android:right="10dp">     <shape android:shape="rectangle">         <corners android:radius="4dp" />         <padding             android:bottom="1px"             android:left="1px"             android:right="1px" />         <solid android:color="#01000000" />     </shape> </item>  <!--===============-->  <item>     <rotate         android:fromDegrees="40"         android:pivotX="100%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <corners android:radius="4dp" />             <padding android:bottom="1px" />             <solid android:color="#09000000" />         </shape>     </rotate> </item> <item android:right="10dp">     <shape android:shape="rectangle">         <corners android:radius="4dp" />         <padding android:bottom="1px" />         <solid android:color="#09000000" />     </shape> </item>  <!--===============-->  <item>     <rotate         android:fromDegrees="40"         android:pivotX="100%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <corners android:radius="4dp" />             <padding                 android:bottom="1px"                 android:left="1px"                 android:right="1px" />             <solid android:color="#10000000" />         </shape>     </rotate> </item> <item android:right="10dp">     <shape android:shape="rectangle">         <corners android:radius="4dp" />         <padding             android:bottom="1px"             android:left="1px"             android:right="1px" />         <solid android:color="#10000000" />     </shape> </item>  <!--===============-->   <!--ForeGround-->  <item>     <rotate         android:fromDegrees="40"         android:pivotX="100%"         android:pivotY="0%"         android:toDegrees="0">         <shape android:shape="rectangle">             <solid android:color="#CBEBFC" />         </shape>     </rotate> </item> <item android:right="10dp">     <shape android:shape="rectangle">         <solid android:color="#CBEBFC" />         <corners android:radius="4dp" />     </shape> </item>  </layer-list> 

Use the paddings properly in the layout. I used these values :

<TextView     android:id="@+id/text_message_incoming"     android:layout_width="0dp"     android:layout_height="wrap_content"     android:background="@drawable/bg_speech_bubble_incoming"     android:lineSpacingExtra="2dp"     android:paddingLeft="20dp"     android:paddingTop="4dp"     android:paddingRight="10dp"     android:paddingBottom="10dp"     android:text="Hi, How are you?"     android:textColor="@color/colorBlack"     android:textSize="13.5dp"     app:layout_constraintStart_toStartOf="parent"     app:layout_constraintTop_toTopOf="parent"     app:layout_constraintWidth_max="wrap"     app:layout_constraintWidth_percent="0.8" /> 

My output came out like this: