Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to design chat app in android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 859
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: