RecyclerView cutting items off while scrolling back

Question

I have a problem with items inside Recycler View Adapter

When items are scrolled from left to right horizontally everything looks good. But when when scrolling items back from right positions to left ones the item with focus is cut off for at least half of a size.

I tried with changing width and height of recycler, as well as margins but it did not work

Recycler View Adapter

public class SettingsSceneCardAdapter extends RecyclerView.Adapter {

ArrayList<SettingsSceneCardItem> cardItems = new ArrayList<>();

private SettingsAdapterListener listener;
private OnSelectCallback onSelectCallback;

public SettingsSceneCardAdapter(SettingsAdapterListener listener) {
    this.listener = listener;
}

public void setOnSelectCallback(OnSelectCallback callback) {
    this.onSelectCallback = callback;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_scene_settings_card_item, parent, false);

    return new ViewHolder(view);
}

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

    // Settings Scene Card Item cardItem
    final SettingsSceneCardItem cardItem = cardItems.get(position);

    // Card Item View
    holder.cardItemView.setBackgroundColor(Color.parseColor("#131B22"));

    // Card Item Text Description
    holder.cardItemDescription.setText(cardItem.getDescription());
    holder.cardItemDescription.setTextColorColor.parseColor("#ffffff"));
    holder.cardItemDescription.setTextSize(12);

    // Card Item Main Image Icon
    holder.cardItemMainImageIcon.setImageResource(cardItem.getMainIcon());
    holder.cardItemMainImageIcon.getLayoutParams().width = 100;
    holder.cardItemMainImageIcon.getLayoutParams().height = 100;

    // Focused Item View with shadow behinds the card item view
    holder.focusedItemView.setVisibility(View.GONE);

    // Set Card Item Focus Behaviour
    holder.cardItemView.setFocusable(true);
    holder.cardItemView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if (hasFocus) {
                if (onSelectCallback != null) {
                    onSelectCallback.onSelect(position);
                }

                holder.cardItemView.setBackgroundColor(Color.RED);

                // Set Card Item Text Description Behaviour
                holder.cardItemDescription.setTextColor(Color.parseColor("#ffffff"));
                holder.cardItemDescription.setTextSize(18);

                // Set Card Item Main Image Icon Behaviour
                holder.cardItemMainImageIcon.getLayoutParams().width = 120;
                holder.cardItemMainImageIcon.getLayoutParams().height = 120;

            } else {

                // Reset Card Item View Behaviour
               holder.cardItemView.setBackgroundColor(Color.parseColor("#131B22"));

                // Reset Card Item Text Description Behaviour
                holder.cardItemDescription.setTextColor(Color.parseColor("#ffffff"));
                holder.cardItemDescription.setTextSize(12);

                // Reset Card Item Main Image Icon Behaviour
                holder.cardItemMainImageIcon.getLayoutParams().width = 100;
                holder.cardItemMainImageIcon.getLayoutParams().height = 100;
            }
        }
    });

    // TODO Add image listener
    holder.cardItemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            System.out.println("###################### CARD ITEM CLICKED POSITION " + position);
            listener.onItemClick(position);
        }
    });
}


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

/**
 * Recycler View Holder
 */
public class ViewHolder extends RecyclerView.ViewHolder {

    // Relative layout for focused card view item with shadow
    private RelativeLayout focusedItemView;

    // Relative layout for card item view
    private RelativeLayout cardItemView;

    //Image view main card item image icon
    private ImageView cardItemMainImageIcon;

    // Text view description
    private TextView cardItemDescription;

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

        focusedItemView = (RelativeLayout) itemView.findViewById(R.id.settings_scene_card_item_view_focused);
        cardItemView = (RelativeLayout) itemView.findViewById(R.id.settings_scene_card_item_view);
        cardItemMainImageIcon = (ImageView) itemView.findViewById(R.id.settings_scene_card_main_image_icon);
        cardItemDescription = (TextView) itemView.findViewById(R.id.settings_scene_card_item_text_description);
    }
}


public interface SettingsAdapterListener {

    void onItemClick(int position);

    void onSelected(int position);
}



public interface OnSelectCallback {
    void onSelect(int index);
}

public void refreshCardItems(ArrayList<SettingsSceneCardItem> cardItems) {
    this.cardItems = cardItems;
    notifyDataSetChanged();
}




<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.RecyclerView
    android:id="@+id/settings_scene_card_item_list_recycler"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:layout_centerInParent="true" />

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
    android:id="@+id/settings_scene_card_item_view_focused"
    android:layout_width="215dp"
    android:layout_height="328dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="20dp" />
<RelativeLayout
    android:id="@+id/settings_scene_card_item_view"
    android:layout_width="185.5dp"
    android:layout_height="278dp"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="50dp"
    android:gravity="center">
    <ImageView
        android:id="@+id/settings_scene_card_main_image_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="68dp"
        android:layout_marginTop="50dp" />

    <TextView
        android:id="@+id/settings_scene_card_item_text_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/settings_scene_card_main_image_icon"
        android:gravity="center" />
</RelativeLayout>

Answer 1

Use Snaphelper.This is for snapping the item in the center when scrolling in recyclerview.

SnapHelper snapHelper = new LinearSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);