Apa itu CardView?
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.
Langkah 1: Buat Layout Card
Oke langsung 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"?></code><br /><code class="language-java"><androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"</code><br /><code class="language-java"> xmlns:card_view="http://schemas.android.com/apk/res-auto"</code><br /><code class="language-java"> xmlns:tools="http://schemas.android.com/tools"</code><br /><code class="language-java"> android:id="@+id/card_view"</code><br /><code class="language-java"> android:layout_width="match_parent"</code><br /><code class="language-java"> android:layout_height="wrap_content"</code><br /><code class="language-java"> android:layout_gravity="center"</code><br /><code class="language-java"> android:layout_marginLeft="8dp"</code><br /><code class="language-java"> android:layout_marginTop="4dp"</code><br /><code class="language-java"> android:layout_marginRight="8dp"</code><br /><code class="language-java"> android:layout_marginBottom="4dp"</code><br /><code class="language-java"> card_view:cardCornerRadius="4dp"></code><br /><code class="language-java"> </code><br /><code class="language-java"> <RelativeLayout</code><br /><code class="language-java"> android:layout_width="match_parent"</code><br /><code class="language-java"> android:layout_height="200dp"</code><br /><code class="language-java"> android:padding="8dp"></code><br /><code class="language-java"> <ImageView</code><br /><code class="language-java"> android:id="@+id/img_item_photo"</code><br /><code class="language-java"> android:layout_width="150dp"</code><br /><code class="language-java"> android:layout_height="220dp"</code><br /><code class="language-java"> android:layout_marginBottom="4dp"</code><br /><code class="language-java"> android:scaleType="centerCrop"</code><br /><code class="language-java"> tools:src="@tools:sample/avatars" /></code><br /><code class="language-java"> <TextView</code><br /><code class="language-java"> android:id="@+id/tv_item_name"</code><br /><code class="language-java"> android:layout_width="match_parent"</code><br /><code class="language-java"> android:layout_height="wrap_content"</code><br /><code class="language-java"> android:layout_marginLeft="16dp"</code><br /><code class="language-java"> android:layout_marginTop="16dp"</code><br /><code class="language-java"> android:layout_marginRight="16dp"</code><br /><code class="language-java"> android:layout_marginBottom="8dp"</code><br /><code class="language-java"> android:layout_toEndOf="@id/img_item_photo"</code><br /><code class="language-java"> android:layout_toRightOf="@id/img_item_photo"</code><br /><code class="language-java"> android:textSize="16sp"</code><br /><code class="language-java"> android:textStyle="bold"</code><br /><code class="language-java"> tools:text="@string/heroes_name" /></code><br /><code class="language-java"> <TextView</code><br /><code class="language-java"> android:id="@+id/tv_item_detail"</code><br /><code class="language-java"> android:layout_width="match_parent"</code><br /><code class="language-java"> android:layout_height="match_parent"</code><br /><code class="language-java"> android:layout_above="@+id/layout_button"</code><br /><code class="language-java"> android:layout_below="@id/tv_item_name"</code><br /><code class="language-java"> android:layout_marginLeft="16dp"</code><br /><code class="language-java"> android:layout_marginRight="16dp"</code><br /><code class="language-java"> android:layout_toEndOf="@id/img_item_photo"</code><br /><code class="language-java"> android:layout_toRightOf="@id/img_item_photo"</code><br /><code class="language-java"> android:ellipsize="end"</code><br /><code class="language-java"> android:maxLines="5"</code><br /><code class="language-java"> tools:text="@string/detail" /></code><br /><code class="language-java"> <LinearLayout</code><br /><code class="language-java"> android:id="@+id/layout_button"</code><br /><code class="language-java"> android:layout_width="match_parent"</code><br /><code class="language-java"> android:layout_height="wrap_content"</code><br /><code class="language-java"> android:layout_alignParentBottom="true"</code><br /><code class="language-java"> android:layout_marginStart="16dp"</code><br /><code class="language-java"> android:layout_marginLeft="16dp"</code><br /><code class="language-java"> android:layout_toEndOf="@id/img_item_photo"</code><br /><code class="language-java"> android:layout_toRightOf="@id/img_item_photo"</code><br /><code class="language-java"> android:orientation="horizontal"></code><br /><code class="language-java"> <Button</code><br /><code class="language-java"> android:id="@+id/btn_set_favorite"</code><br /><code class="language-java"> style="@style/Widget.AppCompat.Button.Colored"</code><br /><code class="language-java"> android:layout_width="match_parent"</code><br /><code class="language-java"> android:layout_height="wrap_content"</code><br /><code class="language-java"> android:layout_weight="1"</code><br /><code class="language-java"> android:text="@string/favorite"</code><br /><code class="language-java"> android:textSize="12sp" /></code><br /><code class="language-java"> <Button</code><br /><code class="language-java"> android:id="@+id/btn_set_share"</code><br /><code class="language-java"> style="@style/Widget.AppCompat.Button.Colored"</code><br /><code class="language-java"> android:layout_width="match_parent"</code><br /><code class="language-java"> android:layout_height="wrap_content"</code><br /><code class="language-java"> android:layout_weight="1"</code><br /><code class="language-java"> android:text="@string/share"</code><br /><code class="language-java"> android:textSize="12sp" /></code><br /><code class="language-java"> </LinearLayout></code><br /><code class="language-java"> </RelativeLayout></code><br /><code class="language-java"></androidx.cardview.widget.CardView>Langkah 2: Buat Adapter 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> {</code><br /><code class="language-java"> private ArrayList<Hero> listHero;</code><br /><code class="language-java"> </code><br /><code class="language-java"> public CardViewHeroAdapter(ArrayList<Hero> list) {</code><br /><code class="language-java"> this.listHero = list;</code><br /><code class="language-java"> }</code><br /><code class="language-java"> </code><br /><code class="language-java"> @NonNull</code><br /><code class="language-java"> @Override</code><br /><code class="language-java"> public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {</code><br /><code class="language-java"> View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_cardview_hero, viewGroup, false);</code><br /><code class="language-java"> return new CardViewViewHolder(view);</code><br /><code class="language-java"> }</code><br /><code class="language-java"> </code><br /><code class="language-java"> @Override</code><br /><code class="language-java"> public void onBindViewHolder(@NonNull final CardViewViewHolder holder, int position) {</code><br /><code class="language-java"> </code><br /><code class="language-java"> Hero hero = listHero.get(position);</code><br /><code class="language-java"> Glide.with(holder.itemView.getContext())</code><br /><code class="language-java"> .load(hero.getPhoto())</code><br /><code class="language-java"> .apply(new RequestOptions().override(350, 550))</code><br /><code class="language-java"> .into(holder.imgPhoto);</code><br /><code class="language-java"> holder.tvName.setText(hero.getName());</code><br /><code class="language-java"> holder.tvDetail.setText(hero.getDetail());</code><br /><code class="language-java"> holder.btnFavorite.setOnClickListener(new View.OnClickListener() {</code><br /><code class="language-java"> @Override</code><br /><code class="language-java"> public void onClick(View v) {</code><br /><code class="language-java"> Toast.makeText(holder.itemView.getContext(), "Favorite " +</code><br /><code class="language-java"> listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();</code><br /><code class="language-java"> }</code><br /><code class="language-java"> });</code><br /><code class="language-java"> holder.btnShare.setOnClickListener(new View.OnClickListener() {</code><br /><code class="language-java"> @Override</code><br /><code class="language-java"> public void onClick(View v) {</code><br /><code class="language-java"> Toast.makeText(holder.itemView.getContext(), "Share " +</code><br /><code class="language-java"> listHero.get(holder.getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();</code><br /><code class="language-java"> }</code><br /><code class="language-java"> });</code><br /><code class="language-java"> }</code><br /><code class="language-java"> </code><br /><code class="language-java"> @Override</code><br /><code class="language-java"> public int getItemCount() {</code><br /><code class="language-java"> return listHero.size();</code><br /><code class="language-java"> }</code><br /><code class="language-java"> </code><br /><code class="language-java"> class CardViewViewHolder extends RecyclerView.ViewHolder {</code><br /><code class="language-java"> ImageView imgPhoto;</code><br /><code class="language-java"> TextView tvName, tvDetail;</code><br /><code class="language-java"> Button btnFavorite, btnShare;</code><br /><code class="language-java"> CardViewViewHolder(View itemView) {</code><br /><code class="language-java"> super(itemView);</code><br /><code class="language-java"> imgPhoto = itemView.findViewById(R.id.img_item_photo);</code><br /><code class="language-java"> tvName = itemView.findViewById(R.id.tv_item_name);</code><br /><code class="language-java"> tvDetail = itemView.findViewById(R.id.tv_item_detail);</code><br /><code class="language-java"> btnFavorite = itemView.findViewById(R.id.btn_set_favorite);</code><br /><code class="language-java"> btnShare = itemView.findViewById(R.id.btn_set_share);</code><br /><code class="language-java"> }</code><br /><code class="language-java"> }</code><br /><code class="language-java">}Langkah 3: Setup di Activity
Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan menambahkan satu metode berikut:
private void showRecyclerCardView(){</code><br /><code class="language-java"> rvHeroes.setLayoutManager(new LinearLayoutManager(this));</code><br /><code class="language-java"> CardViewHeroAdapter cardViewHeroAdapter = new CardViewHeroAdapter(list);</code><br /><code class="language-java"> rvHeroes.setAdapter(cardViewHeroAdapter);</code><br /><code class="language-java">}Kesimpulan
Selamat mencoba, terima kasih.
