From f660ca1f9c726c9b16e5bae2902bdb3638f7e5e7 Mon Sep 17 00:00:00 2001
From: Pierre <pierre@hubert.fr>
Date: Sun, 31 Dec 2017 15:04:41 +0100
Subject: [PATCH] Improved messages appearance

---
 .../ConversationMessageAdapter.java           |  93 ++++++-----
 .../comunic/client/data/utils/UiUtils.java    |  31 ++++
 .../fragment_conversation_message_item.xml    | 146 +++++-------------
 3 files changed, 128 insertions(+), 142 deletions(-)
 create mode 100644 app/src/main/java/org/communiquons/android/comunic/client/data/utils/UiUtils.java

diff --git a/app/src/main/java/org/communiquons/android/comunic/client/data/conversations/ConversationMessageAdapter.java b/app/src/main/java/org/communiquons/android/comunic/client/data/conversations/ConversationMessageAdapter.java
index 5631605..e3f5a38 100644
--- a/app/src/main/java/org/communiquons/android/comunic/client/data/conversations/ConversationMessageAdapter.java
+++ b/app/src/main/java/org/communiquons/android/comunic/client/data/conversations/ConversationMessageAdapter.java
@@ -5,16 +5,19 @@ import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.util.ArrayMap;
 import android.util.Log;
+import android.view.Gravity;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ArrayAdapter;
 import android.widget.ImageView;
+import android.widget.LinearLayout;
 import android.widget.TextView;
 
 import org.communiquons.android.comunic.client.R;
 import org.communiquons.android.comunic.client.data.ImageLoad.ImageLoadManager;
 import org.communiquons.android.comunic.client.data.UsersInfo.UserInfo;
+import org.communiquons.android.comunic.client.data.utils.UiUtils;
 
 import java.util.ArrayList;
 
@@ -87,48 +90,57 @@ public class ConversationMessageAdapter extends ArrayAdapter<ConversationMessage
 
             Update the general layout of the message
          */
-        TextView contentView;
-        ImageView messageImageView;
+        //Get the views
+        LinearLayout containerView = convertView
+                .findViewById(R.id.fragment_conversation_message_item_container);
+        TextView contentView = convertView.
+                findViewById(R.id.fragment_conversation_message_item_content);
+        ImageView messageImageView = convertView.
+                findViewById(R.id.fragment_conversation_message_item_messageimage);
         ImageView accountImageView;
-        TextView userNameView;
+        TextView userNameView = convertView.
+                findViewById(R.id.fragment_conversation_message_item_username);
+
+        //Adapt the layout depending of user of the message
         if(message.getUser_id() == userID){
 
             //Message appears on the right
-            convertView.findViewById(R.id.fragment_conversation_message_left).
-                    setVisibility(View.GONE);
-            convertView.findViewById(R.id.fragment_conversation_message_right).
-                    setVisibility(View.VISIBLE);
+            ((LinearLayout)convertView).setGravity(Gravity.END);
 
-            contentView = convertView.
-                    findViewById(R.id.fragment_conversation_message_item_content_right);
-
-            messageImageView = convertView.
-                    findViewById(R.id.fragment_conversation_message_item_messageimage_right);
+            //Message appears in blue
+            containerView.setBackground(getContext().
+                    getDrawable(R.drawable.fragment_conversation_message_currentuser_bg));
 
+            //User account image appears on the right
             accountImageView = convertView.
-                    findViewById(R.id.fragment_conversation_message_item_accountimage_right);
+                    findViewById(R.id.fragment_conversation_message_item_right_account_image);
+            accountImageView.setVisibility(View.VISIBLE);
 
+            //Hide left image
+            convertView
+                    .findViewById(R.id.fragment_conversation_message_item_left_account_image)
+                    .setVisibility(View.GONE);
 
-            userNameView = null;
         }
         else {
 
-            //Message appears on the left
-            convertView.findViewById(R.id.fragment_conversation_message_right).
-                    setVisibility(View.GONE);
-            convertView.findViewById(R.id.fragment_conversation_message_left).
-                    setVisibility(View.VISIBLE);
+            //Message appears on the right
+            ((LinearLayout)convertView).setGravity(Gravity.START);
 
-            contentView = convertView.
-                    findViewById(R.id.fragment_conversation_message_item_content);
-
-            messageImageView = convertView.
-                    findViewById(R.id.fragment_conversation_message_item_messageimage);
+            //Message appears in blue
+            containerView.setBackground(getContext().
+                    getDrawable(R.drawable.fragment_conversation_message_otheruser_bg));
 
+            //User account image appears on the left
             accountImageView = convertView.
-                    findViewById(R.id.fragment_conversation_message_item_accountimage);
+                    findViewById(R.id.fragment_conversation_message_item_left_account_image);
+            accountImageView.setVisibility(View.VISIBLE);
+
+            //Hide right image
+            convertView
+                    .findViewById(R.id.fragment_conversation_message_item_right_account_image)
+                    .setVisibility(View.GONE);
 
-            userNameView = convertView.findViewById(R.id.fragment_conversation_message_item_username);
         }
 
         /*
@@ -146,6 +158,15 @@ public class ConversationMessageAdapter extends ArrayAdapter<ConversationMessage
         //Set the text of the message
         contentView.setText(message.getContent());
 
+        //Change the color of the text
+        if(message.getUser_id() == userID){
+            contentView.setTextColor(UiUtils.getColor(getContext(),
+                    R.color.conversation_user_messages_textColor));
+        }
+        else {
+            contentView.setTextColor(UiUtils.getColor(getContext(),
+                    R.color.conversation_otheruser_messages_textColor));
+        }
 
         /*
             Update message image
@@ -167,13 +188,16 @@ public class ConversationMessageAdapter extends ArrayAdapter<ConversationMessage
          */
         if(userNameView != null){
 
+            //Hide user name by default
+            userNameView.setVisibility(View.GONE);
+
             if(user != null){
-                //Set the name of the user
-                userNameView.setText(user.getFullName());
-                userNameView.setVisibility(View.VISIBLE);
+                if(userID != user.getId()) {
+                    //Set the name of the user
+                    userNameView.setText(user.getFullName());
+                    userNameView.setVisibility(View.VISIBLE);
+                }
             }
-            else
-                userNameView.setVisibility(View.GONE);
 
             if(previousMessage != null){
                 if (message.getUser_id() == previousMessage.getUser_id()){
@@ -199,13 +223,6 @@ public class ConversationMessageAdapter extends ArrayAdapter<ConversationMessage
             ImageLoadManager.load(getContext(), imageURL, accountImageView);
         }
 
-        //Hide user image if not required
-        if(previousMessage != null){
-            if (message.getUser_id() == previousMessage.getUser_id()){
-                accountImageView.setVisibility(View.INVISIBLE);
-            }
-        }
-
 
         return convertView;
     }
diff --git a/app/src/main/java/org/communiquons/android/comunic/client/data/utils/UiUtils.java b/app/src/main/java/org/communiquons/android/comunic/client/data/utils/UiUtils.java
new file mode 100644
index 0000000..fbd0227
--- /dev/null
+++ b/app/src/main/java/org/communiquons/android/comunic/client/data/utils/UiUtils.java
@@ -0,0 +1,31 @@
+package org.communiquons.android.comunic.client.data.utils;
+
+import android.content.Context;
+import android.os.Build;
+
+/**
+ * User Interface utilities
+ *
+ * @author Pierre HUBERT
+ * Created by pierre on 12/31/17.
+ */
+
+public class UiUtils {
+
+    /**
+     * Get a color from ressources
+     *
+     * @param context The context of the application
+     * @param color_id The ID of the ressource
+     * @return The ID of the color
+     */
+    public static int getColor(Context context, int color_id){
+        //Check which version of getColor to use
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            return context.getResources().getColor(color_id, context.getTheme());
+        }
+        else {
+            return context.getResources().getColor(color_id);
+        }
+    }
+}
diff --git a/app/src/main/res/layout/fragment_conversation_message_item.xml b/app/src/main/res/layout/fragment_conversation_message_item.xml
index e4be02b..d1e380e 100644
--- a/app/src/main/res/layout/fragment_conversation_message_item.xml
+++ b/app/src/main/res/layout/fragment_conversation_message_item.xml
@@ -9,119 +9,57 @@
     android:paddingStart="5dp"
     android:paddingTop="5dp">
 
-    <!-- Messages on the left -->
+    <TextView
+        android:id="@+id/fragment_conversation_message_item_username"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        tools:text="User name" />
+
     <LinearLayout
-        android:id="@+id/fragment_conversation_message_left"
+        android:id="@+id/fragment_conversation_message_item_container"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:orientation="vertical">
-
-        <TextView
-            android:id="@+id/fragment_conversation_message_item_username"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            tools:text="User name" />
-
-        <RelativeLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:padding="1dp">
-
-            <ImageView
-                android:id="@+id/fragment_conversation_message_item_accountimage"
-                android:layout_width="26dp"
-                android:layout_height="26dp"
-                android:layout_gravity="center"
-                android:layout_marginEnd="5dp"
-                android:contentDescription="@string/user_image_description"
-                android:src="@drawable/default_account_image"/>
-
-            <LinearLayout
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_toEndOf="@id/fragment_conversation_message_item_accountimage"
-                android:background="@drawable/fragment_conversation_message_otheruser_bg"
-                android:orientation="vertical"
-                android:paddingBottom="5dp"
-                android:paddingEnd="15dp"
-                android:paddingStart="15dp">
-
-                <TextView
-                    android:id="@+id/fragment_conversation_message_item_content"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:padding="5dp"
-                    android:textColor="@color/conversation_otheruser_messages_textColor"
-                    tools:text="A message" />
-
-                <ImageView
-                    android:id="@+id/fragment_conversation_message_item_messageimage"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center"
-                    android:contentDescription="@string/fragment_conversation_message_image"
-                    tools:background="@android:color/black"
-                    tools:layout_height="40dp"
-                    tools:layout_width="40dp"/>
-            </LinearLayout>
-
-
-
-        </RelativeLayout>
-
-    </LinearLayout>
-
-    <!-- Messages on the right -->
-    <RelativeLayout
-        android:id="@+id/fragment_conversation_message_right"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:padding="1dp">
+        android:orientation="horizontal"
+        android:padding="5dp"
+        android:background="@drawable/fragment_conversation_message_otheruser_bg">
 
         <ImageView
-            android:id="@+id/fragment_conversation_message_item_accountimage_right"
+            android:id="@+id/fragment_conversation_message_item_left_account_image"
             android:layout_width="26dp"
             android:layout_height="26dp"
-            android:layout_alignParentEnd="true"
-            android:layout_gravity="end"
-            android:layout_marginStart="5dp"
+            android:layout_marginEnd="5dp"
+            android:layout_gravity="center"
             android:contentDescription="@string/user_image_description"
-            android:src="@drawable/default_account_image" />
+            android:src="@drawable/default_account_image"/>
 
-        <LinearLayout
-            android:layout_width="wrap_content"
+        <TextView
+            android:id="@+id/fragment_conversation_message_item_content"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_toStartOf="@id/fragment_conversation_message_item_accountimage_right"
-            android:background="@drawable/fragment_conversation_message_currentuser_bg"
-            android:orientation="vertical"
-            android:paddingBottom="5dp"
-            android:paddingEnd="15dp"
-            android:paddingStart="15dp">
+            android:layout_weight="1"
+            android:layout_gravity="center"
+            android:padding="5dp"
+            android:textColor="@color/conversation_otheruser_messages_textColor"
+            tools:text="A message" />
 
-            <TextView
-                android:id="@+id/fragment_conversation_message_item_content_right"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center"
-                android:padding="5dp"
-                android:textColor="@color/conversation_user_messages_textColor"
-                tools:text="A message" />
+        <ImageView
+            android:id="@+id/fragment_conversation_message_item_messageimage"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
+            android:layout_gravity="center"
+            android:contentDescription="@string/fragment_conversation_message_image"
+            android:scaleType="fitCenter"
+            tools:background="@android:color/black"
+            tools:layout_height="40dp"
+            tools:layout_width="40dp"/>
 
-            <ImageView
-                android:id="@+id/fragment_conversation_message_item_messageimage_right"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center"
-                android:contentDescription="@string/fragment_conversation_message_image"
-                tools:background="@android:color/black"
-                tools:layout_height="40dp"
-                tools:layout_width="40dp"/>
-
-
-        </LinearLayout>
-
-
-    </RelativeLayout>
-
-</LinearLayout>
\ No newline at end of file
+        <ImageView
+            android:id="@+id/fragment_conversation_message_item_right_account_image"
+            android:layout_width="26dp"
+            android:layout_height="26dp"
+            android:layout_marginStart="5dp"
+            android:layout_gravity="center"
+            android:contentDescription="@string/user_image_description"
+            android:src="@drawable/default_account_image"/>
+    </LinearLayout>
+</LinearLayout>