how to avoid changing textview color and Imageview color with Scrolling on recyclerview?

Question

I am using recyclerview to implement my list items. In each item row I have a textview and a clock icon. I also have a base time which I compare the time of each recyclerview item with it. if the difference is less than 30 minutes ,the color of textview and clock Icon should change to yellow. I do this with these lines of code:

if(!isNear) {
            time.setTextColor(context.getResources().getColor(R.color.yellow));
            Drawable clockIcon= ContextCompat.getDrawable(context, R.drawable.clock);
            clockIcon.setColorFilter(ContextCompat.getColor(context,R.color.yellow), PorterDuff.Mode.SRC_IN);
            clockIc.setImageDrawable(clockIcon);
        }
        else {
            time.setTextColor(context.getResources().getColor(R.color.white));
            Drawable clockIcon= ContextCompat.getDrawable(context, R.drawable.clock);
            clockIcon.setColorFilter(ContextCompat.getColor(context,R.color.white), PorterDuff.Mode.SRC_IN);
            clockIc.setImageDrawable(clockIcon);
        }

but when I am scrolling in the recyclerview rows, the color of textview and clock icon is changed wrong. I also use an array to store the state of the isNear variable but the results are same. What should I do?

Adapter code:

public class BusTicketAdapter extends RecyclerView.Adapter<BusTicketAdapter.View_Holder> {
    List<BusFromToResponse> availableBuses=new ArrayList<>();
    List<BusFromToResponse> displayedBuses=new ArrayList<>();
    private boolean[] toggledChoices;
    TicketListener ticketListener;
    Context context;
    String str_date;
    public BusTicketAdapter(List<BusFromToResponse> availableBuses,Context context,String str_date,TicketListener listener){
        this.availableBuses.addAll(availableBuses);
        displayedBuses.addAll(availableBuses);
        toggledChoices=new boolean[displayedBuses.size()];
        this.context=context;
        this.str_date=str_date;
        this.ticketListener=listener;
    }
    @Override
    public BusTicketAdapter.View_Holder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.filler_bus_tickets, parent, false);
        return new View_Holder(v);
    }

    @Override
    public void onBindViewHolder(View_Holder holder, int position) {

        Calendar c = Calendar.getInstance(TimeZone.getTimeZone("Asia/Tehran"));
        String timeC=c.getTime().toString();
        int index=timeC.indexOf("+");
        timeC=timeC.substring(index+1,index+6);
        int hour=4;
        String time=displayedBuses.get(position).getDepartureDate().substring(displayedBuses.get(position).getDepartureDate().indexOf("T")+1,
                displayedBuses.get(position).getDepartureDate().indexOf("Z")-3);
        if(timeC.contains("03:30"))
            hour=3;
        String[] hourmin=time.split(":");
        int min=Integer.valueOf(hourmin[1])+30;
        if(min>59){
            min-=60;
            hour+=1;
        }
        String minute=String.valueOf(min);
        if(min<10)
            minute="0"+minute;
        hour+=Integer.valueOf(hourmin[0]);
        if(hour>23)
            hour=hour-24;
        boolean isNear=DateUtil.IsBigger30Min(String.valueOf(hour)+":"+minute,c.getTime().getHours()+":"+c.getTime().getMinutes(),str_date);
        toggledChoices[position]=isNear;
        holder.time.setText((String.valueOf(hour).length()==1?"0"+String.valueOf(hour):String.valueOf(hour))+" : "+minute);
        holder.onBind(displayedBuses.get(position),position);
        if (position % 2 == 0) {
            holder.rootView.setBackgroundColor(context.getResources().getColor(R.color.ticket_row1));
        } else {
            holder.rootView.setBackgroundColor(context.getResources().getColor(R.color.ticket_row2));
        }
    }

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

    class View_Holder extends RecyclerView.ViewHolder implements View.OnClickListener {
        ExtendedTextView time;
        ViewGroup rootView;
        ImageView clockIc;

        View_Holder(View v) {
            super(v);
            rootView = v.findViewById(R.id.fillerBusTicket_root);
            rootView.setOnClickListener(this);
            clockIc=v.findViewById(R.id.clock_ic);
            time=v.findViewById(R.id.time);
        }
        void onBind(BusFromToResponse bus,int position){

            if(!toggledChoices[position]) {
                time.setTextColor(context.getResources().getColor(R.color.yellow));
                Drawable clockIcon= ContextCompat.getDrawable(context, R.drawable.clock);
                clockIcon.setColorFilter(ContextCompat.getColor(context,R.color.yellow), PorterDuff.Mode.SRC_IN);
                clockIc.setImageDrawable(clockIcon);
            }
            else {
                time.setTextColor(context.getResources().getColor(R.color.white));
                Drawable clockIcon= ContextCompat.getDrawable(context, R.drawable.clock);
                clockIcon.setColorFilter(ContextCompat.getColor(context,R.color.white), PorterDuff.Mode.SRC_IN);
                clockIc.setImageDrawable(clockIcon);
            }
        }

        @Override
        public void onClick(View v) {
            ticketListener.onRowClicked(displayedBuses.get(getAdapterPosition()));
        }
    }
}

Answer 1

One way of solving this problem would be to take two viewHolders.

First, Design two separate XML layouts, One for isNear and another one for the other. For example:

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>

This layout is the first layout. And the next one is the second one.

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorAccent"
        android:text="TextView" />
</LinearLayout>

If you look carefully, you will see that I have changed the text color for the second one to show the change.

Now you have to take two ViewHolders for each of them. For example: For the first one:

public class FirstViewHolder extends RecyclerView.ViewHolder {
    public TextView textView;
    public FirstViewHolder(@NonNull View itemView) {
        super(itemView);
        textView = itemView.findViewById(R.id.textView);
    }
}

I have linked the textView of the XML here. Now, the second viewHolder:

public class SecondViewHolder extends RecyclerView.ViewHolder {
    public TextView textView;
    public SecondViewHolder(@NonNull View itemView) {
        super(itemView);
        textView = itemView.findViewById(R.id.textView);
    }
}

Here, I am linking this one with the second XML file.

Now, in the adapter class, you need to extend it like this:

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

Here, you will see that I haven't included any specific viewHolder but the general RecyclerView.ViewHolder class. Now, you have to override the getItemViewType method in the adapter class. For example:

   @Override
    public int getItemViewType(int position) {
        if (isNear)
            return 0;
        else
            return 1;
    }

Now, one your onCreateViewHolder method in the adapter, you have to check the viewType and return ViewHolder(View) according to it. For example:

if (viewType == 0) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.first_layout,
                viewGroup, false);
        return new FirstViewHolder(view);
    } else {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.second_layout,
                viewGroup, false);
        return new SecondViewHolder(view);
    }

Now, on your onBindViewHolder method, get the element from your ArrayList and set it to the ViewHolder's Items.

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
    if (isNear) {
        FirstViewHolder holder = (FirstViewHolder) viewHolder;
        holder.textView.setText("something you want to set");
    } else {
        SecondViewHolder holder = (SecondViewHolder) viewHolder;
        holder.textView.setText("something you want to set");
    }
}

Try this and let me know whether you solve this or not.