Android Chat Bubble tutorial

In this post we will discus about how to create a simple android chat application graphical user interface and how the data is displayed in it.  

Before going to create this application, you need to know about the 9 patch images. A 9 patch image is a normal png image with 1 dp pixels extra wide border.  In a chat application you can notice that the length and width of the chat bubble (image displayed at the background of the chat message) is automatically stretched based on its contents like shown below. Such type of an image is called a 9 patch image. You can save the 9 patch images in the drawable folder of your application with file extension .9.png.
Ads by Google

---

---

You have a lot of on-line tools are available to make 9 patch images and of-course you can use Photoshop to create your own 9 patch image. You can also use the draw9patch tool available with the android sdk. You can find this tool in the tools folder of your android sdk.
Watch video How to create 9 patch images. 

Here in this application we use a list view with a text view on it for display the message and we set a 9 patch image as the textview background. 

MainActvity.java

 public class MainActivity extends Activity {  
      ListView listview;  
      EditText chat_text;  
      Button SEND;  
      boolean position = false;  
      ChatAdapter adapter;  
      Context ctx = this;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     listview = (ListView) findViewById(R.id.chat_list_view);  
     chat_text = (EditText) findViewById(R.id.chatTxt);  
     SEND = (Button) findViewById(R.id.send_button);  
     adapter = new ChatAdapter(ctx,R.layout.single_message_layout);  
     listview.setAdapter(adapter);  
     listview.setTranscriptMode(AbsListView.TRANSCRIPT_MODE_ALWAYS_SCROLL);  
     adapter.registerDataSetObserver(new DataSetObserver() {  
           @Override  
           public void onChanged() {  
                super.onChanged();  
                listview.setSelection(adapter.getCount()-1);  
           }  
     });  
     SEND.setOnClickListener(new OnClickListener() {  
                @Override  
                public void onClick(View v) {  
                     adapter.add(new DataProvider(position, chat_text.getText().toString()));  
                     position = !position;  
                     chat_text.setText("");  
                }  
           });  
   }  
 }  

ChatAdapter.java

 public class ChatAdapter extends ArrayAdapter<DataProvider>{  
      private List<DataProvider> chat_list = new ArrayList<DataProvider> ();  
      private TextView CHAT_TXT;  
      Context CTX;  
      public ChatAdapter(Context context, int resource) {  
           super(context, resource);  
           CTX = context;  
           // TODO Auto-generated constructor stub  
      }  
      @Override  
      public void add(DataProvider object) {  
           // TODO Auto-generated method stub  
           chat_list.add(object);  
           super.add(object);  
      }  
      @Override  
      public int getCount() {  
           // TODO Auto-generated method stub  
           return chat_list.size();  
      }  
      @Override  
      public DataProvider getItem(int position) {  
           // TODO Auto-generated method stub  
           return chat_list.get(position);  
      }  
      @Override  
      public View getView(int position, View convertView, ViewGroup parent) {  
           if(convertView == null)  
           {  
                LayoutInflater inflator = (LayoutInflater) CTX.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
             convertView = inflator.inflate(R.layout.single_message_layout,parent,false);  
           }  
           CHAT_TXT = (TextView) convertView.findViewById(R.id.singleMessage);  
           String Message;  
           boolean POSITION;  
           DataProvider provider = getItem(position);  
           Message = provider.message;  
           POSITION = provider.position;  
           CHAT_TXT.setText(Message);  
           CHAT_TXT.setBackgroundResource(POSITION ? R.drawable.left : R.drawable.right);  
           LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,  
                     LayoutParams.WRAP_CONTENT);  
           if(!POSITION)  
           {  
                params.gravity = Gravity.RIGHT;  
           }  
           else  
           {  
                params.gravity = Gravity.LEFT;  
           }  
           CHAT_TXT.setLayoutParams(params);  
           return convertView;  
      }  
 }  

DataProvider.java

 public class DataProvider {  
      public boolean position;  
      public String message;  
      public DataProvider(boolean position, String message) {  
           super();  
           this.position = position;  
           this.message = message;  
      }  
 }  

activity_main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent"  
   android:orientation="vertical"  
   android:background="@drawable/list_background"  
   >  
 <ListView  
     android:id="@+id/chat_list_view"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:layout_marginBottom="80dp">  
   </ListView>  
 <RelativeLayout   
     android:id="@+id/chat_form"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_alignParentBottom="true"  
     android:layout_alignParentLeft="true"  
     android:orientation="vertical"   
     >  
     <EditText  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:inputType="textMultiLine"  
       android:ems="10"  
       android:id="@+id/chatTxt"  
       android:layout_alignParentBottom="true"  
       android:layout_alignParentLeft="true"  
       android:layout_alignParentStart="true"  
       android:layout_toLeftOf="@+id/send_button" />  
      <Button  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:text="Send"  
       android:id="@+id/send_button"  
       android:layout_alignBottom="@+id/chatTxt"  
       android:layout_alignParentRight="true"  
       android:layout_alignParentEnd="true" />  
   </RelativeLayout>  
 </RelativeLayout>  

single_message_layout.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="wrap_content"  
   android:orientation="vertical">  
   <TextView  
       android:id="@+id/singleMessage"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_margin="5dip"  
       android:paddingLeft="10dip"  
       android:textColor="@android:color/primary_text_light"  
       android:background="@drawable/left"  
       android:text="hello worldvfvdfvdfvdfv"  
       />  
 </LinearLayout>  

Watch video of this topic
Download this Project