simple chat layout design android


Create an XML file under Layout,

ProgressBar will be show on top of the Activity.

ListView which load with your message.(Continue to read to get how to load it online and offline).

EditText to type the text by the user

Simple button to send it, icon used for send button is below.



find the complete design:

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

    <ProgressBar
        android:id="@+id/pbchat"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:indeterminate="true"

        />
  
  
     <ListView
        android:id="@+id/listmsg"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="80dp"
        android:stackFromBottom="true"
         />

  
    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="20dp">

      
      
        <EditText
            android:id="@+id/messageEdit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_toLeftOf="@+id/chatSendButton"
            android:autoText="true"
            android:inputType="text"
            android:maxLines="5"
            android:maxLength="1000"
            android:minLines="3"
            android:hint="type message" />

        <Button
            android:id="@+id/chatSendButton"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/ic_menu_sending"
            android:text=""
            />
</RelativeLayout>



</RelativeLayout>

Comments