Làm việc với CardView và RecyclerView trong Android

Tổng quan

RecyclerView là phiên bản nâng cao của ListView, dựa trên pattern ViewHolder, cho phép hiển thị danh sách hoặc lưới (grid) các item. CardView kế thừa FrameLayout, dùng để hiển thị item dạng thẻ với hỗ trợ góc bo tròn và đổ bóng có sẵn.

Ví dụ này minh họa tích hợp RecyclerView với CardView qua ứng dụng quản lý sinh viên hiển thị tên và tuổi theo dạng lưới.

Các bước thực hiện

Bước 1: Tạo project mới

File → New Project → điền thông tin cần thiết.

Bước 2: Thêm dependency

dependencies {
    implementation 'com.android.support:cardview-v7:28.0.0'
    implementation 'com.android.support:recyclerview-v7:28.0.0'
    // ... các thư viện khác
}

Bước 3: Layout activity_main.xml

<RelativeLayout ...>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical" />
</RelativeLayout>

Bước 4: MainActivity.java - Sử dụng GridLayoutManager

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private StudentAdapter studentAdapter;
    private List<StudentData> studentDataList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = findViewById(R.id.recycler_view);
        studentAdapter = new StudentAdapter(studentDataList);
        
        // Quan trọng: dùng GridLayoutManager với 2 cột
        RecyclerView.LayoutManager manager = new GridLayoutManager(this, 2);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(studentAdapter);
        prepareStudentData();
    }
    // ... prepareStudentData() giống bài trước, sắp xếp theo tên
}

Điểm khác biệt chính: sử dụng GridLayoutManager(this, 2) để hiển thị 2 cột thay vì LinearLayoutManager.

Bước 5: StudentAdapter.java (không có animation)

class StudentAdapter extends RecyclerView.Adapter<StudentAdapter.MyViewHolder> {
    private List<StudentData> studentDataList;

    public StudentAdapter(List<StudentData> studentDataList) {
        this.studentDataList = studentDataList;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.student_list_row, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        StudentData data = studentDataList.get(position);
        Random rnd = new Random();
        int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
        holder.parent.setBackgroundColor(color);
        holder.name.setText(data.name);
        holder.age.setText(String.valueOf(data.age));
    }
    // ... getItemCount, MyViewHolder
}

Bước 6: Layout item student_list_row.xml (CardView)

<android.support.v7.widget.CardView ...>
    <LinearLayout android:id="@+id/parent" ...>
        <TextView android:id="@+id/name" ... />
        <TextView android:id="@+id/age" ... />
    </LinearLayout>
</android.support.v7.widget.CardView>

Bước 7: Model StudentData.java

class StudentData {
    String name;
    int age;
    public StudentData(String name, int age) {
        this.name = name; this.age = age;
    }
}

Kết quả

Màn hình ban đầu:

Danh sách hiển thị dạng lưới 2 cột: