Change in RecyclerView visibility from Gone to Visible, incorrectly shows previously removed item momentarily, before displaying newly added item

Question

Background/Context:

In my main activity, I have a tab layout have two tabs. Each tab contains two fragments, SearchVehicleFragment and VehicleListFragment.

Following is the layout file for VehicleListFragment.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".ui.fragments.VehicleListFragment"
    android:orientation="vertical">


    <com.boulevardclan.vvp.ui.recyclerviews.VehicleRecyclerView
        android:id="@+id/rvVehicleList"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/tvNoSearchedVehicles"
        style="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="You haven't searched for any vehicles yet." />
</LinearLayout>

My VehicleRecyclerView is created exactly like AttractionsRecyclerView available here. This is because I want to implement empty state mechanism for my VehicleRecyclerView. Also, during initialization, my VehicleRecyclerView has setHasFixedSize(true)

public class VehicleRecyclerView extends RecyclerView {
    private View mEmptyView;

    public VehicleRecyclerView(Context context) {
        super(context);
    }

    private AdapterDataObserver mDataObserver = new AdapterDataObserver() {
        @Override
        public void onChanged() {
            super.onChanged();
            updateEmptyView();
        }

        @Override
        public void onItemRangeRemoved(int positionStart, int itemCount) {
            super.onItemRangeRemoved(positionStart, itemCount);
            try{
                updateEmptyView();
            }catch(Exception e){
            //                TODO
            }
        }

        @Override
        public void onItemRangeInserted(int positionStart, int itemCount) {
            super.onItemRangeInserted(positionStart, itemCount);
            updateEmptyView();
        }

        @Override
        public void onItemRangeChanged(int positionStart, int itemCount) {
            super.onItemRangeChanged(positionStart, itemCount);
            updateEmptyView();
        }

        @Override
        public void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) {
            super.onItemRangeMoved(fromPosition, toPosition, itemCount);
            updateEmptyView();
        }
    };

    public VehicleRecyclerView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public VehicleRecyclerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * Designate a view as the empty view. When the backing adapter has no
     * data this view will be made visible and the recycler view hidden.
     *
     */
    public void setEmptyView(View emptyView) {
        mEmptyView = emptyView;
    }

    @Override
    public void setAdapter(RecyclerView.Adapter adapter) {
        if (getAdapter() != null) {
            getAdapter().unregisterAdapterDataObserver(mDataObserver);
        }
        if (adapter != null) {
            adapter.registerAdapterDataObserver(mDataObserver);
        }
        super.setAdapter(adapter);
        updateEmptyView();
    }

    private void updateEmptyView() {
        if (mEmptyView != null && getAdapter() != null) {
            boolean showEmptyView = getAdapter().getItemCount() == 0;
            if(showEmptyView){
                mEmptyView.setVisibility(VISIBLE);
                setVisibility(GONE);
            }else {
                mEmptyView.setVisibility(GONE);
                setVisibility(VISIBLE);
            }
        }
    }
}

My VehicleAdapter has setHasStableIds(true) as well as overriden getItemId(position).

public class VehicleAdapter extends RecyclerView.Adapter<VehicleAdapter.VehicleViewHolder> {

    private List<Vehicle> vehicleList = new ArrayList<>();
    private Context mContext;

    public VehicleAdapter(Context context, List<Vehicle> vehicles) {
        vehicleList.addAll(vehicles);
        setHasStableIds(true);
        mContext = context;
    }

    @Override
    public VehicleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new VehicleViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.vehicle_list_item_card_view, parent, false));
    }

    @Override
    public void onBindViewHolder(VehicleViewHolder holder, int position) {
        holder.bind(vehicleList.get(position));
    }

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

    @Override
    public long getItemId(int position) {
        return vehicleList.get(position).getId();
    }

    public void addVehicle(Vehicle vehicle){
        if(vehicleList != null){
            vehicleList.add(0, vehicle);
            notifyItemInserted(0);
        }
    }

    public void removeVehicle(int position){
        if(vehicleList.get(position).delete()){
            vehicleList.remove(position);
            notifyItemRemoved(position);
        }else {
//            TODO
        }
    }

    public void updateVehicle(Vehicle vehicle, int position){
        vehicleList.set(position, vehicle);
        notifyItemChanged(position);
    }

    class VehicleViewHolder extends RecyclerView.ViewHolder{

        TextView tvRegistrationNumber;
        TextView tvOwnerName;
        TextView tvColor;
        TextView tvOwnerCity;
        TextView tvLookupDate;
        TextView tvManufacturer;
        TextView tvModel;
        TextView tvMakeYear;

        ImageView ivDetail;
        ImageView ivBookmark;
        ImageView ivDelete;

        public VehicleViewHolder(View itemView) {
            super(itemView);

            tvRegistrationNumber = (TextView) itemView.findViewById(R.id.tvRegistrationNumber);
            tvOwnerName = (TextView) itemView.findViewById(R.id.tvOwnerName);
            tvColor = (TextView) itemView.findViewById(R.id.tvColor);
            tvOwnerCity = (TextView) itemView.findViewById(R.id.tvOwnerCity);
            tvLookupDate = (TextView) itemView.findViewById(R.id.tvLookupDate);
            tvManufacturer = (TextView) itemView.findViewById(R.id.tvManufacturer);
            tvModel = (TextView) itemView.findViewById(R.id.tvModel);
            tvMakeYear = (TextView) itemView.findViewById(R.id.tvMakeYear);

            ivDetail = (ImageView) itemView.findViewById(R.id.ivDetail);
            ivBookmark = (ImageView) itemView.findViewById(R.id.ivBookmark);
            ivDelete = (ImageView) itemView.findViewById(R.id.ivDelete);
        }

        void setOwnerName(String ownerName){
            tvOwnerName.setText(ownerName);
        }
        void setColor(String color){
            tvColor.setText(color);
        }
        void setOwnerCity(String ownerCity){
            tvOwnerCity.setText(ownerCity);
        }
        void setLookupDate(String lookupDate){
            tvLookupDate.setText(lookupDate);
        }
        void setManufacturer(String manufacturer){
            tvManufacturer.setText(manufacturer);
        }
        void setMakeYear(int makeYear){
            tvMakeYear.setText(String.format(Locale.getDefault(),"%s",makeYear));
        }
        void setModel(String model){
            tvModel.setText(model);
        }
        void setBookmarked(boolean isBookmarked){
            ivBookmark.setImageDrawable(ViewUtils.getDrawable(mContext, (isBookmarked ? R.drawable.ic_favorite_black_24dp: R.drawable.ic_favorite_border_black_24dp)));
        }

        void bind(final Vehicle vehicle){
            tvRegistrationNumber.setText(vehicle.getRegistrationNumber());
            setOwnerName(vehicle.getOwnerName());
            setColor(vehicle.getColor());
            setOwnerCity(vehicle.getOwnerCity());
            setLookupDate(DateTimeUtils.getPKTDateTime(vehicle.getModifiedAt()));
            setManufacturer(vehicle.getManufacturer());
            setModel(vehicle.getMakeType());
            setMakeYear(vehicle.getMakeYear());
            setBookmarked(vehicle.isBookmarked());
            setupClickListeners(vehicle);
        }

        private void setupClickListeners(final Vehicle vehicle) {
            ivDelete.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    new MaterialDialog.Builder(mContext)
                            .title(R.string.confirm_delete_vehicle_heading)
                            .content(R.string.confirm_delete_vehicle_label)
                            .positiveText(R.string.confirm_response_yes)
                            .negativeText(R.string.confirm_response_cancel)
                            .stackingBehavior(StackingBehavior.ALWAYS)
                            .onPositive(new MaterialDialog.SingleButtonCallback() {
                                @Override
                                public void onClick(@NonNull MaterialDialog dialog, @NonNull DialogAction which) {
                                    if(getAdapterPosition() != RecyclerView.NO_POSITION){
                                        removeVehicle(getAdapterPosition());
                                    }
                                }
                            })
                            .show();
                }
            });
        }
    }
}

---

Problem:

When there is no item in the recyclerview and I add one or more new items to the recyclerview via notifyItemInserted(0), everything works fine. But when there is only one item in the recyclerview, I delete the item via notifyItemRemoved(position) and now add a new item to recyclerview via notifyItemInserted(0), there is a transition/animation like effect where after hiding the emptyView, the recyclerview is shown with the previously removed item for a fraction of a second and then newly added item fades in to the viewport.

So, here is the 'ideal' sequence of events that should be followed:

1. [Working fine] I delete the last item in the recyclerview. The recyclerview's visibility is changed to GONE and emptyView (TextView) visibility is changed to VISIBLE.
2. [Working fine] Then, I add a new item to the recyclerview. The emptyView's visibility is changed to GONE.
3. [Not working as expected] The recyclerview's visibility should be changed to VISIBLE and it should contain only one item i.e. the newly added item [Not working as expected] Instead, there is a flickr/blink where recyclerview with the only previously existing item is shown for a fraction of a second and then that item is replaced by the newly added item via a fade-in(?) transition.

Updte: You can have a look at the issue here: https://media.giphy.com/media/l0IydcuJDAqPNlmla/giphy.gif

I am looking forward to a way to get rid of this flickr/blink effect that shows old item/recyclerview state for a very breif preiod of time.

---

What I have tried:

RecyclerView.ItemAnimator animator = mVehicleListRV.getItemAnimator();
if (animator instanceof SimpleItemAnimator) {
    ((SimpleItemAnimator) animator).setSupportsChangeAnimations(false);
}

Disclaimer:

I am new to Android development and stuck in this problem for many hours. Looking for help/pointers from the great minds at SO to get unblocked. Please bear with my limited knowledge.

Answer 1

I ran into this issue - indeed, when the Android system thinks the RecyclerView isn't visible, it won't relayout its children. This will produce a flicker when re-showing the RecyclerView, as the old children will still visible for a short time, before the views can be updated for the new data.

I experimented with a few different approaches of how we can trick the RecyclerView into not being visible for the user, while still updating its children.

Some approaches that didn't work:

• Set RecyclerView visibility to GONE
• Set RecyclerView visibility to INVISIBLE
• Set RecyclerView alpha to 0

All these approaches caused the RecyclerView to disappear, but to also not relayout its children, causing a flicker.

The approach that did work:

• Set the RecyclerView height to 1

I had my RecyclerView in a ConstraintLayout, so I wrote a little utility function. It looks like this:

/**
 * Toggle whether [recyclerView] is visible.
 * It does not use [View.setVisibility] or [View.setAlpha],
 * because doing so will prevent recyclerView children from being updated,
 * and this creates a flicker.
 *
 * Instead, this workaround makes the recyclerView too small to be seen,
 * while 'tricking' the Android system into thinking the view is still visible,
 * so allows View updates to continue as necessary.
 */
fun toggleRecyclerView(shouldShow: Boolean) {
    recyclerView.updateLayoutParams {
        // Use 1 as the 'invisible' height - it's the smallest height available to us
        height = if(shouldShow) MATCH_CONSTRAINT else 1
    }
}

I combine this with the submitList callback provided by ListAdapter - this will only re-show the RecyclerView after the asynchronous diff has been calculated between old and new data, and then a View.post - to wait until the RecyclerView children have been updated:

if (items.isEmpty()) {
    toggleRecyclerView(false)
    emptyItemsText.visibility = View.VISIBLE
    adapter.submitList(emptyList())
    return
}

// Only show recyclerview after items are updated, to prevent flicker
adapter.submitList(items) {
    recyclerView.post {
        toggleRecyclerView(true)
        emptyItemsText.visibility = View.GONE
    }
}