23

Modul

3
Layout Manager
Tujuan
Praktikan diharapkan dapat menggunakan Android Studio untuk membuat program sederhana pada
smartphone/ emulator. Di akhir praktikum ini, praktikan diharapkan:

• Memahami komponen Layout Manager pada Android Studio

• Menerapkan komponen Layout untuk membuat antarmuka sederhana

Persiapan
1. Buku ajar (jika ada)/diktat kuliah/materi dari sumber lain
2. Alat tulis
3. Kertas Buram
4. Lembar jawaban
5. Lembar penilaian (disiapkan oleh asisten)
6. Komputer yang sudah di-install Android Studio & Emulator didalamnya
7. Android Smartphone (Jika tidak menginstall emulator)

Materi Pokok
Praktikum ini mengasumsikan bahwa mahasiswa telah mempelajari tentang Layout
Manager pada android dengan benar beserta penggunaannya. Agar praktikan dapat mencapai tujuan
dalam pertemuan ini, praktikan harus aktif dalam membuat program dan menyelesaikan setiap kasus
serta mencoba mempraktekkan tugas-tugas dalam praktikum ini.
 24

Proses
Praktikan membuat sebuah project atau menyelesaikan sebuah studi kasus dengan memanfaatkan
Layout Manager dan bisa menggunakannya dalam Android Studio, kemudian berdiskusi sesuai
dengan panduan aktivitas yang ada. Sedangkan waktu untuk mengerjakan project (membuat
program/coding) secara individual harus diselesaikan di dalam laboratorium dalam waktu 40 menit.
Berikutnya untuk sesi latihan, ada soal tentang pengembangan program yang juga harus diselesaikan
di laboratorium dalam waktu 60 menit. Terakhir adalah bagian tugas, yaitu project yang dikerjakan
dirumah dan wajib dikumpulkan pada pertemuan berikutnya.

Aktivitas
1. Praktikan membaca buku ajar (jika ada)/diktat kuliah/materi dari sumber lain tentang Layout
Manager pada Android Studio sebagai materi modul ketiga. Temukan bagian penting dalam
topik ini, kemudian tulislah sebagai ringkasan hasil belajar.
2. Praktikan berdiskusi tentang Layout Manager, macam-macamnya dan penggunaannya dalam
Android Studio

3. Praktikan mempraktekkan aktivitas di bawah ini kemudian mendiskusikan hasilnya dengan

praktikan lain.

4. Berikut merupakan Langkah-langkah membuat sebuah projek android studio dengan layout
manager,

● Buat projek bari di Android Studio seperti biasanya

● Buatlah 2 class .java baru yaitu Users.java dan UserAdapter.java
● Buat juga list_users.xml didalam folder res/layout/
● Pertama, ubah dan sesuaikan kode di activity_main.xml menjadi seperti ini

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>

● Kedua, ubah dan sesuaikan kode di list_users.xml menjadi seperti ini

list_users.xml
<?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"
android:layout_width="match_parent"
 25

android:layout_height="wrap_content"
card_view:cardCornerRadius="6dp"
card_view:cardElevation="3dp"
card_view:cardUseCompatPadding="true">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical"
android:padding="5dp">

<!-- TextView Nama User -->

<TextView
android:id="@+id/txt_nama_user"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<!-- TextView Alamat User -->

<TextView
android:id="@+id/txt_alamat_user"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<!-- TextView Jenis Kelamin User -->

<TextView
android:id="@+id/txt_jk_user"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

</androidx.cardview.widget.CardView>

● Ketiga, sesuaikan kode pada Users.java menjadi seperti ini

Users.java

public class Users {

private String nama;
private String alamat;
private String jk;

public Users(String nama, String alamat, String jk) {

this.nama = nama;
this.alamat = alamat;
this.jk = jk;

public String getNama() {

return nama;
}

public void setNama(String nama) {

this.nama = nama;
}

public String getAlamat() {

return alamat;
}

public void setAlamat(String alamat) {

 26

this.alamat = alamat;
}

public String getJk() {

return jk;
}

public void setJk(String jk) {

this.jk = jk;
}
}

● Keempat, ubah dan sesuaikan kode pada UserAdapter.java menjadi seperti berikut

UserAdapter.java
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class UserAdapter extends RecyclerView.Adapter<UserAdapter.UserViewHolder> {

private ArrayList<Users> dataList;

public UserAdapter(ArrayList<Users> dataList) {

this.dataList = dataList;
}

@Override
public UserViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
View view = layoutInflater.inflate(R.layout.list_users, parent, false);
return new UserViewHolder(view);
}

@Override
public void onBindViewHolder(UserViewHolder holder, int position) {
holder.txtNama.setText(dataList.get(position).getNama());
holder.txtNpm.setText(dataList.get(position).getAlamat());
holder.txtNoHp.setText(dataList.get(position).getJk());
}

@Override
public int getItemCount() {
return (dataList != null) ? dataList.size() : 0;
}

public class UserViewHolder extends RecyclerView.ViewHolder{

private TextView txtNama, txtNpm, txtNoHp;

public UserViewHolder(View itemView) {

super(itemView);
txtNama = (TextView) itemView.findViewById(R.id.txt_nama_user);
txtNpm = (TextView) itemView.findViewById(R.id.txt_alamat_user);
txtNoHp = (TextView) itemView.findViewById(R.id.txt_jk_user);
}
}
}

● Kelima, ubah dan sesuaikan juga kode pada MainActivity.java menjadi seperti berikut
 27

MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private RecyclerView recyclerView;

private UserAdapter adapter;
private ArrayList<Users> userArrayList;

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

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

adapter = new UserAdapter(userArrayList);

RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(MainActivity.this);

recyclerView.setLayoutManager(layoutManager);

recyclerView.setAdapter(adapter);
}

void addData(){
userArrayList = new ArrayList<>();
userArrayList.add(new Users("Dimas Maulana", "Malang", "Pria"));
userArrayList.add(new Users("Elizabeth Yohana", "Jakarta", "Wanita"));
userArrayList.add(new Users("Budi Nugraha", "Batu", "Pria"));
userArrayList.add(new Users("Siti Siswana", "Surabaya", "Wanita"));
}
}

● Setelah semuanya telah selesai disesuaikan, buka file build.gradle level Module yang ada di
dalam folder Gradle Scripts.

● Lalu tambahkan 2 dependency berikut kedalam dependencies didalam file build.gradle

seperti berikut

Dependency baru :

implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.cardview:cardview:1.0.0'

Implementasi dependency baru :

 28

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.cardview:cardview:1.0.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

● Jalankan projek dan hasilnya akan menjadi seperti ini

 29

Latihan
Modifikasilah aplikasi dari aktivitas yang sudah dibuat dengan menambahkan Toast jika salah satu
list dipilih.

Toast akan menampilkan,

1. Nama
2. Umur
3. Alamat
4. Jenis Kelamin

Penutup
Tugas
Buatlah aplikasi baru dengan menerapkan RecycleView dengan menambahkan beberapa hal sebagai
berikut,
1. Tambahkan sebuah gambar didalam list RecycleView untuk masing" datanya
2. Bila sebuah list dipilih, user akan diarahkan ke halaman/layout detail dari list yang dipilih