Improved messages appearance

This commit is contained in:
Pierre 2017-12-31 15:04:41 +01:00
parent c180bf3a3f
commit f660ca1f9c
3 changed files with 128 additions and 142 deletions

View File

@ -5,16 +5,19 @@ import android.support.annotation.NonNull;
import android.support.annotation.Nullable; import android.support.annotation.Nullable;
import android.util.ArrayMap; import android.util.ArrayMap;
import android.util.Log; import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater; import android.view.LayoutInflater;
import android.view.View; import android.view.View;
import android.view.ViewGroup; import android.view.ViewGroup;
import android.widget.ArrayAdapter; import android.widget.ArrayAdapter;
import android.widget.ImageView; import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView; import android.widget.TextView;
import org.communiquons.android.comunic.client.R; import org.communiquons.android.comunic.client.R;
import org.communiquons.android.comunic.client.data.ImageLoad.ImageLoadManager; 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.UsersInfo.UserInfo;
import org.communiquons.android.comunic.client.data.utils.UiUtils;
import java.util.ArrayList; import java.util.ArrayList;
@ -87,48 +90,57 @@ public class ConversationMessageAdapter extends ArrayAdapter<ConversationMessage
Update the general layout of the message Update the general layout of the message
*/ */
TextView contentView; //Get the views
ImageView messageImageView; 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; 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){ if(message.getUser_id() == userID){
//Message appears on the right //Message appears on the right
convertView.findViewById(R.id.fragment_conversation_message_left). ((LinearLayout)convertView).setGravity(Gravity.END);
setVisibility(View.GONE);
convertView.findViewById(R.id.fragment_conversation_message_right).
setVisibility(View.VISIBLE);
contentView = convertView. //Message appears in blue
findViewById(R.id.fragment_conversation_message_item_content_right); containerView.setBackground(getContext().
getDrawable(R.drawable.fragment_conversation_message_currentuser_bg));
messageImageView = convertView.
findViewById(R.id.fragment_conversation_message_item_messageimage_right);
//User account image appears on the right
accountImageView = convertView. 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 { else {
//Message appears on the left //Message appears on the right
convertView.findViewById(R.id.fragment_conversation_message_right). ((LinearLayout)convertView).setGravity(Gravity.START);
setVisibility(View.GONE);
convertView.findViewById(R.id.fragment_conversation_message_left).
setVisibility(View.VISIBLE);
contentView = convertView. //Message appears in blue
findViewById(R.id.fragment_conversation_message_item_content); containerView.setBackground(getContext().
getDrawable(R.drawable.fragment_conversation_message_otheruser_bg));
messageImageView = convertView.
findViewById(R.id.fragment_conversation_message_item_messageimage);
//User account image appears on the left
accountImageView = convertView. 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 //Set the text of the message
contentView.setText(message.getContent()); 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 Update message image
@ -167,13 +188,16 @@ public class ConversationMessageAdapter extends ArrayAdapter<ConversationMessage
*/ */
if(userNameView != null){ if(userNameView != null){
//Hide user name by default
userNameView.setVisibility(View.GONE);
if(user != null){ if(user != null){
//Set the name of the user if(userID != user.getId()) {
userNameView.setText(user.getFullName()); //Set the name of the user
userNameView.setVisibility(View.VISIBLE); userNameView.setText(user.getFullName());
userNameView.setVisibility(View.VISIBLE);
}
} }
else
userNameView.setVisibility(View.GONE);
if(previousMessage != null){ if(previousMessage != null){
if (message.getUser_id() == previousMessage.getUser_id()){ if (message.getUser_id() == previousMessage.getUser_id()){
@ -199,13 +223,6 @@ public class ConversationMessageAdapter extends ArrayAdapter<ConversationMessage
ImageLoadManager.load(getContext(), imageURL, accountImageView); 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; return convertView;
} }

View File

@ -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);
}
}
}

View File

@ -9,119 +9,57 @@
android:paddingStart="5dp" android:paddingStart="5dp"
android:paddingTop="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 <LinearLayout
android:id="@+id/fragment_conversation_message_left" android:id="@+id/fragment_conversation_message_item_container"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"> android:orientation="horizontal"
android:padding="5dp"
<TextView android:background="@drawable/fragment_conversation_message_otheruser_bg">
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">
<ImageView <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_width="26dp"
android:layout_height="26dp" android:layout_height="26dp"
android:layout_alignParentEnd="true" android:layout_marginEnd="5dp"
android:layout_gravity="end" android:layout_gravity="center"
android:layout_marginStart="5dp"
android:contentDescription="@string/user_image_description" android:contentDescription="@string/user_image_description"
android:src="@drawable/default_account_image" /> android:src="@drawable/default_account_image"/>
<LinearLayout <TextView
android:layout_width="wrap_content" android:id="@+id/fragment_conversation_message_item_content"
android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_toStartOf="@id/fragment_conversation_message_item_accountimage_right" android:layout_weight="1"
android:background="@drawable/fragment_conversation_message_currentuser_bg" android:layout_gravity="center"
android:orientation="vertical" android:padding="5dp"
android:paddingBottom="5dp" android:textColor="@color/conversation_otheruser_messages_textColor"
android:paddingEnd="15dp" tools:text="A message" />
android:paddingStart="15dp">
<TextView <ImageView
android:id="@+id/fragment_conversation_message_item_content_right" android:id="@+id/fragment_conversation_message_item_messageimage"
android:layout_width="wrap_content" android:layout_width="40dp"
android:layout_height="wrap_content" android:layout_height="40dp"
android:layout_gravity="center" android:layout_gravity="center"
android:padding="5dp" android:contentDescription="@string/fragment_conversation_message_image"
android:textColor="@color/conversation_user_messages_textColor" android:scaleType="fitCenter"
tools:text="A message" /> tools:background="@android:color/black"
tools:layout_height="40dp"
tools:layout_width="40dp"/>
<ImageView <ImageView
android:id="@+id/fragment_conversation_message_item_messageimage_right" android:id="@+id/fragment_conversation_message_item_right_account_image"
android:layout_width="wrap_content" android:layout_width="26dp"
android:layout_height="wrap_content" android:layout_height="26dp"
android:layout_gravity="center" android:layout_marginStart="5dp"
android:contentDescription="@string/fragment_conversation_message_image" android:layout_gravity="center"
tools:background="@android:color/black" android:contentDescription="@string/user_image_description"
tools:layout_height="40dp" android:src="@drawable/default_account_image"/>
tools:layout_width="40dp"/> </LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>