How to make message bubble in Android using XML
In this tutorial we’ll look how to make message bubble with tail. I’ll take Telegram message bubble as sample. Source code of the tutorial is here

Alright. Let’s start to clone it!
So, our message bubble will consist of:
- TextView with wrap_content width and wrap_content height
- Background with rectangular shape
- ImageView, that represents bubble’s tail
- TextView with time and ImageView with check mark
Step 1: Create new layout file and put TextView in ConstraintLayout

Step 2: Create drawable, that will be background of the TextView
Now, add this drawable to background
android:background=”@drawable/rounded_rectangle”Include message layout in main layout

Do you see that text is too close to the end of its background? Yes, it’s time to use padding to TextView. I make value of paddingEnd bigger than others, because we need space to put message data and status(check marks)
android:paddingEnd=”53dp”android:paddingStart=”8dp”android:paddingTop=”8dp”android:paddingBottom=”8dp”

Also, keep enforcing constraints to limit the resulting dimension
app:layout_constrainedWidth=”true”
Add more margin to start

Step 3. Add space widget
<android.support.v4.widget.Spaceandroid:id=”@+id/marginSpacer_beforeMessage”android:layout_width=”10dp”android:layout_height=”10dp”android:layout_marginEnd=”5dp”app:layout_constraintBottom_toBottomOf=”parent”app:layout_constraintEnd_toEndOf=”parent” />
Change TextView constraints. We need to properly align tail to message text body.
app:layout_constraintEnd_toStartOf=”@+id/marginSpacer_beforeMessage”Step 4. Add tail
Download this picture to your drawable folder. Make new ImageView with this picture
<ImageViewandroid:id=”@+id/message_tail”android:layout_width=”14dp”android:layout_height=”13dp”android:layout_marginEnd=”3dp”android:src=”@drawable/tail”app:layout_constraintBottom_toBottomOf=”parent”app:layout_constraintEnd_toEndOf=”@+id/marginSpacer_beforeMessage” />
We almost got it. However, we need to fill gap between tail and message body

So, lets add another ImageView, that will fill gap with this picture
<ImageViewandroid:layout_width=”10dp”android:layout_height=”10dp”android:src=”@drawable/green_square”app:layout_constraintBottom_toBottomOf=”parent”app:layout_constraintEnd_toStartOf=”@+id/message_tail”/>

Step 5. Add time and check marks
Add time TextView:
<TextViewandroid:id=”@+id/text_message_time”android:layout_width=”wrap_content”android:layout_height=”wrap_content”android:layout_marginBottom=”3dp”android:layout_marginEnd=”22dp”android:maxLines=”1"android:text=”14:42"android:textSize=”12sp”app:layout_constraintBottom_toBottomOf=”parent”app:layout_constraintEnd_toEndOf=”@+id/text_message_body” />
Add check mark to ImageView:
<ImageViewandroid:layout_width=”15dp”android:layout_height=”15dp”android:layout_marginBottom=”2dp”android:layout_marginEnd=”4dp”android:src=”@drawable/ic_check”app:layout_constraintBottom_toBottomOf=”parent”app:layout_constraintEnd_toEndOf=”@+id/text_message_body” />

Final code of item_message.xml
You can download whole project from this repository
