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.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;
}

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: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_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>
<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_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>