In the below example I have created a simple chat app . Here first I have added ListView , TextView , EditText and Button in activity_main.xml layout. After then I have created two new layout left.xml and right.xml , In both layout I have added RelativeLayout , LinearLayout and TextView. In LinearLayout I have added background image. After then see programming part I have created two class ChatData and ChatAdapter and In MainActivity I have used Toast function. You can see below program it will clearly describe you how to design chat app in android.
Step(1)activity.main.xml-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9">
<ListView
android:id="@+id/list_msg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="@dimen/activity_horizontal_margin"
android:divider="@null"
android:listSelector="@android:color/transparent"
android:transcriptMode="alwaysScroll" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:orientation="horizontal">
<EditText
android:id="@+id/msg_type"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.7"
android:hint="Input message" />
<Button
android:id="@+id/btn_chat_send"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:background="@color/background_floating_material_dark"
android:text="Send"
android:textColor="@color/background_material_light" />
</LinearLayout>
</LinearLayout>
Step(2)-Created left.xml layout-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="@drawable/left"
android:orientation="vertical"
android:paddingBottom="10dp">
<TextView
android:id="@+id/txt_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="100dp"
android:padding="5dp"
android:textColor="@android:color/holo_red_dark" />
</LinearLayout>
</RelativeLayout>
Step(3)-Created right.xml layout-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="@drawable/right"
android:orientation="vertical"
android:paddingBottom="10dp">
<TextView
android:id="@+id/txt_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="100dp"
android:padding="5dp"
android:textColor="@android:color/holo_green_dark" />
</LinearLayout>
</RelativeLayout>
Step(4)-ChatData class-
public class ChatData {
private String content;
private boolean isMine;
public ChatData(String content,boolean isMine){
this.content =content;
this.isMine=isMine;
}
public String getContent(){
return content;
}
public boolean isMine(){
return isMine;
}
}
Step(5)-ChatAdapter class-
public class ChatAdapter extends ArrayAdapter<ChatData> {
private Activity activity;
private List<ChatData> messages;
public ChatAdapter(Activity context, int resource, List<ChatData> objects) {
super(context, resource, objects);
this.activity = context;
this.messages = objects;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
int layoutResource = 0; // determined by view type
ChatData chatData = getItem(position);
int viewType = getItemViewType(position);
if (chatData.isMine()) {
layoutResource = R.layout.left;
} else {
layoutResource = R.layout.right;
}
if (convertView != null) {
holder = (ViewHolder) convertView.getTag();
} else {
convertView = inflater.inflate(layoutResource, parent, false);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
}
//set message content
holder.msg.setText(chatData.getContent());
return convertView;
}
@Override
public int getViewTypeCount() {
// return the total number of view types. this value should never change
// at runtime
return 2;
}
@Override
public int getItemViewType(int position) {
// return a value between 0 and (getViewTypeCount - 1)
return position % 2;
}
private class ViewHolder {
private TextView msg;
public ViewHolder(View v) {
msg = (TextView) v.findViewById(R.id.txt_msg);
}
}
}
Step(6)-MainActivity-
public class MainActivity extends AppCompatActivity {
private ListView listView;
private View btnSend;
private EditText editText;
boolean isMine =true;
private List<ChatData>chatDatas;
private ArrayAdapter<ChatData>adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chatDatas=new ArrayList<>();
listView =(ListView)findViewById(R.id.list_msg);
btnSend =findViewById(R.id.btn_chat_send);
editText=(EditText)findViewById(R.id.msg_type);
adapter = new ChatAdapter(this, R.layout.left,chatDatas);
listView.setAdapter(adapter);
btnSend.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(editText.getText().toString().trim().equals("")){
Toast.makeText(MainActivity.this,"please input text..",Toast.LENGTH_SHORT).show();
}else {
ChatData chatData = new ChatData(editText.getText().toString(),isMine);
chatDatas.add(chatData);
adapter.notifyDataSetChanged();
editText.setText("");
if (isMine) {
isMine = false;
} else {
isMine = true;
}
}
}
});
}
}
0 Comment(s)