Android drawable speech bubble
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
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>
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: