How to create a Horizontal CardView using RecyclerView with only one card on the screen at a time

How to create a Horizontal CardView using RecyclerView with only one card on the screen at a time

Introduction

This article will guide you through creating a horizontal CardView using RecyclerView, ensuring only one card is visible at a time. We’ll cover essential components and provide code examples to get you started.

Steps

1. Set up RecyclerView

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" />

2. Create a CardView Layout

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:cardCornerRadius="16dp"
    app:cardElevation="8dp">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp">
        <!-- Add your card content here -->
    </LinearLayout>
</androidx.cardview.widget.CardView>

3. Create a RecyclerView.Adapter

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {
    // Your card data
    private List<CardData> cardDataList;

    public CardAdapter(List<CardData> cardDataList) {
        this.cardDataList = cardDataList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.card_layout, parent, false); // Use your card layout here
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // Bind data to your CardView
        CardData cardData = cardDataList.get(position);
        holder.cardTitle.setText(cardData.getTitle());
        holder.cardDescription.setText(cardData.getDescription());
        // ... other data binding
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder {
        // References to views in your card layout
        public TextView cardTitle;
        public TextView cardDescription;
        // ... other view references

        public ViewHolder(View itemView) {
            super(itemView);
            cardTitle = itemView.findViewById(R.id.card_title);
            cardDescription = itemView.findViewById(R.id.card_description);
            // ... other view initialization
        }
    }
}

4. Set up RecyclerView with Adapter and Layout Manager

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)); // Horizontal layout
recyclerView.setAdapter(new CardAdapter(cardDataList));

5. Implement Smooth Scrolling and Single Card Visibility

// In your activity or fragment
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        // Find the currently visible card
        int firstVisibleItemPosition = ((LinearLayoutManager) recyclerView.getLayoutManager()).findFirstVisibleItemPosition();
        // Scroll to center the visible card
        recyclerView.smoothScrollToPosition(firstVisibleItemPosition);
    }
});

Comparison Table

| Feature | Description |
|—|—|
| `RecyclerView` | A flexible view for displaying large datasets efficiently. |
| `CardView` | Provides a visually appealing card-like UI element. |
| `LinearLayoutManager` | Arranges items in a linear layout, horizontally or vertically. |
| `addOnScrollListener` | Listens for scroll events and enables smooth scrolling and single card visibility. |

Conclusion

By following these steps, you can effectively create a horizontal CardView within a RecyclerView, ensuring only one card is displayed at a time. This approach offers a user-friendly and visually appealing interface for presenting data horizontally. Remember to adapt the code and design to fit your specific needs and requirements.

Post Views: 7