Message view from both side in android

Question

I'm working on a chatting application. All I did is i can get api response successfully and can show them serially like this

This is id of sender and reciver

This is the messages

For doing this I created an adapter which code is something like this.

public class Single_chat_adapter extends RecyclerView.Adapter<Single_chat_adapter.Single_chat_adapterViewHolder>{


private List<Datum2> data;
private int rowLayout;
private Context context;

public Single_chat_adapter(List<Datum2> data, int rowLayout, Context context) {
    this.data = data;
    this.rowLayout = rowLayout;
    this.context = context;
}

@Override
public Single_chat_adapterViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card2, parent, false);
    return new Single_chat_adapterViewHolder(view);    }

@Override
public void onBindViewHolder(Single_chat_adapterViewHolder holder, int position) {
    holder.single_msg.setText(data.get(position).getMsg());
}

@Override
public int getItemCount() {
    return data.size();
}

public class Single_chat_adapterViewHolder extends RecyclerView.ViewHolder {

    TextView single_msg;

    public Single_chat_adapterViewHolder(View itemView) {
        super(itemView);
        single_msg =itemView.findViewById(R.id.userNameTV);
    }
}
}

Here I use a single view which is card2.xml. But all I need to do is set senders message in the left side and receiver message in other side. What To do?

score 1 · Answer 1 · answered Aug 17 '17 at 05:19

To achieve what you have explained, Create two views in card2.xml(one at the left and the other in the right). I have created one for you.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:layout_marginBottom="6dp"
android:layout_marginTop="4dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<ImageView
    android:layout_width="40dp"
    android:id="@+id/avatar"
    android:background="@drawable/circle_stroke"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:src="@drawable/useric"
    android:layout_height="40dp" />
<RelativeLayout
    android:layout_toEndOf="@+id/avatar"
    android:id="@+id/msg_back"
    android:layout_marginBottom="5dp"
    android:layout_gravity="center_vertical"
    android:background="@drawable/message_bubble_accent"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:orientation="vertical"
    android:layout_height="wrap_content">
    <TextView
        android:textSize="17sp"
        android:id="@+id/user_text"
        android:layout_width="wrap_content"
        android:textColor="@color/white"
        android:text="Hello world how are you?"
        android:layout_height="wrap_content" />
    <TextView
        android:textSize="12sp"
        android:layout_below="@+id/user_text"
        android:id="@+id/chat_time"
        android:textColor="@color/dark"
        android:text="3:33pm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

    <ImageView
        android:layout_width="40dp"
        android:id="@+id/avatar2"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/msg_back"
        android:background="@drawable/circle_stroke"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:src="@drawable/useric"
        android:layout_height="40dp" />
    <RelativeLayout
        android:layout_toStartOf="@+id/avatar2"
        android:layout_below="@+id/msg_back"
        android:id="@+id/msg_back2"
        android:layout_gravity="center_vertical"
        android:background="@drawable/message_bubble_white"
        android:layout_width="match_parent"
        android:padding="10dp"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <TextView
            android:textSize="17sp"
            android:id="@+id/user_text2"
            android:layout_width="wrap_content"
            android:textColor="@color/white"
            android:text="Hello world how are you?"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_below="@+id/user_text2"
            android:id="@+id/chat_time2"
            android:textColor="@color/dark"
            android:text="3:33pm"
            android:textSize="12sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_alignParentEnd="true"
            android:layout_below="@+id/user_text2"
            android:text="@string/sent"
            android:width="20dp"
            android:textAppearance="?android:textAppearanceSmall"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:textColor="@android:color/holo_green_light"/>
        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

Modify your onBindViewHolder and add the condition that will check if the message is coming from another user or not. Like this...

@Override
public void onBindViewHolder(Single_chat_adapterViewHolder holder, int position) {
    Datum2 datum = data.get(position);
    holder.single_msg.setText(datum.getMsg());
    int msgId = datum.getMsgId();
    if (msgId == datum.getUserMsgId) {
        //Do everything pertaining to this user here
        holder.rightBubble.setText(single_msg);
        //holder.rightAvatar.setText(single_msg) //For setting image

    } else {
        holder.leftBubble.setText(single_msg);
    }
}

Make sure you reference leftBubble and rightBubble from you ViewHolder, and set the current userMsgid from the activity that is using this adapter.

**holder.rightBubble .setText(single_msg);** this line shows error and it says cannot resolve method setText — user7310707, Aug 17 '17 at 06:17
I said this "Make sure you reference leftBubble and rightBubble from your ViewHolder, and set the current userMsgid from the activity that is using this adapter." in my answer. — devmike01, Aug 17 '17 at 09:31

score 0 · Answer 2 · answered Aug 17 '17 at 04:36

0

1) Create 2 views in card2.xml

2) One for left and another for right

3) Put condition in your onBindViewHolder, if message is from senders make left view visible and hide right view and same thing for right view also.

answered Aug 17 '17 at 04:36

Ravi

34,851
21
122
183

Can you please suggest me what can be the condition? – user7310707 Aug 17 '17 at 04:38
Or please suggest me detail? – user7310707 Aug 17 '17 at 04:38
It is the simplest thing of your whole code, if senderid or receiverid is yours then its yours message. – Ravi Aug 17 '17 at 04:39
If I try to write this condition inside my onBindViewHolder it gives me error. – user7310707 Aug 17 '17 at 04:43

score 0 · Accepted Answer · answered Aug 20 '17 at 07:19

0

You have to create 2 viewtype and two xml for them additionally and load them in a single adapter. Follow the link may help you.

Android Chat Tutorial: Building a Messaging UI

answered Aug 20 '17 at 07:19

Tanvir Durlove

142
1
10

Biswajit · Answer 4 · 2018-12-12T04:45:32.337

You can put condition inside onCreateViewHolder, this will let you to swap the layout (xml file)

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    int layout = -1;
    switch (viewType) {
    case Message.TYPE_MESSAGE:
        layout = R.layout.item_message;
        break;
    case Message.TYPE_LOG:
        layout = R.layout.item_log;
        break;
    case Message.TYPE_ACTION:
        layout = R.layout.item_action;
        break;
    }
    View v = LayoutInflater
            .from(parent.getContext())
            .inflate(layout, parent, false);
    return new ViewHolder(v);
}

You can change viewtype from this method

@Override
    public int getItemViewType(int position) {
        // Just as an example, return 0 or 2 depending on position
        // Note that unlike in ListView adapters, types don't have to be contiguous
        return position % 2 * 2;
    }

Message view from both side in android

4 Answers4