RecyclerView Mode Grid

Pada modul sebelumnya, kita telah membuat menu pada aplikasi daftar Pahlawan yang
sedang kita buat. Mari kita lanjutkan pembuatan bentuk dari RecyclerView dalam
bentuk grid.
1. Buat sebuah berkas layout xml baru dengan nama item_grid_hero.

Setelah itu lengkapi kodenya menjadi seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
 
    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_margin="1dp"
        android:scaleType="centerCrop"
        tools:src="@color/colorAccent" />
</LinearLayout>

2. Setelah selesai, lanjut ke pembuatan Adapter untuk berkas layout xml tersebut. Buat
sebuah kelas baru dengan nama GridHeroAdapter.
Kemudian kita lakukan hal yang sama dengan pembuatan ListHeroAdapter, lengkapi
kodenya menjadi seperti berikut:
public class GridHeroAdapter extends
RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {
Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu
merahnya. Setelah memperbaiki maka akan menjadi seperi ini:
public class GridHeroAdapter extends
RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {
@NonNull
    @Override
    public GridViewHolder onCreateViewHolder(@NonNull ViewGroup
viewGroup, int i) {
        return null;
    }

    @Override
    public void onBindViewHolder(@NonNull GridViewHolder gridViewHolder,
int i) {
    }
 
    @Override
    public int getItemCount() {
        return 0;
    }
    public class GridViewHolder extends RecyclerView.ViewHolder {
        public GridViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }
}
 Kemudian buatlah constructor untuk list seperti ini:
public class GridHeroAdapter extends
RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {
    private ArrayList<Hero> listHero;

    public GridHeroAdapter(ArrayList<Hero> list) {

        this.listHero = list;
    }
 
    ...
} 
Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter.
Maka kode lengkap dari kelas GridHeroAdapter sebagai berikut:
public class GridHeroAdapter extends
RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {
    private ArrayList<Hero> listHero;
 
    public GridHeroAdapter(ArrayList<Hero> list) {
        this.listHero = list;
    }
 
    @NonNull
    @Override
    public GridViewHolder onCreateViewHolder(@NonNull ViewGroup
viewGroup, int viewType) {
        View view =
LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_grid_he
ro, viewGroup, false);
        return new GridViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(@NonNull final GridViewHolder holder,
int position) {
        Glide.with(holder.itemView.getContext())
                .load(listHero.get(position).getPhoto())
                .apply(new RequestOptions().override(350, 550))
                .into(holder.imgPhoto);
    }
 
    @Override
    public int getItemCount() {
        return listHero.size();
    }
 
    class GridViewHolder extends RecyclerView.ViewHolder {
        ImageView imgPhoto;
 
        GridViewHolder(View itemView) {
            super(itemView);
            imgPhoto = itemView.findViewById(R.id.img_item_photo);
        }
    }
}

3. Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan

menambahkan satu metode berikut:
 private void showRecyclerGrid(){
    rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));
    GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(list);
    rvHeroes.setAdapter(gridHeroAdapter);
}
Dan lengkapi metode onOptionItemSelected() menjadi seperti berikut:
public void setMode(int selectedMode) {
    switch (selectedMode) {
        case R.id.action_list:
            showRecyclerList();
            break;
 
        case R.id.action_grid:
            showRecyclerGrid();
            break;
 
        case R.id.action_cardview:
 
            break;
    }
}
4. Ini akan mengubah tampilan ketika pengguna memilih salah satu bentuk layout.
Sekarang jalankan kembali aplikasinya. Akan ada dua bentuk
dari RecyclerView yaitu list dan grid.
RecyclerView dengan CardView

Pada modul ini kita akan membuat bentuk RecyclerView dengan

komponen CardView. Komponen ini akan menampilkan data selayaknya sebuah kartu.
Pendekatan ini hanya diperuntukkan bila item list memiliki lebih dari satu action.

1. Pertama, buat kembali berkas layout xml item_cardview_hero.

Setelah itu lengkapi kodenya menjadi 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="@color/colorAccent" />
         <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>
2. Setelah selesai, buat kembali kelas Adapter dengan nama CardViewHeroAdapter.
Kemudian kita lakukan hal yang sama dengan pembuatan LisHeroAdapter. Lengkapi
kodenya menjadi seperti berikut:
public class CardViewHeroAdapter extends
RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{
}
Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu
merahnya.  Setelah memperbaiki maka akan menjadi seperi ini:
public class CardViewHeroAdapter extends
RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{
    @NonNull
    @Override
    public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup
viewGroup, int i) {
        return null;
    }

    @Override
    public void onBindViewHolder(@NonNull CardViewViewHolder
cardViewViewHolder, int i) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

    public class CardViewViewHolder extends RecyclerView.ViewHolder {

        public CardViewViewHolder(@NonNull View itemView) {
            super(itemView);
        }
     }
}
Kemudian buatlah dan constructor untuk list seperti ini:
public class CardViewHeroAdapter extends
RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{
    private ArrayList<Hero> listHero;

    public CardViewHeroAdapter(ArrayList<Hero> list) {

        this.listHero = list;
    }
 
    ...
}
Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter.
Maka kode lengkap dari kelas CardViewHeroAdapter sebagai 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_cardvie
w_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);
        }
    }
}
3. Setelah selesai, kita perlu menambahkan satu metode lagi untuk menampilkan
bentuk RecyclerView ini. Caranya lengkapi kode pada MainActivity menjadi seperti
berikut:
private void showRecyclerCardView(){
    rvHeroes.setLayoutManager(new LinearLayoutManager(this));
    CardViewHeroAdapter cardViewHeroAdapter = new
CardViewHeroAdapter(list);
    rvHeroes.setAdapter(cardViewHeroAdapter);
}
Dan update metode onOptionsItemSelected() menjadi seperti berikut:
public void setMode(int selectedMode) {
    switch (selectedMode) {
        case R.id.action_list:
            showRecyclerList();
            break;
 
        case R.id.action_grid:
            showRecyclerGrid();
            break;
 
        case R.id.action_cardview:
            showRecyclerCardView();
            break;
    }
}
4. Jalankan kembali aplikasinya. Seharusnya Anda sudah bisa menampilkan tiga
bentuk RecyclerView yang telah kita rencanakan sebelumnya.
5. Untuk mempercantik tampilan dan memenuhi target di awal, kita akan menambah
metode untuk mengubah judul halaman setiap melakukan perubahan bentuk
dari RecyclerView.
private void setActionBarTitle(String title) {
    if (getSupportActionBar() != null) {
        getSupportActionBar().setTitle(title);
    }
}
Kemudian tambahkan variable baru diatas metode onCreate() seperti berikut:
private String title = "Mode List";
Dan kita update kembali metode setMode sehingga menjadi seperti berikut:
public void setMode(int selectedMode) {
    switch (selectedMode) {
        case R.id.action_list:
            title = "Mode List";
            showRecyclerList();
            break;
 
        case R.id.action_grid:
            title = "Mode Grid";
            showRecyclerGrid();
            break;
 
        case R.id.action_cardview:
            title = "Mode CardView";
            showRecyclerCardView();
            break;
    }
    setActionBarTitle(title);
}
Dan pada metode onCreate() tambahkan baris ini setActionBarTitle("Mode
List"); sebelum kita memanggil metode showRecyclerList(); untuk
mengganti title sejak pertama kali aplikasi dijalankan.
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    setActionBarTitle(title);
 
    ...
}
6. Jalankan kembali aplikasinya. Sekarang judul halaman akan berubah seiring
perubahan bentuk RecyclerView.