Last Updated on 2 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.
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.
