Pada latihan sebelumnya, kita telah membuat RecyclerView dengan mode list dan mode grid untuk menampilkan daftar pahlawan. Dan terakhir pada latihan ini kita akan membuat RecyclerView dengan mode CardView.

Oke langsung saja kita tambahkan berkas baru pada layout dengan nama item_cardview_hero dengan root element android.support.v7.widget.CardView dan lengkapi kodenya dengan baris seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="4dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="4dp"
    card_view:cardCornerRadius="4dp">
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:padding="8dp">
        <ImageView
            android:id="@+id/img_item_photo"
            android:layout_width="150dp"
            android:layout_height="220dp"
            android:layout_marginBottom="4dp"
            android:scaleType="centerCrop"
            tools:src="@tools:sample/avatars" />
        <TextView
            android:id="@+id/tv_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginBottom="8dp"
            android:layout_toEndOf="@id/img_item_photo"
            android:layout_toRightOf="@id/img_item_photo"
            android:textSize="16sp"
            android:textStyle="bold"
            tools:text="@string/heroes_name" />
        <TextView
            android:id="@+id/tv_item_detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/layout_button"
            android:layout_below="@id/tv_item_name"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_toEndOf="@id/img_item_photo"
            android:layout_toRightOf="@id/img_item_photo"
            android:ellipsize="end"
            android:maxLines="5"
            tools:text="@string/detail" />
        <LinearLayout
            android:id="@+id/layout_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_toEndOf="@id/img_item_photo"
            android:layout_toRightOf="@id/img_item_photo"
            android:orientation="horizontal">
            <Button
                android:id="@+id/btn_set_favorite"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/favorite"
                android:textSize="12sp" />
            <Button
                android:id="@+id/btn_set_share"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/share"
                android:textSize="12sp" />
        </LinearLayout>
    </RelativeLayout>
</androidx.cardview.widget.CardView>

Setelah selesai, lanjut ke pembuatan Adapter untuk berkas layout tersebut. Buat sebuah kelas baru dengan nama CardViewHeroAdapter.

Kemudian kita lakukan hal yang sama dengan pembuatan ListHeroAdapter, dan lengkapi kodenya menjadi seperti berikut:

public class CardViewHeroAdapter extends RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder> {
    private ArrayList<Hero> listHero;
 
    public CardViewHeroAdapter(ArrayList<Hero> list) {
        this.listHero = list;
    }
 
    @NonNull
    @Override
    public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_cardview_hero, viewGroup, false);
        return new CardViewViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(@NonNull final CardViewViewHolder holder, int position) {
 
        Hero hero = listHero.get(position);
        Glide.with(holder.itemView.getContext())
                .load(hero.getPhoto())
                .apply(new RequestOptions().override(350, 550))
                .into(holder.imgPhoto);
        holder.tvName.setText(hero.getName());
        holder.tvDetail.setText(hero.getDetail());
        holder.btnFavorite.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(holder.itemView.getContext(), "Favorite " +
                        listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();
            }
        });
        holder.btnShare.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(holder.itemView.getContext(), "Share " +
                        listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }
 
    @Override
    public int getItemCount() {
        return listHero.size();
    }
 
    class CardViewViewHolder extends RecyclerView.ViewHolder {
        ImageView imgPhoto;
        TextView tvName, tvDetail;
        Button btnFavorite, btnShare;
        CardViewViewHolder(View itemView) {
            super(itemView);
            imgPhoto = itemView.findViewById(R.id.img_item_photo);
            tvName = itemView.findViewById(R.id.tv_item_name);
            tvDetail = itemView.findViewById(R.id.tv_item_detail);
            btnFavorite = itemView.findViewById(R.id.btn_set_favorite);
            btnShare = itemView.findViewById(R.id.btn_set_share);
        }
    }
}

Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan menambahkan satu metode berikut:

private void showRecyclerCardView(){
    rvHeroes.setLayoutManager(new LinearLayoutManager(this));
    CardViewHeroAdapter cardViewHeroAdapter = new CardViewHeroAdapter(list);
    rvHeroes.setAdapter(cardViewHeroAdapter);
}

Selamat mencoba, terima kasih.