Tutorial Membuat Material3 Carousel di Android

Last Updated on 5 months by Mas Herdi

Halo semuanya, setelah hiatus beberapa tahun akhirnya saya kembali nulis tutorial Android lagi. Ternyata setelah sekitar 5 tahunan tidak mendalami Android ada banyak sekali hal yang berubah. Nanti coba saya ulas, tapi kali ini kita akan belajar membuat Carousel Material3 di Android (Java).

Belajar Membuat Material3 Carousel di Android

Komponen Carousel di Material3 ini agak berbeda dengan sebelumnya, karena di Material3 Carouselnya terlihat lebih smooth dan animasinya lebih bagus.

Android Carousel Example

Langsung saja kita mulai dengan membuat file XML nya, activity_carousel.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CarouselActivity">

    <include
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/view_toolbar" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar"
        android:layout_marginTop="10sp"
      app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager" />
</RelativeLayout>

Underlying dari Android Carousel adalah RecyclerView yang ada CarouselLayoutManager-nya.

Setelah itu kita juga perlu membuat Adapter-nya. Pertama-tama kita buat tampilan Layout Adapter dari Carousel ini dulu, buat view xml view_crsl_item.xml :

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.carousel.MaskableFrameLayout android:id="@+id/carousel_item_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="4dp"
    android:foreground="?attr/selectableItemBackground"
    app:shapeAppearance="?attr/shapeAppearanceCornerExtraLarge"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:id="@+id/list_item_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="image"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"/>

</com.google.android.material.carousel.MaskableFrameLayout>

Setelah itu kita buat file Adapter Javanya, dengan nama file CarouselAdapter.java:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

import id.web.twoh.coolandroiddesign.R;

public class CarouselAdapter extends RecyclerView.Adapter<CarouselAdapter.ViewHolder> {
    Context context;
    ArrayList<Integer> arrayList;
    OnItemClickListener onItemClickListener;

    public CarouselAdapter(Context context, ArrayList<Integer> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }

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

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.imageView.setImageResource(arrayList.get(position));
        holder.itemView.setOnClickListener(view -> onItemClickListener.onClick(holder.imageView, arrayList.get(position)));
    }

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

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.list_item_image);
        }
    }

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    public interface OnItemClickListener {
        void onClick(ImageView imageView, Integer path);
    }
}

Setelah itu kita langsung buat file Activity-nya, bernama CarouselActivity.java, isinya sebagai berikut:

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.ImageView;

import androidx.appcompat.app.ActionBar;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

import id.web.twoh.coolandroiddesign.adapter.CarouselAdapter;
import id.web.twoh.coolandroiddesign.utils.Factory;

public class CarouselActivity extends BaseAdsActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_carousel);
        super.onCreate(savedInstanceState);
        RecyclerView recyclerView = findViewById(R.id.recycler);
        ArrayList<Integer> arrayList = new ArrayList<>();

        //Tambahkan gambarmu di sini
        arrayList.add(R.drawable.bg_draw_palette);
        arrayList.add(R.drawable.bg_bawah);
        arrayList.add(R.drawable.bg_switch);
        arrayList.add(R.drawable.bg_navview);
        arrayList.add(R.drawable.bg_face);
        arrayList.add(R.drawable.bg_lena);
        arrayList.add(R.drawable.bg_sheryl);
        arrayList.add(R.drawable.bg_switch2);
        arrayList.add(R.drawable.bg_yellow);

        CarouselAdapter adapter = new CarouselAdapter(this, arrayList);
        recyclerView.setAdapter(adapter);

        adapter.setOnItemClickListener(new CarouselAdapter.OnItemClickListener() {
            @Override
            public void onClick(ImageView imageView, Integer path) {
                // tambahkan method yang akan dipanggil ketika Carousel diklik
            }
        });
    }
}

That’s all, untuk importnya sendiri seharusnya Android Studio secara otomatis mengimport packages yang dibutuhkan di build.gradle. Seingat saya yang penting adalah import berikut:

implementation 'com.google.android.material:material:1.12.0'

Untuk source code lengkapnya, kalian bisa cek di GitHub saya.

Untuk Demo Appnya, silahkan download di PlayStore ya.





Download aplikasi kami di Google Play Store


Tutorial Menarik Lainnya :

Leave a Reply

Your email address will not be published. Required fields are marked *

TWOH&Co.