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)