Chat message view: time and status icon are drawn outside of balloon.

Refactoring of ChatMessageAdapter and layouts.

app/src/main/java/com/xabber/android/ui/adapter/ChatMessageAdapter.java

@@ -19,7 +19,6 @@ import android.text.Spannable;
 import android.text.SpannableStringBuilder;
 import android.text.method.LinkMovementMethod;
 import android.text.style.CharacterStyle;
-import android.text.style.ImageSpan;
 import android.text.style.TextAppearanceSpan;
 import android.view.View;
 import android.view.ViewGroup;
@@ -174,33 +173,21 @@ public class ChatMessageAdapter extends BaseAdapter implements UpdatableAdapter
             view = activity.getLayoutInflater().inflate(layoutId, parent, false);
         }
 
-        final MessageItem messageItem = (MessageItem) getItem(position);
-        final boolean incoming = ((MessageItem) getItem(position)).isIncoming();
-
-        final String resource = messageItem.getResource();
-
-        TextView textView = (TextView) view.findViewById(R.id.text);
-        textView.setTextAppearance(activity, appearanceStyle);
+        return setUpMessageView((MessageItem) getItem(position), view);
+    }
 
-        textView.getBackground().setAlpha(127);
-
-        Spannable text = messageItem.getSpannable();
-        String time = StringUtils.getSmartTimeText(messageItem.getTimestamp());
+    private View setUpMessageView(MessageItem messageItem, View view) {
+        final boolean incoming = messageItem.isIncoming();
 
         ChatAction action = messageItem.getAction();
-
+        Spannable text = messageItem.getSpannable();
         SpannableStringBuilder builder = new SpannableStringBuilder();
+        final String resource = messageItem.getResource();
 
         if (action == null) {
-            int messageIcon = R.drawable.ic_done_white_18dp;
+
             if (!incoming) {
-                if (messageItem.isError()) {
-                    messageIcon = R.drawable.ic_clear_white_18dp;
-                } else if (!messageItem.isSent()) {
-                    messageIcon = R.drawable.ic_redo_white_18dp;
-                } else if (!messageItem.isDelivered()) {
-                    messageIcon = R.drawable.ic_query_builder_white_18dp;
-                }
+                setStatusIcon(messageItem, view);
             }
 
             if (isMUC) {
@@ -228,35 +215,43 @@ public class ChatMessageAdapter extends BaseAdapter implements UpdatableAdapter
             } else {
                 append(builder, text, new TextAppearanceSpan(activity, R.style.ChatRead));
             }
-
-            append(builder, " ", new TextAppearanceSpan(activity, R.style.ChatHeader));
-            append(builder, time, new TextAppearanceSpan(activity, R.style.ChatHeader_Time));
-            append(builder, " ", new TextAppearanceSpan(activity, R.style.ChatHeader));
-            if (!incoming) {
-                ImageSpan imageSpan = new ImageSpan(activity, messageIcon);
-                if (messageIcon == R.drawable.ic_query_builder_white_18dp) {
-                    imageSpan.getDrawable().setAlpha(0);
-                }
-                append(builder, " ", imageSpan);
-            }
         } else {
             text = Emoticons.newSpannable(action.getText(activity, resource, text.toString()));
             Emoticons.getSmiledText(activity.getApplication(), text);
-            append(builder, text, new TextAppearanceSpan(activity, R.style.ChatHeader_Delay));
-            append(builder, " ", new TextAppearanceSpan(activity, R.style.ChatHeader));
-            append(builder, time, new TextAppearanceSpan(activity, R.style.ChatHeader_Time));
         }
 
-
+        TextView textView = (TextView) view.findViewById(R.id.message_text);
+        textView.setTextAppearance(activity, appearanceStyle);
+        textView.getBackground().setAlpha(127);
         textView.setText(builder);
         textView.setMovementMethod(LinkMovementMethod.getInstance());
 
+        String time = StringUtils.getSmartTimeText(messageItem.getTimestamp());
+
+        ((TextView)view.findViewById(R.id.message_time)).setText(time);
+
         if (incoming) {
             setUpAvatar(messageItem, view);
         }
         return view;
     }
 
+    private void setStatusIcon(MessageItem messageItem, View view) {
+        ImageView messageStatusIcon = (ImageView) view.findViewById(R.id.message_status_icon);
+        messageStatusIcon.setVisibility(View.VISIBLE);
+
+        int messageIcon = R.drawable.ic_done_white_18dp;
+        if (messageItem.isError()) {
+            messageIcon = R.drawable.ic_clear_white_18dp;
+        } else if (!messageItem.isSent()) {
+            messageIcon = R.drawable.ic_redo_white_18dp;
+        } else if (!messageItem.isDelivered()) {
+            messageStatusIcon.setVisibility(View.INVISIBLE);
+        }
+
+        messageStatusIcon.setImageResource(messageIcon);
+    }
+
     private void append(SpannableStringBuilder builder, CharSequence text, CharacterStyle span) {
         int start = builder.length();
         builder.append(text);

app/src/main/res/layout/chat_viewer_incoming_message.xml

@@ -17,27 +17,32 @@
     android:id="@+id/chat_message_incoming"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-
-
     >
-
     <ImageView
         android:id="@+id/avatar"
         android:layout_width="32dip"
         android:layout_height="32dip"
-        android:src="@drawable/avatar_1_1"
 
-        android:layout_alignParentBottom="true"
+        android:layout_marginTop="3dp"
+        android:layout_marginLeft="6dp"
+
+        android:layout_alignTop="@+id/message_text"
         android:layout_alignParentLeft="true"
-        android:layout_alignParentStart="true" />
+        android:layout_alignParentStart="true"
+
+        android:src="@drawable/avatar_1_1"
+        />
 
     <TextView
-        android:id="@+id/text"
+        android:id="@+id/message_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
+
         android:layout_toRightOf="@id/avatar"
         android:layout_toEndOf="@id/avatar"
 
+        android:minWidth="142dp"
+
         android:paddingLeft="16dp"
         android:paddingTop="6dp"
         android:paddingBottom="6dp"
@@ -47,16 +52,24 @@
         android:layout_marginRight="48dp"
         android:layout_marginEnd="48dp"
 
-        android:layout_marginTop="4dp"
-        android:layout_marginBottom="4dp"
+        android:background="@drawable/msg_in"
+
+        android:text="Some text\n line \nrgregrere"
+        />
 
+    <TextView
+        android:id="@+id/message_time"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
 
-        android:layout_marginStart="40dp"
-        android:layout_marginLeft="4dp"
+        android:layout_toRightOf="@+id/avatar"
+        android:layout_toEndOf="@+id/avatar"
+        android:layout_below="@id/message_text"
 
-        android:text="Some text\n line \nrgregrere"
+        android:paddingLeft="16dp"
 
-        android:background="@drawable/msg_in"
-        />
+        android:textAppearance="@style/ChatHeader.Time"
 
+        android:text="Feb 19, 2015 4:39 PM"
+        />
 </RelativeLayout>

app/src/main/res/layout/chat_viewer_item.xml

@@ -12,13 +12,12 @@
      You should have received a copy of the GNU General Public License,
      along with this program. If not, see http://www.gnu.org/licenses/.
 -->
-<RelativeLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:padding="4dip"
-    >
+    android:padding="4dip">
     <ListView
         android:id="@android:id/list"
         android:layout_width="match_parent"
@@ -30,6 +29,7 @@
         android:divider="@null"
         android:dividerHeight="0dp"
         android:layout_above="@+id/chat_input"
+        tools:listitem="@layout/chat_viewer_outgoing_message"
         />
 
     <EditText

app/src/main/res/layout/chat_viewer_outgoing_message.xml

@@ -17,11 +17,10 @@
     android:id="@+id/chat_message_incoming"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-
     >
 
     <TextView
-        android:id="@+id/text"
+        android:id="@+id/message_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
 
@@ -34,16 +33,38 @@
         android:layout_marginLeft="48dp"
         android:layout_marginStart="48dp"
 
-        android:layout_marginTop="4dp"
-
-        android:layout_marginEnd="4dp"
-        android:layout_marginRight="4dp"
+        android:minWidth="160dp"
 
         android:text="Some text\n line \nrgregrere"
         android:background="@drawable/msg_out"
-        android:gravity="end"
         android:layout_alignParentTop="true"
         android:layout_alignParentRight="true"
         android:layout_alignParentEnd="true" />
 
+    <TextView
+        android:id="@+id/message_time"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_below="@+id/message_text"
+        android:layout_alignParentRight="true"
+        android:layout_alignParentEnd="true"
+
+        android:paddingRight="16dp"
+        android:paddingEnd="16dp"
+
+        android:textAppearance="@style/ChatHeader.Time"
+
+        android:text="Feb 19, 2015 4:39 PM"
+        />
+
+    <ImageView
+        android:id="@+id/message_status_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignBottom="@+id/message_time"
+        android:layout_toLeftOf="@+id/message_time"
+
+        android:src="@drawable/ic_done_white_18dp"
+        />
+
 </RelativeLayout>