Chat message box as wide as text content

Question

So i want to have chat message container as wide as the message is. I want to achieve something really similiar to this kind of chat message: http://img.creativemark.co.uk/uploads/images/805/15805/img3File.png

Here is my layout, with which i am struggling:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/single_message_view"
android:layout_margin="5dp">

<LinearLayout
    android:layout_marginEnd="15dp"
    android:layout_marginStart="15dp"
    android:layout_alignParentEnd="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="100dp"
    android:orientation="vertical">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="author"
            android:id="@+id/sender_data"
            android:layout_marginEnd="5dp"
            android:textColor="@color/colorWhite" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:textAlignment="textEnd"
            android:layout_height="wrap_content"
            android:text="date"
            android:textColor="@color/colorWhite"
            android:id="@+id/send_date" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/message_content"
        android:background="@drawable/msg_haze"
        >

        <TextView
            android:layout_margin="10dp"
            android:layout_alignParentTop="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/colorWhite"
            android:id="@+id/message_text"
            android:text="content" />

        <LinearLayout
            android:layout_margin="10dp"
            android:minWidth="100dp"
            android:layout_below="@id/message_text"
            android:id="@+id/tags_container"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <android.support.v7.widget.RecyclerView
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:id="@+id/message_tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layoutManager="LinearLayoutManager"
                tools:listitem="@layout/item_tag" />
        </LinearLayout>

        <ImageView
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="10dp"
            android:paddingBottom="10dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:id="@+id/message_state" />

        <LinearLayout
            android:id="@+id/attachment_holder"
            android:layout_marginTop="10dp"
            android:padding="5dp"
            android:visibility="gone"
            android:orientation="vertical"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/attachments_haze">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/attachments"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layoutManager="GridLayoutManager"/>

            <ImageView
                android:id="@+id/attachment"
                android:visibility="gone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </RelativeLayout>
</LinearLayout>

score 2 · Answer 1 · answered Feb 02 '17 at 13:51

2

To display the chat Message you need to use 9 patch images that allows you to create bitmap images that automatically resize to accommodate the contents of the view

answered Feb 02 '17 at 13:51

Basavannevva

304
1
6

score 1 · Answer 2 · answered Feb 02 '17 at 14:00

1

Usually for this type of chat bubble we need to use the nine patch image. This nine patch image can re-size according to content inside.

Below are nine patch image for send and receive message.

Save this image as .9.png extension. Use this image to give background.

answered Feb 02 '17 at 14:00

Shabbir Dhangot

8,954
10
58
80

i think, this wont be necessary for this particular question as if you can open the image reference in the question, there is a simple square box enclosure with flat color which can be obtained using a drawable itself. No need for a 9 patch image. Just set the layout logically using a color drawable for background purpose. Posting the whole layout in a while. – Mit Feb 02 '17 at 14:03
Yeah that is also possible. but that is only reference. Most of (not all) chat bubbles are made of the nine patch image. – Shabbir Dhangot Feb 02 '17 at 14:07
yes, you are absolutely right, that is y i mentioned "this wont be necessary for this particular problem" – Mit Feb 02 '17 at 14:13
@Mit I don't know exactly what do you mean by this. Can you provide the code implementation? – wegtis Feb 02 '17 at 14:19
yes buddy, i am posting the same in a while, and i am just telling you are absolutely right, most of the chat bubble need 9 patch image, but for this particular question it is not necessary, that is what i am trying to tell – Mit Feb 02 '17 at 14:21

score 0 · Answer 3 · answered Feb 02 '17 at 14:02

0

agree with @basavannevva .. 9 patch image automatically stretches .. you have to provide its content area and stretch area. there are plenty of online tools that can create a 9 patch image. and i think even android studio can edit 9 patch file.

answered Feb 02 '17 at 14:02

Usman Ghauri

931
1
7
26

score 0 · Answer 4 · answered Feb 02 '17 at 14:42

temp_black.xml (This will be used as a background of the chat box, you can change the color in the below file to #FFFFFF to get the desired output)

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#000000"/>

    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip" />

</shape>

temp_white.xml (This is the black dot between the Name of Sender and Time, i know in the image the color is black, but for reference purpose i have made this, you cant just edit the color in below xml to get the output of your choice)

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FFFFFF"/>

    <corners android:radius="100dip" />

    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip" />

</shape>

temp.xml (The layout file)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center_vertical"
        android:layout_margin="10dp"
        android:background="@drawable/temp_black"
        android:paddingRight="10dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:adjustViewBounds="true"
            android:src="@mipmap/ic_launcher"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical"
                android:text="Sample Text Sample Text"
                android:textSize="16sp"
                android:textColor="#FFFFFF"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="left|center_vertical"
                android:layout_marginTop="5dp"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left|center_vertical"
                    android:text="Name"
                    android:textSize="11sp"
                    android:textColor="#FFFFFF"/>

                <ImageView
                    android:layout_width="5dp"
                    android:layout_height="5dp"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:adjustViewBounds="true"
                    android:src="@drawable/temp_white"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left|center_vertical"
                    android:text="Time"
                    android:textSize="11sp"
                    android:textColor="#FFFFFF"/>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Finally the output image

just change the layout gravity to right|center_vertical for displaying the chat box on other side, if required, do let me know, i can provide you with both sides included — Mit, Feb 02 '17 at 14:44

Chat message box as wide as text content

4 Answers4