Switching layout inside the recyclerview for chat application

Question

Hi i am developing a chat application.I have two categories Operator and Visitor. depending on this category and display the messages in left or right side like in a typical chat application.

Can some one help me to achieve this.

I tried but getting an error.

FATAL EXCEPTION: main
Process: zupportdesk.desk.zupport.chatsystem, PID: 31103
java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView.setText(java.lang.CharSequence)' on a null object reference
at zupportdesk.desk.zupport.chatsystem.Data.ChattingAdapter.onBindViewHolder(ChattingAdapter.java:66)
at android.support.v7.widget.RecyclerView$Adapter.onBindViewHolder(RecyclerView.java:5822)
at android.support.v7.widget.RecyclerView$Adapter.bindViewHolder(RecyclerView.java:5855)
at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5091)
at android.support.v7.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:4967)
at android.support.v7.widget.LinearLayoutManager$LayoutState.next(LinearLayoutManager.java:2029)
at android.support.v7.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1414)
at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1377)
at android.support.v7.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:578)
at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3315)
at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:3124)
at android.support.v7.widget.RecyclerView.onLayout(RecyclerView.java:3568)
at android.view.View.layout(View.java:16636)
at android.view.ViewGroup.layout(ViewGroup.java:5437)
at android.widget.RelativeLayout.onLayout(RelativeLayout.java:1079)
at android.view.View.layout(View.java:16636)
at android.view.ViewGroup.layout(ViewGroup.java:5437)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
at android.view.View.layout(View.java:16636)
at android.view.ViewGroup.layout(ViewGroup.java:5437)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1735)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1579)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1488)
at android.view.View.layout(View.java:16636)
at android.view.ViewGroup.layout(ViewGroup.java:5437)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
at android.view.View.layout(View.java:16636)
at android.view.ViewGroup.layout(ViewGroup.java:5437)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1735)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1579)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1488)
at android.view.View.layout(View.java:16636)
at android.view.ViewGroup.layout(ViewGroup.java:5437)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:336)
at android.widget.FrameLayout.onLayout(FrameLayout.java:273)
at com.android.internal.policy.PhoneWindow$DecorView.onLayout(PhoneWindow.java:2678)
at android.view.View.layout(View.java:16636)
at android.view.ViewGroup.layout(ViewGroup.java:5437)
at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2179)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1939)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1115)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6023)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:858)
at android.view.Choreographer.doCallbacks(Choreographer.java:670)
at android.view.Choreographer.doFrame(Choreographer.java:606)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5422)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

current error is here

if(message_type.equals("Operator")) {
            ((ViewHolder) holder).visitorMessage.setText(message.getMessage());
            ((ViewHolder) holder).visitortime.setText(message.getDateTime());
        } else {
            ((ViewHolder) holder).operatorMessage.setText(message.getDateTime());
            ((ViewHolder) holder).operatorTime.setText(message.getDateTime());
        }

Adapter

public class ChattingAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{

    public List<ChattingItomObject> ChattingItem;
    private Context context;

    public ChattingAdapter(Context context, List<ChattingItomObject> items){
        this.ChattingItem = items;
        this.context = context;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        public TextView operatorMessage;
        public TextView operatorTime;
        public TextView visitorMessage;
        public TextView visitortime;

        public ViewHolder(View view) {
            super(view);
            operatorMessage = (TextView) view.findViewById(R.id.CCO_message);
            operatorTime = (TextView) view.findViewById(R.id.CCo_time);

            visitorMessage = (TextView) view.findViewById(R.id.CCV_message);
            visitortime = (TextView) view.findViewById(R.id.CCV_time);
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView;

        if (viewType == 5001) {
            // self message
            itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.custom_chat_operator, parent, false);
        } else if(viewType == 5002) {
            // others message
            itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.custom_chat_visitor, parent, false);
        }else {
            itemView = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.custom_chat_other, parent, false);
        }
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ChattingItomObject message = ChattingItem.get(position);
        String message_type = message.getMessageType().toString();

        if(message_type.equals("Operator")) {
            ((ViewHolder) holder).visitorMessage.setText(message.getMessage());
            ((ViewHolder) holder).visitortime.setText(message.getDateTime());
        } else {
            ((ViewHolder) holder).operatorMessage.setText(message.getDateTime());
            ((ViewHolder) holder).operatorTime.setText(message.getDateTime());
        }
    }

    @Override
    public int getItemViewType(int position) {
        String message = ChattingItem.get(position).getMessageType();
        if (message.equals("Operator")) {
            return 5001;
        } else if(message.equals("Visitor")){
            return 5002;
        }

        return position;
    }

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

Chatting Activity

public class Chatting extends AppCompatActivity {

    private String  uniqueID;
    public ChattingAdapter mAdapter;
    public List<ChattingItomObject> messageItems;
    private RecyclerView recyclerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chatting);


        uniqueID = UUID.randomUUID().toString();
        Log.d("GUIID", uniqueID);

        messageItems = new ArrayList<ChattingItomObject>();
        // add some items to list to test
        messageItems.add(new ChattingItomObject("VisitorID", "Message", "10:30 pm", "OperatorType", "UserName", "Operator", uniqueID));
        messageItems.add(new ChattingItomObject("VisitorID", "Message", "10:30 pm", "OperatorType", "UserName", "Visitor", uniqueID));
        messageItems.add(new ChattingItomObject("VisitorID", "Message", "10:30 pm", "OperatorType", "UserName", "Operator", uniqueID));
        messageItems.add(new ChattingItomObject("VisitorID", "Message", "10:30 pm", "OperatorType", "UserName", "Visitor", uniqueID));
        messageItems.add(new ChattingItomObject("VisitorID", "Message", "10:30 pm", "OperatorType", "UserName", "Operator", uniqueID));
        messageItems.add(new ChattingItomObject("VisitorID", "Message", "10:30 pm", "OperatorType", "UserName", "Operator", uniqueID));
        messageItems.add(new ChattingItomObject("VisitorID", "Message", "10:30 pm", "OperatorType", "UserName", "Visitor", uniqueID));



        recyclerView = (RecyclerView) findViewById(R.id.recycler_chat);
        mAdapter = new ChattingAdapter(this, messageItems);

        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setAdapter(mAdapter);

    }

}

activity_chatting.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="zupportdesk.desk.zupport.chatsystem.Chatting">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_chat"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scrollbars="none" />


    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textColorHint="#CFD8DC"
        android:textColor="#CFD8DC"
        android:hint="Write a message"
        android:id="@+id/editText"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_toLeftOf="@+id/imageView5"
        android:layout_toStartOf="@+id/imageView5" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:padding="4dp"
        android:src="@android:drawable/ic_menu_send"
        android:id="@+id/imageView5"
        android:layout_alignBottom="@+id/editText"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

custom_chat_visitor.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:src="@drawable/arrow_bg2"
        android:layout_above="@+id/CCV_time"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/CCV_message"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_weight="6"
        android:background="@drawable/chat_visitor"
        android:padding="16dp"
        android:text="Android charting application xml ui design. "
        android:textColor="#000"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView4"
        android:layout_toEndOf="@+id/imageView4"
        android:layout_marginTop="5dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/CCV_time"
        android:textSize="8dp"
        android:layout_alignBottom="@+id/CCV_message"
        android:layout_toRightOf="@+id/imageView4"
        android:layout_toEndOf="@+id/imageView4"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="2dp" />

</RelativeLayout>

custom_chat_operator.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:id="@+id/CCO_message"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_weight="6"
        android:background="@drawable/chat_operator"
        android:padding="16dp"
        android:text=" AndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAndAnd"
        android:textColor="#000"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/imageView3"
        android:layout_alignEnd="@+id/imageView3"
        android:layout_marginRight="20dp"
        android:layout_marginEnd="15dp"
        android:layout_marginTop="5dp" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_weight="1"
        android:src="@drawable/arrow_bg1"
        android:layout_alignBottom="@+id/CCO_message"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginBottom="15dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10:30 PM"
        android:id="@+id/CCo_time"
        android:textSize="8dp"
        android:layout_alignBottom="@+id/CCO_message"
        android:layout_toLeftOf="@+id/imageView3"
        android:layout_toStartOf="@+id/imageView3"
        android:layout_marginBottom="2dp" />

</RelativeLayout>

You are assigning only one layout at a time according to message type as operator or visitor, but later you are accessing both layout's textview, therefore issue occur you need to check only one layout and it's attributes — Vickyexpert, Sep 08 '16 at 04:26
Have you tried with `equalsIgnoreCase("")` means like `if(message_type.equalsIgnoreCase("Operator"))` ? if not then try it once. — Jay Rathod, Sep 08 '16 at 07:07

Krutik · Answer 1 · 2016-09-08T06:31:38.430

You need to create two different viewholder for each layout

 private final int Operator = 0, Visitor = 1;
    @Override
      public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
          switch (viewHolder.getItemViewType()) {
              case Operator:
                  ViewHolder1 vh1 = (ViewHolder1) viewHolder;
                  configureViewHolder1(vh1, position);
                  break;
              case Visitor:
                  ViewHolder2 vh2 = (ViewHolder2) viewHolder;
                  configureViewHolder2(vh2, position);
                  break;

          }
      }



    private void configureViewHolder1(ViewHolder1 vh1, int position) {
           vh1.visitorMessage.setText(message.getMessage());
           vh1.visitortime.setText(message.getDateTime());
      }

      private void configureViewHolder2(ViewHolder2 vh2,int position) {
           vh2.operatorMessage.setText(message.getDateTime());
           vh2.operatorTime.setText(message.getDateTime());
      }

    @Override
      public int getItemViewType(int position) {
 String message_type = message.getMessageType().toString();

        if(message_type.equals("Operator"))
          {
              return Operator;
          } else {
              return Visitor;
          }
          return -1;
      }

Can confirm this approach works. I used it just this weekend. — Zach, Sep 08 '16 at 05:32

score 0 · Answer 2 · answered Sep 08 '16 at 06:22

You getting null pointer due to recycling of view you have to differentiate views using getItemViewType like this :

// 5002 is for visitors 
    if(getItemViewType(position)==5002) {
                ((ViewHolder) holder).visitorMessage.setText(message.getMessage());
                ((ViewHolder) holder).visitortime.setText(message.getDateTime());
            } else {
                ((ViewHolder) holder).operatorMessage.setText(message.getDateTime());
                ((ViewHolder) holder).operatorTime.setText(message.getDateTime());
            }

score 0 · Answer 3 · answered Sep 08 '16 at 06:35

if(getItemViewType != null){
if(getItemViewType(position)==5002) {
                ((ViewHolder) holder).visitorMessage.setText(message.getMessage());
                ((ViewHolder) holder).visitortime.setText(message.getDateTime());
            } else {
                ((ViewHolder) holder).operatorMessage.setText(message.getDateTime());
                ((ViewHolder) holder).operatorTime.setText(message.getDateTime());
            }}

but i dont believe ur code is not working, try to clean a project

score 0 · Answer 4 · answered Sep 08 '16 at 06:56

I think the problem is this, when the message type is Operator you set the text of a visitor layout and ViceVersa which is not inflated on that position so android studio will return you a nullPointerException.

if(message_type.equals("Operator")) {
        ((ViewHolder) holder).visitorMessage.setText(message.getMessage());
        ((ViewHolder) holder).visitortime.setText(message.getDateTime());
    } else {
        ((ViewHolder) holder).operatorMessage.setText(message.getDateTime());
        ((ViewHolder) holder).operatorTime.setText(message.getDateTime());
    }

also on your oncreateViewHolder you defining 3 possible layout which are Operater, Visitor and Other... layout. try to use 3 identification return value on your getItemViewType() e.g. 5001, 5002, 5003 to identify each of the inflated layout.

Switching layout inside the recyclerview for chat application

4 Answers4