Blog Tutorial Android Bagi Pemula

Tuesday, December 1, 2020

Menampilkan RecyclerView Dengan BottomSheetDialog Android

Untuk menampilkan BottomSheetDialog ini kita menggunakan library com.google.android.material:material:1.2.1 dan androidx.recyclerview:recyclerview:1.1.0 untuk RecyclerView. Pada tutorial kali ini, BottomSheetDialog akan menampilkan ViewGroup RecyclerView dengan item-tem artis (foto, nama, dan bio singkat ).




Baik, pertama-tama kita masukkan terlebih dahulu library implementation 'com.google.android.material:material:1.2.1' dan implementation 'androidx.recyclerview:recyclerview:1.1.0' kedalam dependencies pada file build.gradle(Module:app) kemudian sync gradle. Tentunya disini kita sudah memilik activity_main.xml sebagai default layout dan MainActivity.java sebagai default konteks saat membuat sebuah project baru.

Di dalam layout tersebut hanya akan ada sebuah tombol yang nantinya akan memunculkan BottomSheetDialog. Sekarang kita memerlukan sebuah layout file untuk menempatkan ViewGroup RecyclerView, juga sebuah layout sebagai custom layout item-item RecyclerView.



Untuk kedua layout tersebut kita berikan nama layout_bottomsheetdialog.xml dan item_container.xml. Dan berikut isi dari ketiga layout file tersebut.

activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context=".MainActivity">

<Button
android:id="@+id/btnPress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PRESS TO SHOW"
android:textSize="20sp"
android:fontFamily="serif"
android:textColor="@color/colorAccent"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

layout_bottomsheetdialog.xml :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/artistContainer"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="@+id/layoutHeader"
android:background="@color/colorPrimaryDark"
android:orientation="horizontal"
android:gravity="center_vertical"
android:padding="10dp">

<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/textName"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:ellipsize="end"
android:includeFontPadding="false"
android:fontFamily="serif"
android:text="Daftar Artist"
android:textStyle="bold"
android:maxLines="1"
android:textColor="@color/colorText"
android:textSize="20sp"/>

<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="@+id/imageClose"
android:contentDescription="@string/app_name"
android:layout_marginEnd="10dp"
android:padding="4dp"
android:src="@drawable/ic_close"
app:tint="@color/colorText" />

</LinearLayout>

<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/bottomRv"
android:clipToPadding="false"
android:orientation="vertical"
android:padding="10dp"
android:scrollbars="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>

</LinearLayout>

item_container.xml :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/colorPrimaryDark"
android:id="@+id/layoutRootContainer"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="10dp">

<ImageView
android:id="@+id/picLogo"
android:layout_height="130dp"
android:layout_width="100dp"
android:scaleType="centerCrop"
android:contentDescription="@string/app_name" />

<LinearLayout
android:background="@color/colorPrimaryDark"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="10dp">

<TextView
android:id="@+id/textName"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:fontFamily="serif"
android:includeFontPadding="false"
android:text="Text Name"
android:textStyle="bold"
android:textColor="@color/colorAccent"
android:textSize="18sp" />

<TextView
android:id="@+id/textBio"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:fontFamily="serif"
android:includeFontPadding="false"
android:text="Text Description"
android:textColor="@color/colorText"
android:textSize="12sp" />

</LinearLayout>

</LinearLayout>


Selanjutnya sebuah java class sebagai setter getter view-view pada item RecyclerView, dan sebuah java class adapter untuk RecyclerView. Untuk kedua file ini kita namakan Artist.java dan RecyclerViewAdapter.java. Berikut isi dari kedua file java ini :

Artist.java :
package com.gwnbs.bottomsheetdialog;

public class Artist {

private int photo;
private String name;
private String bio;

public Artist (int photo, String name, String bio) {
this.photo = photo;
this.name = name;
this.bio = bio;
}

public int getPhoto() {
return photo;
}

public String getName() {
return name;
}

public String getBio() {
return bio;
}
}

RecyclerViewAdapter.java :
package com.gwnbs.bottomsheetdialog;

import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

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

import java.util.List;

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ArtistViewHolder> {

private List<Artist> artists;
private Context context;

public RecyclerViewAdapter(List<Artist> artists, Context context) {
this.artists = artists;
this.context = context;
}

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

@NonNull
@Override
public ArtistViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new ArtistViewHolder(LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_container, parent, false));
}

@Override
public void onBindViewHolder(@NonNull final ArtistViewHolder holder, int position) {
Artist artist = artists.get(position);
holder.picLogo.setImageResource(artist.getPhoto());
holder.textName.setText(artist.getName());
holder.textBio.setText(artist.getBio());

holder.layoutRootContainer.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast toast = Toast.makeText(context, "Anda menyukai "
+ holder.textName.getText().toString(), Toast.LENGTH_LONG);
toast.setGravity(Gravity.CENTER,0,0);
toast.show();
}
});
}

static class ArtistViewHolder extends RecyclerView.ViewHolder {

ImageView picLogo;
TextView textName, textBio;
LinearLayout layoutRootContainer;

ArtistViewHolder(View itemView) {
super(itemView);
picLogo = itemView.findViewById(R.id.picLogo);
textName = itemView.findViewById(R.id.textName);
textBio = itemView.findViewById(R.id.textBio);
layoutRootContainer = itemView.findViewById(R.id.layoutRootContainer);
}

}

}


Terakhir di MainActivity.java, seluruh kode yang diperlukan untuk memunculkan BottomSheetDialog kita sematkan didalam metode klik listener pada tombol. Untuk item-item RecyclerView, dalam contoh ini hanya 6 item artis masing-masing dengan foto, nama, dan biography singkat.

Untuk foto dan bio singkat artis semua saya ambil dari wikipedia. Tombol dengan icon X pada layoutbottomsheet_dialog.xml kita gunakan untuk mendismiss atau menghilangkan BottomSheetDialog, dapat juga dilakukan dengan menarik kebawah layout_bottomsheetdialog nya.

Kemudian kita memberikan klik listener untuk root layout pada item_container.xml yaitu memunculkan toast message saja. Penerapan klik listener ini dilakukan didalam class RecyclerViewAdapter.java yang sudah ditampilkan sebelumnya diatas. Baik, berikut isi dari MainActivity.java :

MainActivity.java :
package com.gwnbs.bottomsheetdialog;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.bottomsheet.BottomSheetDialog;

import android.content.res.Resources;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private BottomSheetDialog bottomSheetDialog;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

findViewById(R.id.btnPress).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (bottomSheetDialog == null) {
bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
View v = inflater.inflate(R.layout.layout_bottomsheetdialog, (ViewGroup)
findViewById(R.id.artistContainer), false);
bottomSheetDialog.setContentView(v);

setRecyclerViewItem(v);

FrameLayout frameLayout = bottomSheetDialog.findViewById(com.google.android.material.R.id.design_bottom_sheet);
if (frameLayout != null) {
BottomSheetBehavior<FrameLayout> bottomSheetBehavior = BottomSheetBehavior.from(frameLayout);
bottomSheetBehavior.setPeekHeight(Resources.getSystem().getDisplayMetrics().heightPixels);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}

v.findViewById(R.id.imageClose).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
bottomSheetDialog.dismiss();
}
});
}
bottomSheetDialog.show();
}
});
}

private void setRecyclerViewItem(View v) {
RecyclerView bottomRecyclerView = v.findViewById(R.id.bottomRv);
List<Artist> artists = new ArrayList<>();
artists.add(new Artist(R.drawable.katty, "Katty Perry", "Lahir 25 Oktober 1984, dikenal secara profesional " +
"sebagai Katy Perry, adalah seorang penyanyi, penulis lagu dan juri televisi berkebangsaan Amerika Serikat."));
artists.add(new Artist(R.drawable.downey, "Robert Downey Jr.", "Lahir 4 April 1965, adalah seorang aktor Amerika. " +
"Kariernya sudah termasuk keberhasilan dan kepopuleran di masa mudanya, diikuti dengan penyalahgunaan zat terlarang " +
"dan masalah hukum, serta kesuksesannya pada usia remaja."));
artists.add(new Artist(R.drawable.sule, "Sutisna", "Lahir di Cimahi, 15 November 1976; umur 44 tahun, adalah seorang " +
"pelawak, pembawa acara, penyanyi, dan aktor berkebangsaan Indonesia. Ia dikenal karena kemampuannya membuat lelucon " +
"spontan yang responsif dan kreatif."));
artists.add(new Artist(R.drawable.islan, "Chelsea Elizabeth Islan", "Lahir di Washington, D.C., 2 Juni 1995; umur 25 tahun, " +
"merupakan seorang aktris berkebangsaan Indonesia. Dia telah bermain dalam beberapa film seperti Refrain, Street Society, Merry " +
"Riana: Mimpi Sejuta Dolar dan Dibalik 98. Dia juga bermain di serial televisi berjudul Tetangga Masa Gitu?"));
artists.add(new Artist(R.drawable.chris, "Chris Hemsworth", "Lahir di Melbourne, Australia, 11 Agustus 1983; umur 37 tahun, " +
"adalah aktor Australia. Ia dikenal atas perannya sebagai Thor dalam film-film Marvel Studios seperti Thor (2011), The Avengers (2012), " +
"dan Thor: The Dark World (2013)"));
artists.add(new Artist(R.drawable.agnez, "Agnes Monica Muljoto", "Lahir di Jakarta, 1 Juli 1986; umur 34 tahun, atau yang sekarang " +
"dikenal sebagai Agnez Mo, adalah seorang penyanyi dan artis berkebangsaan Indonesia. Ia memulai kariernya di industri hiburan pada usia " +
"enam tahun sebagai seorang penyanyi cilik."));
RecyclerViewAdapter recyclerViewAdapter = new RecyclerViewAdapter(artists, this);
bottomRecyclerView.setAdapter(recyclerViewAdapter);
}
}


Berikut juga untuk warna-warna yang digunakan dalam contoh ini.

colors.xml :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#141A31</color>
<color name="colorPrimaryDark">#081029</color>
<color name="colorAccent">#0097FB</color>
<color name="colorText">#C3CED3</color>
</resources>


Sekian turorial singkat ini. Terimakasih atas kunjungan dan waktunya, jika ada yang ingin disampaikan feel free untuk mempostingnya dikolom komentar.
Share:

0 comments:

Post a Comment

Hubungi Saya

Name

Email *

Message *

Berlangganan Artikel

Terlaris 30 Hari Terakhir