create a chatView layout in android

Question

I'm creating a chat application and I'm thinking on ways to create the actual chat view.

I already have the layout for the chat window itself but I was thinking about how to implement the chat messages.

I was thinking of creating a TableLayout and each row will be the users image and the chat message (or bubble or what not).

Does anyone have an idea on how to design and create these rows?

this is what I did up to now:

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

    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:stretchColumns="1" >

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <!-- insert chat message here !-->

            </TableRow>

            <View
                android:layout_height="2dip"
                android:background="#000" />

            <TableRow
                android:id="@+id/tableRow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                 <!-- next chat message --!>

            </TableRow>
        </TableLayout>
    </ScrollView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="9"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/chatLine"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="Say:"
            android:imeOptions="actionSend"
            android:singleLine="true" />
    </LinearLayout>

</LinearLayout>

---

and I'm trying to achieve a this look

Solution 1

How about below code -

Main.xml

<LinearLayout android:id="@+id/list_layout"
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
    android:background="@drawable/background"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ListView android:id="@+id/myList" 
        android:layout_height="fill_parent"
        android:layout_width="wrap_content"/>

</LinearLayout>

list_row_layout_even.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/even_container"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">

    <ImageView android:id="@+id/user_img"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_marginTop="80dip"
        android:src="@drawable/sample_image"/>

    <ImageView android:id="@+id/even_bubble"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_margin="5dip"
        android:src="@drawable/even"/>

    <TextView android:id="@+id/text" 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:textColor="#000000" 
        android:textSize="16dip"
        android:layout_marginRight="8dip"
        android:layout_marginLeft="120dip"
        android:layout_marginTop="10dip" />

</RelativeLayout>

list_row_layout_odd.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/even_container"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">

    <ImageView android:id="@+id/user_img"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_marginTop="80dip"
        android:layout_alignParentRight="true"
        android:src="@drawable/sample_image"/>

    <ImageView android:id="@+id/odd_bubble"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_margin="5dip"
        android:src="@drawable/odd"/>

    <TextView android:id="@+id/text" 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentLeft="true"
        android:textColor="#ffffff" 
        android:textSize="16dip"
        android:layout_marginRight="120dip"
        android:layout_marginLeft="8dip"
        android:layout_marginTop="10dip" />

</RelativeLayout>

This is my output -

Just Customize this example with your needs.

Solution 2

Instead of TableLayout, i would suggest you to create Custom adapter for ListView. You just need to check the condition to change the background of layout/views inside getViews() method.

Some thread may be helpful to you:

1. Android: ListView style like text messages conversations
2. Android Implementing Chat Bubble in ListView

Solution 3

list_item_message_left.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingRight="10dp"
android:paddingTop="5dp" >

<TextView
    android:id="@+id/lblMsgFrom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:textColor="#777777"
    android:textSize="12dp"
    android:textStyle="italic" />

<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/txtMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_msg_from"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:textColor="#ff717171"
        android:textSize="16dp"

        android:layout_toRightOf="@+id/textView27"
        android:layout_marginRight="50dp" />

    <TextView
        android:id="@+id/textView27"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/triangle_msg_from"
        android:paddingRight="10dp"
        android:textColor="#ffffff"
        android:textSize="16dp"
        android:paddingLeft="10dp"
        android:paddingTop="2dp"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="3dp" />

</RelativeLayout>

</LinearLayout>

list_item_message_right.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingRight="10dp"
android:paddingTop="5dp" >

<TextView
    android:id="@+id/lblMsgFrom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:textColor="#777777"
    android:textSize="12dp"
    android:textStyle="italic" />

<RelativeLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/txtMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_msg_you"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:textColor="#ffffff"
        android:textSize="16dp"

        android:layout_toLeftOf="@+id/textView27"
        android:layout_marginLeft="50dp" />

    <TextView
        android:id="@+id/textView27"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/triangle_msg_you"
         android:paddingRight="10dp"
        android:textColor="#ffffff"
        android:textSize="16dp"
        android:paddingLeft="10dp"
        android:paddingTop="2dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="3dp" />

</RelativeLayout>

</LinearLayout>

bg_msg_from.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
    <shape
        android:shape="rectangle" >

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

        <corners android:radius="5dp" >
        </corners>
    </shape>
</item>
<item>
    <shape
        android:shape="rectangle" >

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

        <corners android:radius="5dp" >
        </corners>
    </shape>
</item>
</selector>

bg_msg_you.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape
    android:shape="rectangle" >

    <solid android:color="#007AE5" >
    </solid>

    <corners android:radius="5dp" >
    </corners>
</shape>
</item>
<item>
<shape
    android:shape="rectangle" >

    <solid android:color="#0084FF" >
    </solid>

    <corners android:radius="5dp" >
    </corners>
</shape>
</item>
</selector>

triangle_msg_from.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item  android:state_pressed="true" >
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="87%"
        android:pivotY="140%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#C0C0C0" android:width="10dp"/>
               </shape>
    </rotate>

  </item>
  <item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="87%"
        android:pivotY="140%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#D8D8D8" android:width="10dp"/>

        </shape>
    </rotate>
  </item>
  </layer-list>

triangle_msg_you.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <item  android:state_pressed="true" >
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="13%"
        android:pivotY="-40%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#007AE5" android:width="10dp"/>
               </shape>
    </rotate>

  </item>
  <item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="13%"
        android:pivotY="-40%" >
        <shape
            android:shape="rectangle" >
            <stroke android:color="#0084FF" android:width="10dp"/>

        </shape>
    </rotate>
  </item>
  </layer-list>

messageListAdapter.java

    package eddine.charef.mechalikh....;
    import java.util.List;
    import android.annotation.SuppressLint;
    import android.app.Activity;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.TextView;

    public class MessagesListAdapter extends BaseAdapter {

    private Context context;
    private List<Msg> messagesItems;

    public MessagesListAdapter(Context context, List<Msg> navDrawerItems) {
        this.context = context;
        this.messagesItems = navDrawerItems;
    }

   @Override
public int getCount() {
    return messagesItems.size();
}

@Override
public Msg getItem(int position) {
    return messagesItems.get(position);
}

@Override
public long getItemId(int position) {
    return position;
}

@SuppressLint("InflateParams")
@Override
public View getView(int position, View convertView, ViewGroup parent) {

    Msg m = messagesItems.get(position);

    LayoutInflater mInflater = (LayoutInflater) context
            .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

    if (messagesItems.get(position).getleMien()) {
        convertView = mInflater.inflate(R.layout.list_item_message_right,
                null);
    } else {
        convertView = mInflater.inflate(R.layout.list_item_message_left,
                null);
    }

    TextView lblFrom = (TextView)    convertView.findViewById(R.id.lblMsgFrom);
    TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg);
    txtMsg.setText(m.getMessage()+"\n"+m.getAttach());
    lblFrom.setText(m.getDate()+" - "+m.getHeure());

    return convertView;
}
}

Msg.java

package eddine.charef.mechalikh....;
public class Msg {
private String email, message;
private boolean leMien;
private String attach;
private String cle;
private  String teleAttach;
private  String heure;
private  String date;

public Msg(String cle,String email, String message,String attach,boolean leMien,String teleAttach,String heure,String date) {
    this.email = email;
    this.message = message;
    this.leMien = leMien;
    this.attach = attach;
    this.cle=cle;
    this.teleAttach = teleAttach;
    this.heure = heure;
    this.date=date;
}

public String getEmail() {
    return email;
}

public void setEmail(String email) {
    this.email = email;
}

public String getMessage() {
    return message;
}

public void setMessage(String message) {
    this.message = message;
}

public boolean getleMien() {
    return leMien;
}

public void setleMien(boolean leMien) {
    this.leMien = leMien;
}
public String getAttach() {
    return attach ;
}

public void setAttach(String attach) {
    this.attach = attach;
}
public String getCle() {
    return cle ;
}

public void setCle(String cle) {
    this.cle = cle;
}


public void setTeleAttach(String teleAttach) {
    this.teleAttach = teleAttach;
}
public String getTeleAttach() {
    return teleAttach ;
}

public void setHeure(String heure) {
    this.heure = heure;
}
public String getHeure() {
    return heure ;
}
public String getDate() {
    return date ;
}

public void setDate(String date) {
    this.date = date;
}

}

use it like this, in your activity

    ListView listMsg; 
    ArrayList<Msg> listMessages;
    MessagesListAdapter adapter;
    listMessages = new ArrayList<Msg>();

    listMessages.add(new Msg(cle,email,message,attach....));
    adapter = new MessagesListAdapter(this, listMessages);
    listMsg.setAdapter(adapter);

Based on this http://www.androidhive.info/2014/10/android-building-group-chat-app-using-sockets-part-1/

screenshot

Solution 4

I have created a library for creating chat list, this might help

https://github.com/himanshu-soni/ChatMessageView

View more solutions

Comments

[T.Coutlakis]

Warning: First link has severe popups. Be careful.

[Praveenkumar]

@LonelyCoder i think now it would be enough!

[Praveenkumar]

@Jan1337z You too. Check the modified link.

[jamdownian]

Hello, the link is down, can you re-upload please.

[Praveenkumar]

@LonelyCoder jan1337z Please provide the file. I don't have it right now.

[jamdownian]

I found a link that may prove very helpful. warting.github.io/AndroidChatBubbles

[Manoj Perumarath]

first link is broken

[Paresh Mayani]

@ManojFrekzz removed broken link! Thanks