LAPORAN PRAKTIKUM

PEMROGRAMAN PERANGKAT BERGERAK

JUDUL :
LAYOUT, COMPONENT DAN INTENT
Disusun oleh:
Hilmy Ahmad Haidar (20102170)

TEKNIK INFORMATIKA
INSTITUT TEKNOLOGI TELKOM PURWOKERTO
BANYUMAS, JAWA TENGAH
2023
Pembahasan
Layout dan component adalah dua konsep yang sangat penting dalam
pengembangan aplikasi Android menggunakan bahasa pemrograman Kotlin.
Layout digunakan untuk menentukan bagaimana tampilan antarmuka
pengguna (UI) dari aplikasi Anda akan ditampilkan, sementara komponen
digunakan untuk menambahkan fungsi ke aplikasi Anda.
Layout adalah file XML yang digunakan untuk menentukan tata letak dari
antarmuka pengguna (UI) di aplikasi Android. Di Kotlin, Anda dapat membuat
file layout menggunakan sintaks XML atau menggunakan fungsi kode yang
disediakan oleh Android Studio. Beberapa komponen yang biasa digunakan
dalam layout adalah:
1. LinearLayout: Digunakan untuk menentukan tata letak vertikal atau
horizontal dari komponen UI.
2. RelativeLayout: Digunakan untuk menentukan tata letak relatif antara
komponen UI.
3. FrameLayout: Digunakan untuk menentukan tata letak satu atau lebih
komponen UI dalam kerangka yang sama.
Sedangkan Komponen adalah elemen yang menambahkan fungsi ke dalam
aplikasi Anda. Ada banyak jenis komponen yang dapat digunakan dalam
aplikasi Android, namun beberapa yang paling umum digunakan antara lain:
1. TextView: Digunakan untuk menampilkan teks di dalam aplikasi Anda.
2. ImageView: Digunakan untuk menampilkan gambar di dalam aplikasi
Anda.

PPB-20102170-02
Langkah-Langkah Praktikum
Langkah Praktikum Pembahasan

Membuat project baru pada android studio

dengan cara klik menu file – new – new
project, lalu pilih empty activity, disini saya
membuat dengan judul folder pertemuan2
dengan nama aplikasi LayoutComponent

Langkah yang dilakukan selanjutnya

adalah membuat fungsi ScrollView() pada
tampilan layar, agar nantinya view atau
tampilan pada layar aplikasi dapat di
scrolling walaupun kontennya melebihi
batas pixel tampilan device, dengan
mengatur “match_parent” pada layout
width dan height

Berikutnya membuat Linear Layout. Linear

Layout sendiri merupakan layout yang
berfungsi untuk menampilkan komponen –
komponen yang ditampilkan pada aplikasi

PPB-20102170-02
Langkah berikutnya menambahkan
sebuah komponen TextView di dalam
komponen LinearLayout. TextView sendiri
merupakan sebuah komponen yang
berfungsi untuk menyimpan sebuah string
atau text dan ditampilkan ke halaman
aplikasi, pada project ini TextView praktikan
gunakan untuk menyimpan judul suatu
layout

Selanjutnya praktikan menambahkan

komponen Linear Layout lagi untuk
membungkus 2 image view dalam
orienatasi vertikal

PPB-20102170-02
Langakah berikutnya praktikan
menggandakan komponen TextView
dengan judul “Layout Horizontal” dan
LayoutLinear yang berisikan 2 komponen
ImageView untuk dijadikan orientasi layout
menjadi horizontal

Berikut adalah hasil dari 2 komponen

LinearLayout dengan 2 orientasi yang
berbeda yaitu vertikal dan horizontal

PPB-20102170-02
Selanjutnya membuat RelativeLayout.
RelativeLayout sendiri adalah komponen
yang memungkinkan kita untuk meletakkan
komponen layout berdasarkan posisi
komponen terdekat lainnya. Layout ini
sifatnya sangat flexible, yang
memperbolehkan kalian untuk meletakkan
komponen layout dimana saja, jika kalian
tahu posisi “relative” dari komponen
terdekat.
Di dalam komponen RelativeLayout
praktikan menambahkan 3 komponen
ImageView, perlu digaris bawahi
komponen RelativeLayout bersifat
“flexible” maka dari itu tiap komponen yang
berada di dalam RelativeLayout diwajibkan
memakai id komponen, maka dari itu
praktikan memberikan id kepada masing –
masing komponen ImageView, komponen
pertama diberi id dengan nama @+id/oR1
sedangkan komponen kedua diberi id
@+id/oR2 dan komponen ketiga diberi id
@+id/oR3

PPB-20102170-02
Untuk positioning, komponen dengan id
oR2 diletakkan dibawah komponen id oR1
menggunakan layout_below sedangkan
komponen dengan id oR3 diletakkan
dibawah komponen oR1 menggunakan
layout_below dan diletakkan disebelah
komponen oR2 menggunakan
layout_toRightOf, sehingga menghasilkan
layout seperti gambar disamping

Selanjutnya membuat FrameLayout.

FrameLayout sendiri adalah layout yang
paling tepat untuk membuat beberapa UI
saling tumpang tindih

Disini praktikan membuat 3 komponen

ImageView, dengan masing – masing
ukuran yang berbeda, pada layout ini tiap
komponen dapat tumpeng tindih, terdapat
3 komponen ImageView dengan ukuran
yang berbeda, dalam FrameLayout seluruh
komponen dapat dimasukkan ke dalam 1
layer yang sama asalkan masih didalam
parent yag sama, dengan menambah

PPB-20102170-02
fungsi layout_gravity sehingga komponen
ImageView terattach ke dalam layer yang
sama

Berikut adalah hasil dari kode pembahasan

diatas, pada gambar disamping komponen
dengan warna purple adalah komponen
yang paling awal diinisialisasi dan
komponen dengan warna putih adalah
komponen paling akhir yang terinisialisasi,
sehingga object putih berada pada posisi
paling depan

PPB-20102170-02
Pembahasan
Pada Kotlin, intent merupakan sebuah objek yang digunakan untuk
berinteraksi dengan komponen lain di dalam aplikasi Android, seperti aktivitas,
layanan, dan penerima siaran (broadcast receiver). Intent berfungsi sebagai
pengirim pesan yang menginformasikan komponen lain tentang tindakan yang
harus dilakukan, seperti memulai aktivitas baru atau memicu penerima siaran.
Terdapat dua jenis intent pada Kotlin, yaitu intent eksplisit (explicit intent)
dan intent implisit (implicit intent). Intent eksplisit digunakan untuk memulai
sebuah aktivitas atau memulai sebuah layanan dengan jelas menentukan
nama kelas dari komponen yang akan dijalankan. Sedangkan intent implisit
digunakan untuk memulai sebuah aktivitas atau memulai sebuah layanan
tanpa menentukan secara langsung nama kelas dari komponen tersebut.

Langkah-Langkah Praktikum
Langkah Praktikum Pembahasan

Membuat project baru pada android studio

dengan cara klik menu file – new – new
project, lalu pilih empty activity, disini saya
membuat dengan judul folder
pertemuan2intent dengan nama aplikasi
LayoutIntent

Pada activity_main.xml buatlah TextView

dengan id header untuk sebuah judul form

PPB-20102170-02
Dan 2 buah komponen EditText untuk
mengisi inputan sebuah form dengan id
namabar dan nomorbar

Lalu buat 2 komponen Button, yaitu

komponen tombol untuk memberi perintah
inputan ke dalam form yang sudah diisi
nantinya

Hasil dari activity_main.xml yang telah

diberi komponen TextView, EditText, dan
Button yang nantinya akan menjadi form
inputan untuk output pada Explicit dan
Implicit

Langkah berikutnya buatlah activity baru,

dan beri nama Explicit.kt yang nantinya
layout ini akan menjadi tempat output dari
data input Button Explicit pada
MainActivity.kt

PPB-20102170-02
Lalu pada activity_explicit.xml kita buat
komponen TextView dan beri judul “Data
Formulir”
Berikutnya tambahkan 2 komponen
TextView lagi untuk output dari
MainActivity.kt, dengan id showNama dan
showNomor

Ini adalah hasil dari layout

activity_explicit.xml yang nantinya layout
ini adalah tempat untuk menampilkan
inputan dari MainActivity.kt

Pada MainActivity.kt buat 4 variable, val

edit_nama dan edit_nomor berfungsi untuk
menyimpan data input nama dan nomor
dari form activity_main.xml, lalu 2
PPB-20102170-02
komponen button, dengan nama val
simpan dan nomorbtn. Untuk Button
simpan berfungsi untuk menerima
masukkan dari activity_main yang nantinya
dioutput pada activity_explicit sedangkan
Button nomorbtn berfungsi untuk parsing
data yang telah diinput dari form
activity_main.xml ke dalam URL whatsapp
API

PPB-20102170-02
Berikutnya buat sebuah fungsi untuk
Button simpan, pada fungsi ini data yang
berada pada variable edit_nama dan
edit_nomor diartikan ke dalam string agar
terbaca pada form activity_explicit.xml
Selanjutnya fungsi untuk Button nomorbtn,
pada fungsi ini data dari edit_nomor
dipassing melalui URL API whatsapp agar
dapat mengirim pesan langsung / direct ke
nomor whatsapp yang telah tersimpan
pada inputan edit_nomor
Pada file Explicit.kt kita juga
menginisialisasikan 2 variable yaitu
variable nama dan nomor yang berfungsi
untuk menerima inputan dari
MainActivity.kt, lalu pada file Explicit.kt kita
setText untuk 2 variable tersebut agar data
yang dimasukkan tampil dalam form

PPB-20102170-02
Berikut adalah layout activity_main.xml
yang sudah diberi inputan tetapi belum
disubmit

Sedangkan ini adalah tampilan dari

activity_explicit.xml yang datanya telah ter-
output data input dari activity_main.xml

PPB-20102170-02
Terakhir, ini adalah output dari button
Implicit, yang dimana data nomor telah ter-
parsing ke dalam URL API whatsapp

PPB-20102170-02