Modul 3: UI Widget

3.1. Waktu Pelaksanaan Praktikum

Durasi kegiatan praktikum = 170 menit, dengan rincian sebagai berikut:
a. 15 menit untuk pengerjaan Tes Awal atau wawancara Tugas Pendahuluan
b. 60 menit untuk penyampaian materi
c. 45 menit untuk pengerjaan jurnal, tes akhir atau tugas
d. 50 menit Pengayaan

3.2. Tujuan:
1. Praktikan dapat memahami Android Lifecycle
2. Praktikan dapat memahami dan membuat UI Android menggunakan layout, text,
dan button
3. Praktikan dapat memahami dan mampu mengimplementasikan fragment di
aplikasi Android

3.3. Alat & Bahan:

1. Laptop/pc
2. HP Android/Android Virtual Device

3.4. Dasar Teori

1. Android Studio
Android adalah sebuah sistem operasi untuk perangkat mobile berbasis linux
yang mencakup sistem operasi, middleware dan aplikasi. Setiap project di
Android Studio berisi struktur folder project, antara lain :
a. Android Manifest
Komponen dan setelan aplikasi Android dijelaskan dalam file
AndroidManifest.xml. File ini dikenal sebagai manifest file atau manifest.
Manifest juga menentukan metadata tambahan untuk aplikasi tersebut,
misalnya ikon dan nomor versi aplikasi. File ini dibaca oleh sistem Android
selama instalasi aplikasi
b. Java
Berisi file kode sumber Java, termasuk kode pengujian JUnit
c. Resource
Android memungkinkan untuk membuat ​resource ​statis seperti gambar dan
file konfigurasi XML. Hal ini memungkinkan untuk memisahkan ​resource ini
dari kode sumber aplikasi Android. Terdapat beberapa sub folder bergantung
pada jenis ​resource yang disimpan, antara lain drawable, layout, mipmap,
dan values
d. Gradle
Android tools menggunakan Gradle sebagai build automation system.
Android menyediakan Gradle plug-in untuk build Android application dalam
file build.gradle.
2. Android Activity
Class Activity adalah komponen penting aplikasi Android, dan cara aktivitas
diluncurkan dan disatukan adalah bagian mendasar dari model aplikasi platform.
Tidak seperti pemrograman lain di mana aplikasi diluncurkan dengan metode
main(), sistem Android memulai kode dalam instance Activity dengan memanggil
metode callback tertentu yang sesuai dengan tahapan tertentu dari siklus
prosesnya. Activity memiliki siklus hidup (life cycle) yang merupakan kondisi yang
akan dialami saat diciptakan sampai dihancurkan. Ada beberapa kondisi yang
akan dialami oleh Activity seperti yang tergambar pada flowchart berikut ini.

3. Android Fragments
Android Fragment adalah sebuah bagian dari user interface di sebuah
FragmentActivity. Fragment dapat digunakan berkali-kali di activity yang berbeda.
Fragment dapat dibayangkan sebagai sebuah bagian activity yang bersifat
modular. Sebuah fragment harus berada di dalam sebuah activity. Karena,
lifecycle dari fragment dipengaruhi oleh lifecycle activity yang ditunggangi.
Sebagai contoh, ketika sebuah activity di-pause, maka semua fragment di
dalamnya akan ikut ter-pause. Tentu saja, seperti halnya pada activity, fragment
juga memiliki life cycle (yang tidak jauh berbeda).
3.5. Prosedur Praktikum:
1. Activity Lifecycle
1.1. onCreate()
onCreate(Bundle) merupakan sebuah method yang akan
menginisialisasi sebuah activity. Pada onCreate ini juga biasanya akan
dipanggil setContentView(int) untuk menyambungkan UI yang sudah dibuat,
kemudian menggunakan findViewById(int) untuk memanggil atau berinteraksi
dengan widget yang terletak pada UI tersebut. Berikut contoh syntax
onCreate():

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
findViewById<TextView>(R.id.helloworld_text)
.setText("Ini bukan hello world")
}
}

1.2. onStart()
OnStart() merupakan method yang dipanggil saat aktivitas memasuki
status dimulai, dimana sudah terlihat aktivitas oleh pengguna yaitu pada saat
aplikasi mempersiapkan aktivitas untuk memasuki latar depan dan menjadi
interaktif atau dapat dikatakan sebagai tempat aplikasi menginisialisasi kode
yang mengelola UI. Saat aktivitas berpindah ke status dimulai, komponen
berbasis siklus proses apapun yang terkait dengan siklus proses aktivitas
akan menerima peristiwa ON_START. Method onStart() berjalan sangat
cepat, setelah callback ini selesai, aktivitas akan memasuki status dilanjutkan
atau memanggil method onResume().

Class MainActivity : AppCompatActivity(){

override fun onCreate(savedInstanceState: Bundle?){

super.onCreate(savedInstanceState)
setContentView(R.layout.​activity_main​)
}

override fun onStart(){

super.onStart()
findViewById<TextView>(R.id.helloworld_text).setText("Acti
vity sudah pernah melewati onStart()")
}
}

1.3. onResume()
onResume() adalah method yang dipanggil saat berinteraksi dengan
pengguna. Activity akan tetap dalam onResume() sampai terjadi sesuatu
yang mengambil fokus aplikasi seperti menerima panggilan telepon,
pengguna beralih ke aktivitas lain, atau layar perangkat mati.
Saat aktivitas berpindah ke status dilanjutkan, maka akan menerima peristiwa
ON_RESUME​. Di sinilah komponen siklus proses dapat mengaktifkan fungsi
apa pun yang perlu dijalankan saat komponen terlihat dan berada di latar
depan. Jika aktivitas dihentikan atau dijeda, maka akan masuk onPause()
dan ketika kembali method ​onResume() sekali lagi. Untuk alasan ini, Anda
harus menerapkan ​onResume() untuk menginisialisasi komponen yang dirilis
selama ​onPause()​, dan melakukan inisialisasi lainnya yang harus terjadi
setiap kali aktivitas memasuki status dilanjutkan.

Class MainActivity : AppCompatActivity(){

override fun onCreate(savedInstanceState: Bundle?){

super.onCreate(savedInstanceState)
setContentView(R.layout.​activity_main​)
}
 override fun onResume(){
super.onResume()
findViewById<TextView>(R.id.helloworld_text).setText("​"Act
ivity sudah pernah melewati onResume()​")
}
}

1.4. onPause()
State onPause() merupakan tempat terjadinya handling ketika
pengguna mem-pause interaksi dari activity. State ini terjadi jika ada activity
lain yang mengambil fokus, dan berada sebelum onResume() (jika nanti
melanjutkan penggunaan) atau onStop() (jika activity tidak digunakan lagi).
Perubahan yang dilakukan oleh pengguna di aplikasi harus di-commit ketika
titik ini dicapai. Di state ini, activity masih dapat dilihat di layar. Contoh
onPause adalah ketika aplikasi yang sedang dibuka, dan pengguna menekan
tombol “recent apps”. Kondisi activity pada keadaan ini dapat dikatakan
sudah memasuki onPause().

class MainActivity : AppCompatActivity() {

lateinit var tv_onpause: TextView

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
tv_onpause = findViewById(R.id.textview)
Tv_onpause.text = "Activity is active!"

override fun onPause() {

super.onPause()
tv_onpause.text = "Activity sudah pernah melewati
onPause()"
}
}

<?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"
tools:context=".MainActivity">

<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit this text!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
 </androidx.constraintlayout.widget.ConstraintLayout>

1.5. onStop()
Callback onStop() merupakan handling dimana aktivitas pengguna
tidak lagi berinteraksi dengan aplikasi. Saat aktivitas beralih ke status
berhenti, maka siklus proses yang terkait dengan siklus proses aktivitas akan
menerima event ON_STOP. Pada event tersebut siklus proses dapat
menghentikan fungsi apa pun yang tidak perlu dijalankan saat komponen
tidak terlihat di layar. Biasanya callback tersebut akan dipanggil disaat
pengguna menekan tombol Home.

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

override fun onStop() {

super.onStop()
findViewById<TextView>(R.id.helloworld_text)
.setText("Activity sudah pernah melewati
onStop()")
}
}
 1.6. onDestroy()
onDestroy() adalah sebuah final call yang dipanggil saat aplikasi
diakhiri (melalui tombol kembali), mengalami rotasi atau ​force stop.​ Ketika
pengguna kembali kepada aplikasi, maka action yang dipanggil adalah
onCreate(). onDestroy() dibutuhkan sebagai bentuk implementasi
pembersihan proses-proses yang terjadi di layar belakang. Dalam kasus lain,
onDestroy() berperan dalam penghancuran pembersihan alokasi memori
untuk aplikasi.

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

override fun onDestroy() {

super.onDestroy()
findViewById<TextView>(R.id.tv_hello).text = "Telah
Melewati onDestroy()"
Log.i("MainActivity", "onDestroy()")
}
}

2. Layout
Layout menentukan struktur untuk antarmuka pengguna di aplikasi Anda,
seperti di dalam aktivitas. Semua elemen pada layout dibuat menggunakan hirarki
objek View dan ViewGroup. View biasanya menggambar sesuatu yang pengguna
bisa melihat dan berinteraksi dengannya. Sedangkan ViewGroup adalah container
yang tidak terlihat yang menentukan struktur layout untuk View dan objek
ViewGroup lainnya.
Objek View biasanya disebut "widget" dan dapat menjadi salah satu dari
banyak subclass, seperti Button atau TextView. Objek ViewGroup biasanya
disebut "layout" yang bisa menjadi salah satu dari banyak tipe yang menyediakan
struktur layout yang berbeda, seperti LinearLayout atau ConstraintLayout .

2.1. Constraint Layout

ConstraintLayout memungkinkan Anda membuat tata letak yang
kompleks dan besar dengan hierarki tampilan datar (tidak ada kelompok
tampilan bertingkat). Anda dapat membuat tata letak menggunakan
ConstraintLayout sepenuhnya dengan menarik lalu melepas (drag and drop)
dan tanpa mengedit XMLnya.

Untuk membuat layout baru yang memiliki root ConstraintLayout, Anda bisa:
a. menuju menu File>New>Layout Resource File
b. Isikan file name sesuai yang anda inginkan (hanya bisa a-z, 0-9, dan
underscore)
c. Untuk root element nya isikan
“​androidx.constraintlayout.widget.ConstraintLayout​”
d. Klik Finish

Untuk menambahkan widget pada ConstraintLayout:

a. Seret widget yang diinginkan dari Palette yang terletak pada Design

b. Tentukan constraint dari widget tersebut baik secara horizontal maupun

vertikal (minimal 2 constraint; 1 horizontal dan 1 vertikal) dengan cara
menekan tombol + dan tentukan jarak constraint tersebut
c. Untuk membuat widget tersebut berada pada tengah layar, pastikan
semua constraint terisi dengan nilai yang sama pada kedua arah yang
berlawanan seperti yang ditunjukkan pada gambar
d. Constraint nya sendiri dapat ditujukan ke parent maupun ke widget
lainnya seperti pada contoh dibawah. Untuk membuatnya harus
membuka XML nya (dapat dengan split ataupun code) dan "parent"
diganti dengan “@id/[id-widget-yang-diinginkan]”
2.2. Linear Layout
LinearLayout adalah sekelompok tampilan yang menyejajarkan
semua anak dalam satu arah, secara vertikal atau horizontal. Anda bisa
menentukan arah layout dengan atribut android:orientation.

Untuk membuat layout baru yang memiliki root LinearLayout, Anda bisa:
a. menuju menu File>New>Layout Resource File
b. Isikan file name sesuai yang anda inginkan (hanya bisa a-z, 0-9, dan
underscore)
c. Untuk root element nya isikan “​LinearLayout​”
d. Klik Finish

Untuk menambahkan widget pada LinearLayout:

a. Seret widget yang diinginkan dari Palette yang terletak pada Design
b. Secara default widget yang dimasukkan memiliki lebar penuh mengikuti
layoutnya

c. Untuk mengubah lebar dari Button tersebut, dapat menuju Code/Split dan
ubah ​android:layout_width​ menjadi ​wrap_content

d. Apabila ditambahkan widget lagi, maka widget tersebut akan tersusun

mengikuti orientation dari LinearLayout nya

e. Untuk memindahkan secara horizontal, ubah android:orientation menjadi

horizontal

f. Untuk menambahkan lebih dari satu orientasi, anda dapat menambahkan

LinearLayout lagi sehingga menjadi seperti ini

activity_main.xml

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

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
 android:gravity="center_horizontal"
android:orientation="horizontal">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
3. Text

Text merupakan salah satu widget antarmuka pengguna yang berfungsi

untuk menampilkan teks pada aplikasi android. Terdapat dua elemen di dalamnya
yaitu TextView dan EditText. Terdapat beberapa jenis Text yang dapat ditambahkan,
diantaranya adalah plain text, password, e-mail, dan lain-lain. Berikut ini adalah
penjelasan dari masing-masing elemen.

3.1. TextView
TextView adalah subkelas dari kelas View yang merupakan elemen
antarmuka pengguna yang berfungsi untuk menampilkan teks di layar. Anda
dapat mengontrol bagaimana teks muncul dengan atribut TextView pada file
layout XML. Penambahan TextView dapat dilakukan dengan cara drag and
drop dari menu Palette.

Untuk mengedit TextView dapat dilakukan dengan dua acara,

pertama adalah melalui Attributes dan kedua adalah melalui kode pada file
XML. Pada menu Attributes dapat langsung mengubah ID dari elemen sesuai
dengan yang Anda inginkan, kemudian untuk mengganti isi TextView dapat
melalui kolom text.

Banyak atribut lain yang dapat disesuaikan dengan kebutuhan

implementasi teks pada layar seperti ukuran teks, warna teks, jenis font, dan
lainnya ditemukan pada menu Attributes.
 activity_main.xml

<TextView
android:id="@+id/txtWelcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Selamat Datang"
tools:layout_editor_absoluteX="156dp"
tools:layout_editor_absoluteY="356dp" />

3.2. Linear Layout

EditText merupakan salah satu elemen antarmuka pengguna yang

berfungsi untuk memasukkan atau menginputkan dan memodifikasi teks.
Saat mendefinisikan widget untuk mengedit teks, Anda harus menentukan
​ .styleable.TextView_inputType​. Jenis data yang ditempatkan
atribut R
pada text fields, digunakan untuk membantu metode dalam memutuskan cara
pengguna memasukkan teks. EditText dapat ditambahkan ke dalam layout
dengan kode seperti berikut:

activity_main.xml

<EditText
android:id="@+id/plain_text_input"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="text"/>

Apabila digunakan untuk mengedit teks yang telah dilakukan pada

penjelasan TextView, maka Anda dapat mengubah kode menjadi seperti
berikut:

activity_main.xml

<EditText
android:id="@+id/txtWelcome"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="text"
android:text="Silahkan datang kembali"/>
4. Button
Button atau yang biasa dikenal sebagai tombol merupakan widget yang
biasanya memiliki fungsi untuk melakukan perintah tertentu. Button terdiri dari teks
dan icon. Untuk membuat widget button anda dapat membuka file
activity_main.xml dan tambahkan kode xml dibawah ini:

activity_main.xml

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

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">

<Button
android:id="@+id/button1"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 1"
android:textSize="20sp"
android:textColor="#ffff"
android:layout_margin="10dp"/>

<Button
android:id="@+id/button2"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 2"
android:textSize="20sp"
android:textColor="#ffff"
android:layout_margin="10dp"/>

<Button
android:id="@+id/button3"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 3"
android:textSize="20sp"
android:textColor="#ffff"
android:layout_margin="10dp"/>

<Button
android:id="@+id/button4"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 4"
android:textSize="20sp"
android:textColor="#ffff"
 android:layout_margin="10dp"/>

</LinearLayout>

Hasil :

Kemudian kustomisasi widget button dengan ikuti langkah dibawah ini dan
jalankan kode dibawah ini. Kemudian amati hasilnya dan tuliskan pada bagian
analisis.

1. Buat 4 file .xml baru yang disimpan pada file drawable

colorbutton.xml

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

<shape
xmlns:android="http://schemas.android.com/apk/res/androi
d"
android:shape="rectangle">

<solid android:color="#00CED1"/>

</shape>
 shapecorner.xml

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

<shape
xmlns:android="http://schemas.android.com/apk/res/androi
d"
android:shape="rectangle">
<solid android:color="#4169E1"/>
<corners android:radius="15dp"/>
</shape>

stroke.xml

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

<shape
xmlns:android="http://schemas.android.com/apk/res/androi
d"
android:shape="rectangle">
<stroke android:color="#F4A460" android:width="1dp"/>
<corners android:radius="5dp"/>
</shape>

gradient.xml

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

<shape
xmlns:android="http://schemas.android.com/apk/res/androi
d"
android:shape="rectangle">
<gradient
android:startColor="#4682B4"
android:endColor="#FF6347"
android:type="linear"/>

<corners android:radius="20dp"/>

</shape>

2. Ganti kode pada activity_main.xml seperti dibawah ini:

activity _main.xml

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

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">

<Button
android:id="@+id/button1"
android:background="@drawable/colorbutton"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 1"
android:textSize="20sp"
android:textColor="#ffff"
android:layout_margin="10dp"/>

<Button
android:id="@+id/button2"
android:background="@drawable/shapecorner"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 2"
android:textSize="20sp"
android:textColor="#ffff"
android:layout_margin="10dp"/>

<Button
android:id="@+id/button3"
android:background="@drawable/stroke"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 3"
android:textSize="20sp"
android:textColor="#ffff"
android:layout_margin="10dp"/>

<Button
android:id="@+id/button4"
android:background="@drawable/gradient"
android:layout_width="200dp"
android:layout_height="70dp"
android:text="CUSTOM 4"
android:textSize="20sp"
android:textColor="#ffff"
android:layout_margin="10dp"/>

</LinearLayout>
Hasil :

Dalam membuat button juga bisa melalui design, sehingga anda hanya
tinggal drop and drag, pilihan button yang tersedia juga banyak, seperti
ilustrasi dibawah ini:

Untuk membuat button icon dan text anda bisa mengikuti

langkah-langkah dibawah ini:
1. Tambahkan icon pada folder drawable, sementara gunakan vector
icon dari android dan beri nama pencil.

2. Kemudian ketikkan code dibawah ini.

activity_main.xml

​ ml version="1.0" encoding="utf-8"​?>
<?x
<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/androi
d"

android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="1">
 <Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="22dp"
android:background="#4CAF50"
android:drawableLeft="@drawable/pencil"
android:padding="16dp"
android:text="Button (Icon Kiri)"/>

<Button
android:id="@+id/button3"
style="?android:attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="148dp"
android:layout_margin="16dp"
android:drawableBottom="@drawable/pencil"
android:padding="16dp"
android:text="Button (Icon Bawah)"/>

</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="1">

<Button
android:id="@+id/button5"
style="?android:attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="118dp"
android:layout_margin="16dp"
android:background="#CDDC39"
android:drawableTop="@drawable/pencil"
android:padding="24dp"
android:text="Button (Icon Atas)"
/>

<Button
android:id="@+id/button6"
style="?android:attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="114dp"
android:layout_margin="16dp"
android:layout_weight="0.32"
android:drawableRight="@drawable/pencil"
android:paddingBottom="16dp"
android:text="Button (Icon Kanan)"/>

</LinearLayout>
</LinearLayout>

3. Hasil, jelaskan pada bagian analisis perbedaan posisi ketiganya.

Beberapa macam - macam widget dan fungsinya:

Widget Source code xml fungsi

TextView <TextView Menampilkan text

android:id="@+id/title_text_view
"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent"
android:text="@string/my_photos"
android:textAppearance="?android
:textAppearanceLarge"
android:textColor="#4689C8"

android:textStyle="bold" />

Image View <ImageView Menampilkan

android:id="@+id/photo_image_vie sebuah gambar
w"
android:layout_width="match_pare
 nt"
android:layout_height="match_par
ent"
android:scaleType="centerCrop"

android:src="@drawable/beach" />

Button <Button Fungsi button

android:id="@+id/next_button"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent"

android:text="@string/next" />

view <View pembatas

android:layout_width="match_pare
nt"
android:layout_height="100dp"

android:background="#4E4B4F" />

Edittext <EditText Input text

android:id="@+id/album_descripti
on_view"
android:layout_width="match_pare
nt"
android:layout_height="wrap_cont
ent"
android:hint="@string/album_desc
ription"

android:inputType="textMultiLine
" />

Spinner <Spinner Menu dropdown

android:id="@+id/sort_by_spinner
"
android:layout_width="match_pare
nt"
android:layout_height="wrap_cont
ent" />

Checkbox <CheckBox Menampilkan kotak

android:id="@+id/notify_me_check ceklis
box"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent"
 android:text="@string/notify_me"
android:textAppearance="?android
:textAppearanceMedium" />

Radiobutton <RadioGroup Menampilkan isi list

android:layout_width="wrap_conte button
nt"
android:layout_height="wrap_cont
ent"
android:orientation="vertical">
<RadioButton
android:id="@+id/yes_radio_butto
n"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent"
android:text="@string/yes"
android:textAppearance="?android
:textAppearanceMedium" />
<RadioButton
android:id="@+id/no_radio_button
"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent"
android:text="@string/no"
android:textAppearance="?android
:textAppearanceMedium" />

</RadioGroup>

Ratingbar <RatingBar Menampilkan rating

android:id="@+id/rating_bar" menggunakan
style="?android:attr/ratingBarSt bintang
yleSmall"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent"
android:numStars="5"
android:rating="2.5"

android:stepSize="0.5" />

Switch <Switch Menampilkan switch

android:id="@+id/backup_photos_s on/off
witch"
android:layout_width="wrap_conte
nt"
android:layout_height="wrap_cont
ent"
 android:text="@string/auto_backu
p_photos"

android:textAppearance="?android
:textAppearanceSmall" />

Seekbar <SeekBar Menampilkan drag

android:id="@+id/seek_bar" bar
android:layout_width="match_pare
nt"
android:layout_height="wrap_cont
ent"
android:max="100"

android:progress="20" />

Searchview <SearchView Kolom pencarian

android:id="@+id/search_viewr" menggunakan text
android:layout_width="match_pare
nt"
android:layout_height="wrap_cont
ent"
android:iconifiedByDefault="fals
e"

android:queryHint="@string/searc
h_photos" />

Progressbar <ProgressBar
android:id="@+id/loading_spinner
"
style="@style/Widget.AppCompat.P
rogressBar"
android:layout_width="wrap_conte
nt"

android:layout_height="wrap_cont
ent" />

5. Image
Image merupakan salah satu antarmuka yang berfungsi untuk menampilkan
gambar pada aplikasi android. Pada android studio terdapat dua komponen yang
berhubungan dengan image yaitu ImageView dan ImageButton. Berikut adalah
penjelasan lebih lanjut mengenai komponen tersebut.

5.1. ImageView
ImageView merupakan salah satu widget yang berfungsi untuk
menampilkan gambar berformat .png atau .jpg. Anda dapat menambahkan
ImageView pada activity atau halaman anda dengan drag & drop atau
dengan menuliskan kode pada file .xml. Anda dapat mengetikkan kode
berikut :
activity_main.xm​l

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

<LinearLayout
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:orientation="vertical"
tools:context=".MainActivity">

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@color/colorPrimary"
android:src="@mipmap/ic_launcher" />

</LinearLayout>

Pada kode tersebut ditunjukkan bahwasannya ImageView menggunakan

gambar pada mipmap/ic_launcher yang sudah tersedia oleh Android Studio.
Berikut adalah hasilnya :
5.2. ImageButton
Berbeda dengan ImageView, ImageButton merupakan salah satu
widget berupa tombol yang berfungsi untuk menampilkan gambar berformati
.png atau .jpg dan dapat melakukan perintah tertentu. Penambahan
ImageButton pada activity atau halaman dapat anda lakukan dengan
drag&drop atau dengan menuliskan kode pada file .xml. Sebagai contoh
untuk ImageButton, anda dapat menambahkan icon pada folder drawable
dengan melakukan :
 Tambahkanlah kode berikut pada kode sebelumnya :

activity_main.xml

. . .
<ImageButton
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="@id/imageView"
android:src="@drawable/ic_baseline_image_search_24"
/>
. . .

Berikut adalah hasilnya :

6. Fragment
Fragment pada dasarnya mirip dengan activity. Namun, fragment memiliki
suatu tujuan spesifik di mana fragment dapat dipakai berulang-ulang di lebih dari
satu activity. Fragment juga dapat dikatakan sebagai sebuah bagian modular dari
suatu activity. Contoh implementasi fragment yang mungkin mudah dikenali
adalah penggunaan suatu navigation bar, di mana activity tidak berubah namun
layout yang tampil di layar dapat berubah (contohnya suatu aplikasi di mana ada
tombol Home, Profile, dan Timeline).
6.1. Implementasi fragment sederhana
Langkah pengerjaan:

1. Project structure tersusun sebagai berikut:

2. Buatlah UI pada layout fragment pertama dengan nama

fragment_frag_first.xml

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

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/androi
d"
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"
tools:context=".FragFirst">

<TextView
android:id="@+id/tv_frag_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment satu"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
3. Buatlah UI pada layout fragment pertama dengan nama
fragment_frag_sec.xml

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

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/androi
d"

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"
tools:context=".FragSec">

<TextView
android:id="@+id/tv_frag_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment dua"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/btn_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Counter Click"
app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/tv_frag_two"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

4. Melakukan pengubahan UI pada activity_main.xml agar fragment

yang telah dibuat dapat dimuat melalui UI activity main. Framelayout
dapat mengimplementasi fragment.
 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/androi
d"

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:padding="16dp"
tools:context=".MainActivity">

<Button
android:id="@+id/btn_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment 1"
app:layout_constraintEnd_toStartOf="@+id/btn_two"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/btn_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/btn_one"
app:layout_constraintTop_toTopOf="parent" />

<FrameLayout
android:id="@+id/fragment_main"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_one"
/>

</androidx.constraintlayout.widget.ConstraintLayout>

5. Pada kotlin class (FragFirst.kt), lakukan implementasi fragment

sebagai berikut. Fragment pertama cukup memanggil layout.

import androidx.fragment.app.Fragment

class FragFirst : Fragment(R.layout.fragment_frag_first)

{}

Fragment kedua (FragSec.kt) melakukan implementasi logika

sederhana dengan counter value yang ditampilkan pada layout.
 import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.fragment.app.Fragment
import java.lang.StringBuilder

class FragSec : Fragment() {

private var nilai = 0

override fun onCreateView(

inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val displayView =
inflater.inflate(R.layout.fragment_frag_sec, container,
false)

displayView.findViewById<TextView>(R.id.tv_frag_two).tex
t = nilai.toString()

displayView.findViewById<Button>(R.id.btn_counter).setOn
ClickListener {

displayView.findViewById<TextView>(R.id.tv_frag_two).tex
t = nilai++.toString()
}

return displayView
}

6. Fragment perlu dipanggil dalam activity main. Implementasi baris

kode supportFragmentManager dapat membantu proses commit
layout di framelayout. supportFragmentManager dapat
mengimplementasikan scope function apply yang mengembalikan
object berupa dirinya sendiri.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?)
{
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val fragOne = FragFirst()

val fragTwo = FragSec()

supportFragmentManager.beginTransaction().apply {
 replace(R.id.fragment_main, fragOne)
commit()
}

findViewById<Button>(R.id.btn_one).setOnClickListener {

supportFragmentManager.beginTransaction().apply {
replace(R.id.fragment_main, fragOne)
commit()
}
}

findViewById<Button>(R.id.btn_two).setOnClickListener {

supportFragmentManager.beginTransaction().apply {
replace(R.id.fragment_main, fragTwo)
commit()
}
}
}
}

3.6. Hasil Percobaan

Tuliskan hasil dari percobaan di atas!

3.7. Analisis Hasil

Tuliskan analisis hasil dari percobaan di atas!

3.8. Kesimpulan
Tuliskan kesimpulan dari percobaan diatas!

3.9. Tugas
1. Buatlah aplikasi Android yang dapat menampilkan setiap aktivitas siklus hidup
Android yang menerapkan onCreate, onStart, onRestart, onResume, onPause,
onStop, dan onDestroy.
2. Buatlah sebuah UI bertemakan biodata yang memuat minimal 1 layout, 2 tipe
text, dan 3 button.
3. Buatlah implementasi 2 fragment. Fragment pertama mengimplementasikan
imageview. Fragment kedua dapat berisi apapun sesuai kreativitas Anda
(sebagai contoh : form).

Daftar Pustaka