i

PEMROGRAMAN MOBILE ANDROID DENGAN JAVA

DESEMBER 2020

Penulis: Erma Susanti

HAK CIPTA DILINDUNGI UNDANG-UNDANG

ii
Erma Susanti Modul 2. Komponen-komponen Dasar Android
51
 BAB 3.

ANTARMUKA PENGGUNA DAN

PENGALAMAN PENGGUNA (UI/UX)

Kompetensi:

Setelah membaca pokok bahasan ini, mahasiswa diharapkan mampu:

1. Memahami konsep user interface dan user experience

2. Mempraktekkan pembuatan UI/UX ListView
3. Mempraktekkan pembuatan UI/UX RecyclerView

3.1. Konsep UI/UX

User Interface (UI) yaitu antarmuka pengguna dan User Experience

(UX) atau pengalaman pengguna adalah aspek penting dalam
mengembangkan sebuah aplikasi. Komponen penting dalam UI/UX
antara lain View, View Group, Style, Theme, RecyclerView, Action Bar,
Navigation, Localization.

View dan View Group

View dan View Group merupakan komponen inti dalam membuat

sebuah tampilan layout Android. View adalah obyek yang
menggambarkan komponen tampilan ke layar aplikasi pengguna.
Pengguna dapat berinteraksi secara langsung dengan menggunakan

Erma Susanti Modul 3. UI/UX

52
button, textview, edittext, checkbox, imageview, dll. ViewGroup adalah
sebuah obyek yang mewadahi obyek-obyek di dalam view seperti
LinearLayout, RelativeLayout, GridLayout, dll.

Style

Style berkaitan dengan sekumpulan property yang mendefinisikan

bagaimana komponen view dan jendela layar akan ditampilkan. Style
merupakan koleksi atribut yang mendefinisikan tampilan visual dari
View, mengurangi duplikasi, membuat kode lebih compact, dan dapat
mengatur tampilan visual dari banyak komponen dengan satu style.

Theme

Theme terkait dengan style yang dibuat khusus untuk activity dan
aplikasi pada file AndroidManifest.xml.

<application android:theme="@style/AppTheme">

Theme adalah style yang diaplikasikan pada activity yang ada atau
bahkan aplikasi yang ada.

Localization

Localization merupakan sebuah mekanisme aplikasi untuk dapat

menyesuaikan bahasa yang diatur oleh pengguna. Jika perangkat
menggunakan bahasa Inggris, maka konten aplikasi tampilannya
berbahasa Inggris.

Erma Susanti Modul 3. UI/UX

53
Toast

Toast merupakan pesan singkat tentang sebuah operasi melalui

jendela pop-up berukuran kecil pada aplikasi. Toast menghilang
otomatis setelah waktu tunggu habis.

Context context = getApplicationContext();

CharSequence text = "Hello toast!";
int duration = Toast.LENGTH_SHORT;

Toast toast = Toast.makeText(context, text, duration);

toast.show();

Posisi toast dapat diubah dengan method setGravity(int, int, int).

parameternya yaitu konstanta gravity, offset posisi x dan offset posisi y.

toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0);

Contoh:

Tambahkan properti pada button

android:onClick="showToast"

Pada activity java

public void showToast(View view) {

// Create a toast show it.
Toast toast = Toast.makeText(this,
R.string.toast_message, Toast.LENGTH_LONG);
toast.show();
}

Layout dan resource untuk User Interface

Apapun yang kita lihat pada layar merupakan view. Setiap elemen UI
yang kita lihat adalah view. Subclass dari view merupakan basic
building block dari UI yang terdiri dari class TextView, EditText, Button,
Menu, ScrollView, RecyclerView, ImageView, Group View

Erma Susanti Modul 3. UI/UX

54
(ContraintLayout, LinearLayout). Atribut view terdiri dari color, dimensi,
positioning, focus, interaktif (response user click), visible atau tidak, dll.
Beberapa jenis layout yang sering digunakan (Gambar 17) adalah
LinearLayout, ContraintLayout, GridLayout, dan TableLayout.

LinearLayout ConstraintLayout GridLayout TableLayout

Gambar 17. Jenis-jenis Layout

Erma Susanti Modul 3. UI/UX

55
Video-10 tentang ContraintLayout

https://youtu.be/KxVhbhka7_c

Erma Susanti Modul 3. UI/UX

56
3.2. Interaksi Pengguna

Pengguna berinteraksi dengan aplikasi dengan menekan atau klik,

mengetik, menggunakan gesture atau gerakan, dan berbicara. Selain
itu button juga dapat melakukan aksi. Elemen UI lain juga mengaktifkan
input data dan navigasi. Dalam mendesain interaksi pengguna, sangat
penting untuk memikirkan bagaimana pengguna akan menggunakan
aplikasi, meminimalisir langkah, menggunakan elemen UI yang mudah
diakses, dimengerti, dan dapat digunakan, mengikuti best practices,
dan sesuai dengan ekspektasi pengguna.

Penggunaan Button

Respon pada saat menekan button dapat menggunakan kode XML

atau kode Java dengan event listener OnClickListener.

a. Pada kode layout XML gunakan atribut android:onClick

<Button
android:id="@+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
android:onClick="sendMessage" />

b. Pada kode Java atur listener dengan onClick callback

Button button = findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Do something in response to button click
}
});

Erma Susanti Modul 3. UI/UX

57
Input Control

Komponen untuk input kontrol antara lain EditText, SeekBar,

CheckBox, RadioButton, Switch, Spinner. Cara input kontrol bekerja:

1. Gunakan EditText untuk menginput text menggunakan keyboard

2. Gunakan SeekBar untuk sliding left atau right untuk setting
3. Kombinasikan ChecBox untuk memilih lebih dari satu opsi
4. Kombinasikan RadioButton kedalam RadioGroup untuk membuat
hanya satu pilihan.
5. Gunakan Switch untuk menekan on atau off.
6. Gunakan Spinner untuk memilih single item dari list.

Menu dan Picker

Jenis-jenis menu (Gambar 18) antara lain:

1. App bar dengan option menu

2. Context menu
3. Contextual action bar
4. Popup menu

Gambar 18. Jenis-jenis Menu

Erma Susanti Modul 3. UI/UX

58
Jenis-jenis Dialog dan Pickers

1. Alert dialog (Gambar 19)

2. Date picker (Gambar 20 bagian kiri)
3. Time picker (Gambar 20 bagian kanan)

Gambar 19. Alert Dialog

Gambar 20. DatePickerDialog dan TimePickerDialog

Navigasi

Jenis-jenis navigasi terdiri dari:

1. Back navigation

Erma Susanti Modul 3. UI/UX

59
 Back navigation disediakan oleh perangkat dengan Back Button
atau dengan dikontrol oleh sistem Android back stack.
@Override
public void onBackPressed() {
// Add the Back key handler here.
return;
}

2. Hierarchical navigation
3. Navigation Drawer

3.3. Pengalaman Pengguna

Drawable

Drawable merupakan class Android yang digunakan untuk

merepresentasikan bermacam grafis. Semua drawable disimpan di
folder project res/drawable.

Image Asset Studio

Image asset Studio dapat:

a. Membuat icon dari material icon, image dan text.

b. Launcher, action bar, tab, dan notification icon
c. Menghasilkan set dari icon untuk berbagai ukuran layar.
d. Disimpan dalam folder /res

Untuk menggunakan Image Asset Studio:

1. Klik kanan pada folder project res

2. Pilih New > Image Aset.

Erma Susanti Modul 3. UI/UX

60
Vector Asset Studio

Apakah yang dapat dilakukan dengan Vector Asset Studio:

a. Membuat icon dari material icon atau menyediakan gambar

vektor dari API 21 dan setelahnya
b. Launcher, action bar, tab, notificatio icon
c. Menghasilkan gambar vektor yang skalabel
d. Disimpan di folder res

Untuk menggunakan Vector Asset Studio:

1. Klik kanan pada folder project res

2. Pilih New > Vector Asset.

3.4. RecyclerView

RecyclerView merupakan komponen untuk menampilkan kumpulan

data yang lebih fleksibel dan efisien dibandingkan pendahulunya
ListView.

Contoh Program dengan RecyclerView

Activity_main.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"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity">

Erma Susanti Modul 3. UI/UX

61
 <androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_book"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="237dp"
tools:layout_editor_absoluteY="247dp"
tools:listitem="@layout/item_list_book" />
</RelativeLayout>

item_list_book.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">

<ImageView
android:id="@+id/imagePhoto"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.056"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.048"
tools:ignore="ContentDescription"
tools:srcCompat="@tools:sample/avatars" />

<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="@string/title"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="@+id/imagePhoto"
app:layout_constraintTop_toTopOf="@+id/imagePhoto"
/>

<TextView
android:id="@+id/tvAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"

Erma Susanti Modul 3. UI/UX

62
 android:layout_marginTop="8dp"
android:text="@string/author"
app:layout_constraintStart_toEndOf="@+id/imagePhoto"
app:layout_constraintTop_toBottomOf="@+id/tvTitle"
/>

<TextView
android:id="@+id/tvDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:maxLines="3"
android:text="@string/description"
app:layout_constraintStart_toEndOf="@+id/imagePhoto"
app:layout_constraintTop_toBottomOf="@+id/tvAuthor"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

strings.xml

<resources xmlns:tools="http://schemas.android.com/tools">
<string name="app_name">ProjectRecyclerView</string>
<string name="title">tvTitle</string>
<string name="author">tvAuthor</string>
<string name="description">tvDesc</string>

<string-array name="data_title">
<item>Sebuah Seni untuk Bersikap Bodo Amat</item>
<item>Nanti Kita Cerita Tentang Hari Ini</item>
<item>Detektif Conan 96</item>
<item>The Life Changing Magic Of Tidying Up</item>
<item>Dilan 2: Dia Adalah Dilanku Tahun 1991</item>
</string-array>

<string-array name="data_author">
<item>Mark Manson</item>
<item>Marchella Fp</item>
<item>Aoyama Gosho</item>
<item>Marie Kondo</item>
<item>Pidi Baiq</item>
</string-array>

<string-array name="data_description">
<item>"Selama beberapa tahun belakangan, Mark
Manson—melalui blognya yang sangat popular telah membantu
mengoreksi harapan-harapan delusional kita, baik mengenai
diri kita sendiri maupun dunia. Ia kini menuangkan buah

Erma Susanti Modul 3. UI/UX

63
pikirnya yang keren itu di dalam buku hebat ini.
“Dalam hidup ini, kita hanya punya kepedulian
dalam jumlah yang terbatas. Makanya, Anda harus bijaksana
dalam menentukan kepedulian Anda.” Manson menciptakan momen
perbincangan yang serius dan mendalam, dibungkus dengan
cerita-cerita yang menghibur dan “kekinian”, serta humor
yang cadas. Buku ini merupakan tamparan di wajah yang
menyegarkan untuk kita semua, supaya kita bisa mulai
menjalani kehidupan yang lebih memuaskan, dan apa
adanya."</item>
<item>"Nanti kita cerita tentang hari ini.. Besok
kita buat yang lebih baik lagi." @nkcthi
Buku visual grafis, yang menceritakan tentang
perempuan bernama Awan (27th) yang takut akan lupa rasanya
menjadi muda, jadi dia membuat surat yang dia kirim untuk
masa depan. Sebagai pengingat untuk dia dan anaknya kelak.
Berisikan kumpulan pesan dan cerita dari yang ia
hadapi dan lihat. Awan mencoba sederhanakan dari pelajaran
yang dia hadapin di masa mudanya.</item>
<item>Pertama kalinya Heiji Hattori berhadapan
dengan si Kid Pencuri yang mengincar "Fairy Lip "! Di kasus
lain Makoto Kyogoku terlibat dalam insiden di lokasi syuting
TV drama. . . ! ? Selanjutnya ada informasi baru terkuaknya
bos Organisasi Baju Hitam!!</item>
<item>#1 New York Times best seller dan telah
terjual lebih dari 5 Juta Kopi
“Marie Kondo telah memosisikan diri sebagai
seorang master berbenah, kesatria yang berperang melawan
situasi berantakan.”—The London Times
Walaupun sudah susah payah merapikan rumah,
apakah kertas-kertas terus saja bertumpuk dan pakaian harus
terus Anda jejal-jejalkan di lemari? Kenapa kita tidak bisa
menjaga kerapian rumah?
Konsultan berbenah asal Jepang, Marie Kondo,
memperkenalkan metode merapikan yang ampuh tiada duanya,
KonMari. Keampuhan metode yang kini semakin marak diterapkan
di Jepang dan telah dikemas dalam program televisi laris,
Tidy Up with KonMari! ini, telah menular ke seluruh dunia.
Saking ampuhnya, tak seorang pun klien Kondo kembali ke
kebiasaan berantakan (dan calon kliennya harus masuk daftar
tunggu selama tiga bulan).
Beruntunglah, melalui buku ini Anda
berkesempatan:
• Menjadi klien jarak jauh Kondo, menentukan
barang-barang mana saja di rumah Anda yang “membangkitkan
kegembiraan” dan mana yang tidak.
• Memulai kebiasaan berbenah yang efektif dengan
sistem berbenah berdasarkan kategori.
• Membabat habis situasi berantakan, hingga

Erma Susanti Modul 3. UI/UX

64
menikmati efek ajaib dari rumah yang rapi—beserta pikiran
damai yang mengikutinya.
</item>
<item>"Tujuan pacaran adalah untuk putus. Bisa
karena menikah, bisa karena berpisah." Pidi Baiq (1972-2098)
“Jika aku berkata bahwa aku mencintainya, maka
itu adalah sebuah pernyataan yang sudah cukup lengkap.”—
Milea
“Senakal-nakalnya anak geng motor, Lia, mereka
shalat pada waktu ujian praktek Agama.”—Dilan</item>
</string-array>

<string-array name="data_photo">

<item>https://cdn.gramedia.com/uploads/items/9786024526986_S
ebuah-Seni-Untuk-Bersikap-Bodo-Amat__w150_hauto.jpg</item>

<item>https://cdn.gramedia.com/uploads/items/9786024248215_N
anti-Kita-Cerita-Tentang-Hari-Ini__w150_hauto.jpg</item>

<item>https://cdn.gramedia.com/uploads/items/9786230005879_C
ov_Conan_96__w150_hauto.jpg</item>

<item>https://cdn.gramedia.com/uploads/items/9786022912446_T
he-Life-Changing-Magic-Of-Tidying-Up__w149_hauto.jpg</item>

<item>https://cdn.gramedia.com/uploads/items/9786027870994_d
ilan-1991__w149_hauto.jpg</item>
</string-array>
</resources>

book.java

package ermaweb.com.projectrecyclerview.model;

import android.os.Parcel;
import android.os.Parcelable;

public class Book implements Parcelable {

private String title, description, author, photo;

public String getTitle() {

return title;
}

public void setTitle(String title) {

this.title = title;
}

Erma Susanti Modul 3. UI/UX

65
 public Book() {
}

public String getDescription() {

return description;
}

public void setDescription(String description) {

this.description = description;
}

public String getAuthor() {

return author;
}

public void setAuthor(String author) {

this.author = author;
}

public String getPhoto() {

return photo;
}

public void setPhoto(String photo) {

this.photo = photo;
}

public static Creator<Book> getCREATOR() {

return CREATOR;
}

protected Book(Parcel in) {

title = in.readString();
description = in.readString();
author = in.readString();
photo = in.readString();
}

public static final Creator<Book> CREATOR = new

Creator<Book>() {
@Override
public Book createFromParcel(Parcel in) {
return new Book(in);
}

@Override
public Book[] newArray(int size) {
return new Book[size];
}

Erma Susanti Modul 3. UI/UX

66
 };

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

@Override
public void writeToParcel(Parcel dest, int flags) {
dest.writeString(title);
dest.writeString(description);
dest.writeString(author);
dest.writeString(photo);
}
}

ListBookAdapter.java

package ermaweb.com.projectrecyclerview.adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;

import java.util.ArrayList;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import ermaweb.com.projectrecyclerview.R;
import ermaweb.com.projectrecyclerview.model.Book;

public class ListBookAdapter extends

RecyclerView.Adapter<ListBookAdapter.ListViewHolder> {
private final ArrayList<Book> listBook;
private OnItemClickCallback onItemClickCallback;

public void setOnItemClickCallback(OnItemClickCallback

onItemClickCallback) {
this.onItemClickCallback = onItemClickCallback;
}

public ListBookAdapter(ArrayList<Book> listBook) {

this.listBook = listBook;
}

Erma Susanti Modul 3. UI/UX

67
 @NonNull
@Override
public ListViewHolder onCreateViewHolder(@NonNull
ViewGroup parent, int viewType) {
View view =
LayoutInflater.from(parent.getContext()).inflate(R.layout.it
em_list_book, parent, false);
return new ListViewHolder(view);
}

@Override
public void onBindViewHolder(@NonNull ListViewHolder
holder, int position) {
Book book = listBook.get(position);

Glide.with(holder.itemView.getContext())
.load(book.getPhoto())
.apply(new RequestOptions().override(300,
300))
.into(holder.imgPhotoBook);
holder.tvTitle.setText(book.getTitle());
holder.tvAuthor.setText(book.getAuthor());
holder.tvDesc.setText(book.getDescription());
holder.itemView.setOnClickListener((v -> {

onItemClickCallback.onItemClicked(listBook.get(holder.getAda
pterPosition()));
}));
}

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

public class ListViewHolder extends

RecyclerView.ViewHolder {
ImageView imgPhotoBook;
TextView tvTitle, tvAuthor, tvDesc;
public ListViewHolder(@NonNull View itemView) {
super(itemView);
imgPhotoBook =
itemView.findViewById(R.id.imagePhoto);
tvTitle = itemView.findViewById(R.id.tvTitle);
tvAuthor = itemView.findViewById(R.id.tvAuthor);
tvDesc = itemView.findViewById(R.id.tvDesc);
}

Erma Susanti Modul 3. UI/UX

68
 }

public interface OnItemClickCallback {

void onItemClicked(Book data);
}
}

MainActivity.java

package ermaweb.com.projectrecyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import
ermaweb.com.projectrecyclerview.adapter.ListBookAdapter;
import ermaweb.com.projectrecyclerview.model.Book;

import android.os.Bundle;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private RecyclerView rvBook;
private final ArrayList<Book> list = new ArrayList<>();

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

rvBook = findViewById(R.id.rv_book);
rvBook.setHasFixedSize(true);

list.addAll(getList());
showRecyclerList();
}

private void showRecyclerList() {

rvBook.setLayoutManager(new
LinearLayoutManager(this));
ListBookAdapter listBookAdapter = new
ListBookAdapter(list);
rvBook.setAdapter(listBookAdapter);

listBookAdapter.setOnItemClickCallback((data)->{

Erma Susanti Modul 3. UI/UX

69
 showSelectedBook(data);
});
}

private void showSelectedBook(Book book) {

Toast.makeText(this,book.getTitle(),
Toast.LENGTH_SHORT).show();

public ArrayList<Book> getList() {

String[] dataTitle =
getResources().getStringArray(R.array.data_title);
String[] dataAuthor =
getResources().getStringArray(R.array.data_author);
String[] dataDesc =
getResources().getStringArray(R.array.data_description);
String[] dataPhoto =
getResources().getStringArray(R.array.data_photo);

ArrayList<Book> listBook = new ArrayList<>();

for (int i = 0; i<dataTitle.length; i++){
Book book = new Book();
book.setTitle(dataTitle[i]);
book.setAuthor(dataAuthor[i]);
book.setDescription(dataDesc[i]);
book.setPhoto(dataPhoto[i]);

listBook.add(book);

}
return listBook;
}
}

Erma Susanti Modul 3. UI/UX

70
Video-11 Belajar RecyclerView

https://youtu.be/3dHUDBg6j5A

Erma Susanti Modul 3. UI/UX

71
https://youtu.be/032sIsLrdQA

Erma Susanti Modul 3. UI/UX

72
 DAFTAR PUSTAKA

Developers, Google. https://developer.android.com/ (diakses

November 2020)

Developers, Google.
https://developers.google.com/certification/associate-android-
developer/study-guide (diakses November 2020)

Developers, Google. Android Developer Fundamental Version 2,

https://developer.android.com/courses/fundamentals-
training/overview-v2?authuser=1 (diakses November 2020)

Google Developer Training Team. 2016. Practical Workbook, Android

Developer Fundamentals Course Learn to develop Android
Applications, https://google-developer-training.github.io/android-
developer-fundamentals-course-concepts/idn/android-developer-
fundamentals-course-concepts-idn.pdf

Griffiths, Dawn & Griffiths, David, Head First Android Development,

2nd Edition, O’Reilly Media, Inc, 2017

Hamzah, Amir & Susanti, Erma. 2018. Modul Praktikum Pemrograman

Mobile dengan Android. AKPRIND PRESS.

Imaduddin, Ahmad & Permana, Sidiq. 2017. Menjadi Android

Developer Expert Seri Android Associate. Bandung. PT.
Presentalogics

145
Smyth, Neil. 2016. Android Studio Development Essentials – Android
7 Edition,
https://www.ebookfrenzy.com/pdf_previews/AndroidStudioEssenti
alsA7Preview.pdf

Susanti, Erma. 2017. https://ermaweb.com/2017/11/29/membuat-

project-firebase-realtime-database-crud-untuk-android-app/
(diakses November 2020)

146
147