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.
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
Download this Project