Layout improvements and emoji handling

Signed-off-by: Mario Danic <mario@lovelyhq.com>

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.java

@@ -29,6 +29,7 @@ import android.view.View;
 import android.widget.TextView;
 
 import com.amulyakhare.textdrawable.TextDrawable;
+import com.google.android.flexbox.FlexboxLayout;
 import com.kevalpatel2106.emoticongifkeyboard.widget.EmoticonTextView;
 import com.nextcloud.talk.R;
 import com.nextcloud.talk.application.NextcloudTalkApplication;
@@ -61,6 +62,9 @@ public class MagicIncomingTextMessageViewHolder
     @BindView(R.id.messageUserAvatar)
     ShapeImageView messageUserAvatarView;
 
+    @BindView(R.id.messageTime)
+    TextView messageTimeView;
+
     @Inject
     UserUtils userUtils;
 
@@ -98,6 +102,7 @@ public class MagicIncomingTextMessageViewHolder
         HashMap<String, HashMap<String, String>> messageParameters = message.getMessageParameters();
 
         Context context = NextcloudTalkApplication.getSharedApplication().getApplicationContext();
+        itemView.setSelected(false);
 
         Spannable messageString = new SpannableString(message.getText());
 
@@ -123,6 +128,9 @@ public class MagicIncomingTextMessageViewHolder
         } else if (EmoticonUtils.isMessageWithSingleEmoticonOnly(context, message.getText())) {
             messageString.setSpan(new RelativeSizeSpan(2.5f), 0, messageString.length(),
                     Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
+            FlexboxLayout.LayoutParams layoutParams = (FlexboxLayout.LayoutParams) messageTimeView.getLayoutParams();
+            layoutParams.setWrapBefore(true);
+            messageTimeView.setLayoutParams(layoutParams);
             itemView.setSelected(true);
         }
 

app/src/main/java/com/nextcloud/talk/adapters/messages/MagicOutcomingTextMessageViewHolder.java

@@ -25,7 +25,9 @@ import android.text.Spannable;
 import android.text.SpannableString;
 import android.text.style.RelativeSizeSpan;
 import android.view.View;
+import android.widget.TextView;
 
+import com.google.android.flexbox.FlexboxLayout;
 import com.kevalpatel2106.emoticongifkeyboard.widget.EmoticonTextView;
 import com.nextcloud.talk.R;
 import com.nextcloud.talk.application.NextcloudTalkApplication;
@@ -49,6 +51,9 @@ public class MagicOutcomingTextMessageViewHolder extends MessageHolders.Outcomin
     @BindView(R.id.messageText)
     EmoticonTextView messageText;
 
+    @BindView(R.id.messageTime)
+    TextView messageTimeView;
+
     @Inject
     UserUtils userUtils;
 
@@ -93,6 +98,10 @@ public class MagicOutcomingTextMessageViewHolder extends MessageHolders.Outcomin
         } else if (EmoticonUtils.isMessageWithSingleEmoticonOnly(context, message.getText())) {
             messageString.setSpan(new RelativeSizeSpan(2.5f), 0, messageString.length(),
                     Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
+            FlexboxLayout.LayoutParams layoutParams = (FlexboxLayout.LayoutParams) messageTimeView.getLayoutParams();
+            layoutParams.setWrapBefore(true);
+            messageTimeView.setLayoutParams(layoutParams);
+            messageTimeView.setTextColor(context.getResources().getColor(R.color.warm_grey_four));
             itemView.setSelected(true);
         }
 

app/src/main/res/drawable/shape_incoming_message.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Nextcloud Talk application
+  ~
+  ~ @author Mario Danic
+  ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+       android:shape="rectangle">
+
+    <corners
+        android:topLeftRadius="0dp"
+        android:bottomRightRadius="@dimen/message_bubble_corners_radius"
+        android:bottomLeftRadius="@dimen/message_bubble_corners_radius"
+        android:topRightRadius="@dimen/message_bubble_corners_radius" />
+
+    <solid android:color="@color/white" />
+
+</shape>

app/src/main/res/drawable/shape_outcoming_message.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Nextcloud Talk application
+  ~
+  ~ @author Mario Danic
+  ~ Copyright (C) 2017-2018 Mario Danic <mario@lovelyhq.com>
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+       android:shape="rectangle">
+
+    <corners
+        android:bottomLeftRadius="@dimen/message_bubble_corners_radius"
+        android:topRightRadius="0dp"
+        android:topLeftRadius="@dimen/message_bubble_corners_radius"
+        android:bottomRightRadius="@dimen/message_bubble_corners_radius" />
+
+    <solid android:color="@color/white" />
+
+</shape>

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

@@ -51,7 +51,6 @@
         app:outcomingTextColor="@color/nc_outcoming_text_default"
         app:outcomingTextLinkColor="@color/nc_outcoming_text_default"
         app:outcomingTextSize="@dimen/chat_text_size"
-        app:outcomingTimeTextColor="@color/warm_grey_four"
         app:outcomingTimeTextSize="12sp"
         app:dateHeaderTextSize="13sp"
         app:textAutoLink="all"/>
@@ -62,8 +61,8 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_above="@+id/separator"
-        android:layout_centerHorizontal="true"
         android:paddingEnd="8dp"
+        android:layout_centerHorizontal="true"
         app:pb_backgroundColor="@color/colorPrimary"
         app:pb_icon="@drawable/ic_baseline_arrow_downward_24px"
         app:pb_text="@string/nc_new_messages"

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

@@ -33,7 +33,7 @@
         android:id="@id/messageUserAvatar"
         android:layout_width="40dp"
         android:layout_height="40dp"
-        android:layout_alignParentBottom="true"
+        android:layout_alignParentTop="true"
         android:layout_marginEnd="8dp"/>
 
     <com.google.android.flexbox.FlexboxLayout
@@ -64,14 +64,13 @@
             app:layout_wrapBefore="true"/>
 
 
-    </com.google.android.flexbox.FlexboxLayout>
-
-    <TextView
-        android:id="@id/messageTime"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_alignEnd="@id/bubble"
-        android:layout_below="@id/bubble"
-        android:layout_marginStart="16dp"/>
+        <TextView
+            android:id="@id/messageTime"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_below="@id/messageText"
+            android:layout_marginStart="8dp"
+            app:layout_alignSelf="center"/>
 
+    </com.google.android.flexbox.FlexboxLayout>
 </RelativeLayout>

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

@@ -47,14 +47,14 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignWithParentIfMissing="true"/>
-    </com.google.android.flexbox.FlexboxLayout>
 
-    <TextView
-        android:id="@id/messageTime"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_alignEnd="@id/bubble"
-        android:layout_below="@id/bubble"
-        android:layout_marginStart="16dp"/>
+        <TextView
+            android:id="@id/messageTime"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_below="@id/messageText"
+            android:layout_marginStart="8dp"
+            app:layout_alignSelf="center"/>
 
+    </com.google.android.flexbox.FlexboxLayout>
 </RelativeLayout>