Add ChatView

.gitignore

@@ -6,3 +6,7 @@
 .DS_Store
 /build
 /captures
+libs/
+chatmessageview/libs/
+example/libs/
+example/src/main/res/drawable/

README.md

@@ -2,7 +2,7 @@
 
 This library aims to provide an chat UI view for Android.  
 
-<img src="https://github.com/bassaer/ChatMessageView/blob/master/Screenshot.png" width="540dp">
+<img src="https://github.com/bassaer/ChatMessageView/blob/master/Screenshot.png" width="270dp">
 
 
 ##Feature

chatmessageview/src/main/java/jp/bassaer/chatmessageview/ChatView.java

@@ -1,28 +1,116 @@
 package jp.bassaer.chatmessageview;
 
 import android.content.Context;
+import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
+import android.text.Editable;
+import android.text.TextWatcher;
 import android.util.AttributeSet;
-import android.widget.ListView;
+import android.view.View;
+import android.widget.EditText;
+import android.widget.ImageButton;
+import android.widget.LinearLayout;
+
+import java.util.ArrayList;
+import java.util.Calendar;
 
 /**
  * Created by nakayama on 2016/08/08.
  */
-public class ChatView extends ListView {
-
+public class ChatView extends LinearLayout {
+    private MessageView mMessageView;
+    private EditText mInputText;
+    private ImageButton mSendButton;
 
-    public ChatView(Context context) {
-        super(context);
-    }
+    private String mUserName;
+    private Bitmap mUserIcon;
 
 
     public ChatView(Context context, AttributeSet attrs) {
         super(context, attrs);
+        init(context);
     }
 
     public ChatView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
+        init(context);
     }
 
+    private void init(Context context) {
+        mMessageView = new MessageView(context);
+        mInputText = (EditText)findViewById(R.id.message_edit_text);
+        mSendButton = (ImageButton)findViewById(R.id.send_button);
+
+        setUserName(context.getString(R.string.unknown));
+        setUserIcon(BitmapFactory.decodeResource(context.getResources(), R.drawable.face_1));
+
+        mSendButton.setOnClickListener(new OnClickListener() {
+            @Override
+            public void onClick(View view) {
+                Message message = new Message.Builder()
+                        .setRightMessage(true)
+                        .setUserName(getUserName())
+                        .setUserIcon(getUserIcon())
+                        .setMessageText(mInputText.getText().toString())
+                        .setDateCell(false)
+                        .setCreatedAt(Calendar.getInstance())
+                        .build();
+
+                send(message);
+                mInputText.setText("");
+            }
+        });
+
+        mInputText.addTextChangedListener(new TextWatcher() {
+            @Override
+            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
 
+            }
 
+            @Override
+            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
+
+            }
+
+            @Override
+            public void afterTextChanged(Editable editable) {
+                String input = editable.toString();
+
+                //Cannot send when input is empty
+                if (input.length() == 0) {
+                    mSendButton.setEnabled(false);
+                } else {
+                    mSendButton.setEnabled(true);
+                }
+            }
+        });
+    }
+
+    public void send(Message message) {
+        mMessageView.setMessage(message);
+    }
+
+    public void receive(Message message) {
+        mMessageView.setMessage(message);
+    }
+
+    public void setMessages(ArrayList<Message> list) {
+        mMessageView.setMessageList(list);
+    }
+
+    public Bitmap getUserIcon() {
+        return mUserIcon;
+    }
+
+    public void setUserIcon(Bitmap userIcon) {
+        mUserIcon = userIcon;
+    }
+
+    public String getUserName() {
+        return mUserName;
+    }
+
+    public void setUserName(String userName) {
+        mUserName = userName;
+    }
 }

chatmessageview/src/main/java/jp/bassaer/chatmessageview/Message.java

@@ -31,6 +31,49 @@ public Message() {
         initDate();
     }
 
+    public static class Builder {
+        private Message message;
+
+        public Builder() {
+            message = new Message();
+        }
+
+        public Builder setUserName(String userName) {
+            message.setUserName(userName);
+            return this;
+        }
+
+        public Builder setUserIcon(Bitmap icon) {
+            message.setUserIcon(icon);
+            return this;
+        }
+
+        public Builder setRightMessage(boolean isRight) {
+            message.setRightMessage(isRight);
+            return this;
+        }
+
+        public Builder setMessageText(String messageText) {
+            message.setMessageText(messageText);
+            return this;
+        }
+
+        public Builder setCreatedAt(Calendar calendar) {
+            message.setCreatedDate(calendar);
+            return this;
+        }
+
+        public Builder setDateCell(boolean isDateCell) {
+            message.setDateCell(isDateCell);
+            return this;
+        }
+
+        public Message build() {
+            return message;
+        }
+
+    }
+
     public void initDate(){
 
         SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy/MM/dd");

chatmessageview/src/main/java/jp/bassaer/chatmessageview/MessageAdapter.java

@@ -24,6 +24,7 @@ public MessageAdapter(Context context, int resource, List<Message> objects) {
 
     @Override
     public View getView(int position, View convertView, ViewGroup parent) {
+        final ViewHolder holder;
         Message message = getItem(position);
 
         if (!message.isDateCell()) {
@@ -33,31 +34,37 @@ public View getView(int position, View convertView, ViewGroup parent) {
                 } else {
                     convertView = mLayoutInflater.inflate(R.layout.message_view_left, null);
                 }
+                holder = new ViewHolder();
+                convertView.setTag(holder);
+            } else {
+                holder = (ViewHolder) convertView.getTag();
             }
 
-            ImageView icon;
-            TextView messageText;
-            TextView timeText;
+
 
             if (message.isRightMessage()) {
-                icon = (ImageView)convertView.findViewById(R.id.right_user_icon);
-                messageText = (TextView)convertView.findViewById(R.id.right_message_text);
-                timeText = (TextView)convertView.findViewById(R.id.right_time_display_text);
+                holder.icon = (ImageView)convertView.findViewById(R.id.right_user_icon);
+                holder.messageText = (TextView)convertView.findViewById(R.id.right_message_text);
+                holder.timeText = (TextView)convertView.findViewById(R.id.right_time_display_text);
             } else {
-                icon = (ImageView)convertView.findViewById(R.id.left_user_icon);
-                messageText = (TextView)convertView.findViewById(R.id.left_message_text);
-                timeText = (TextView)convertView.findViewById(R.id.left_time_display_text);
+                holder.icon = (ImageView)convertView.findViewById(R.id.left_user_icon);
+                holder.messageText = (TextView)convertView.findViewById(R.id.left_message_text);
+                holder.timeText = (TextView)convertView.findViewById(R.id.left_time_display_text);
             }
 
-            icon.setImageBitmap(message.getUserIcon());
-            messageText.setText(message.getMessageText());
-            timeText.setText(message.getTimeText());
+            holder.icon.setImageBitmap(message.getUserIcon());
+            holder.messageText.setText(message.getMessageText());
+            holder.timeText.setText(message.getTimeText());
         } else {
             if (convertView == null) {
                 convertView = mLayoutInflater.inflate(R.layout.date_cell, null);
+                holder = new ViewHolder();
+                convertView.setTag(holder);
+            } else {
+                holder = (ViewHolder) convertView.getTag();
             }
-            TextView dateSeparatorText = (TextView)convertView.findViewById(R.id.date_separate_text);
-            dateSeparatorText.setText(message.getDateSeparateText());
+            holder.dateSeparatorText = (TextView)convertView.findViewById(R.id.date_separate_text);
+            holder.dateSeparatorText.setText(message.getDateSeparateText());
         }
 
         return convertView;
@@ -67,4 +74,11 @@ public View getView(int position, View convertView, ViewGroup parent) {
     public boolean isEnabled(int position){
         return false;
     }
+
+    class ViewHolder {
+        ImageView icon;
+        TextView messageText;
+        TextView timeText;
+        TextView dateSeparatorText;
+    }
 }

chatmessageview/src/main/java/jp/bassaer/chatmessageview/MessageView.java

@@ -14,9 +14,9 @@ public class MessageView extends ListView {
 
     private List<Message> mMessageList;
 
-    public MessageView(Context context, ArrayList<Message> messages) {
+    public MessageView(Context context) {
         super(context);
-        init(messages);
+        init();
     }
 
 
@@ -29,21 +29,17 @@ public MessageView(Context context, AttributeSet attrs, int defStyleAttr) {
     }
 
 
-    public void init(ArrayList<Message> list) {
+    public void init() {
         mMessageList = new ArrayList<>();
         setChoiceMode(ListView.CHOICE_MODE_NONE);
 
-        for(int i=0; i < list.size(); i++){
-            setMessage(list.get(i));
-        }
-
         MessageAdapter adapter = new MessageAdapter(getContext(), 0, mMessageList);
         setDividerHeight(0);
         setAdapter(adapter);
 
     }
 
-    private void setMessage(Message message){
+    public void setMessage(Message message){
         if(mMessageList.size() == 0){
             setDateSeparator(message);
         }else{

chatmessageview/src/main/res/drawable/message_text_shape_left.xml

@@ -3,7 +3,7 @@
     <item>
         <shape android:shape="rectangle">
             <corners
-                android:radius="@dimen/message_text_radius"/>
+                android:radius="@dimen/view_radius_normal"/>
             <solid
                 android:color="@color/button_material_light"
                 />

chatmessageview/src/main/res/drawable/message_text_shape_right.xml

@@ -3,9 +3,9 @@
     <item>
         <shape android:shape="rectangle">
             <corners
-                android:radius="@dimen/message_text_radius"/>
+                android:radius="@dimen/view_radius_normal"/>
             <solid
-                android:color="#4CAF50" />
+                android:color="@color/green500" />
         </shape>
     </item>
 </selector>

chatmessageview/src/main/res/layout/chat_view.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+              android:orientation="vertical"
+              android:layout_width="match_parent"
+              android:layout_height="match_parent">
+
+    <jp.bassaer.chatmessageview.MessageView
+        android:id="@+id/message_view"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_weight="1"/>
+
+    <LinearLayout
+        android:orientation="horizontal"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/icon_normal"
+        android:background="@color/blueGray50"
+        >
+
+        <EditText
+            android:id="@+id/message_edit_text"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:hint="@string/input_hint"
+            android:layout_weight="1"/>
+
+        <ImageButton
+            android:id="@+id/send_button"
+            android:layout_width="@dimen/icon_normal"
+            android:layout_height="@dimen/icon_normal"
+            android:src="@drawable/ic_action_send"
+            android:tint="@color/lightBlue500"
+            android:background="@android:color/transparent"
+            />
+
+    </LinearLayout>
+
+</LinearLayout>

chatmessageview/src/main/res/layout/date_cell.xml

@@ -7,21 +7,21 @@
 
     <View
         android:background="@android:color/darker_gray"
-        android:layout_width="@dimen/date_text_side_bar_width"
-        android:layout_height="@dimen/data_text_side_bar_height"/>
+        android:layout_width="@dimen/width_small"
+        android:layout_height="@dimen/line_height"/>
 
     <TextView
         android:id="@+id/date_separate_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:gravity="center"
-        android:textSize="@dimen/date_text_size"
-        android:layout_margin="@dimen/list_item_margin"
-        android:text="@string/test_date_cell_text"/>
+        android:textSize="@dimen/font_small"
+        android:layout_margin="@dimen/spacing_small"
+        android:text="@string/default_date_cell_text"/>
 
     <View
         android:background="@android:color/darker_gray"
-        android:layout_width="@dimen/date_text_side_bar_width"
-        android:layout_height="@dimen/data_text_side_bar_height"/>
+        android:layout_width="@dimen/width_small"
+        android:layout_height="@dimen/line_height"/>
 
 </LinearLayout>