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

Answer 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.