How to make message bubble in Android using XML

Kyrylo Avramenko
Sep 6, 2018 · 3 min read

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

Example of Telegram sent message

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

Result of Step 1

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

How message look from activity_main.xml file.

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”
Result after applying layout_constrainedWidth

Add more margin to start

Result after layout_marginStart

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

Message bubble with gap between message body and tail

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”/>
Proper message bubble with text and 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 result!

Final code of item_message.xml

You can download whole project from this repository

Kyrylo Avramenko

Written by

I’m software engineer with gamedev background

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade