LAYOUT DAN COMPONENT CONTROLS I

SOPIAN ALVIANA, S.KOM., M.KOM

LAYOUT

 Layout adalah sebuah tampilan dari aplikasi android.

 Layout memungkinkan untuk menata komponen – komponen pada aplikasi seperti foto, teks, video, maupun
komponen lainnya secara mudah.
 Fungsi layout mirip dengan kertas, yaitu sebagai media dalam menggambar.
 Pada layout, kita bisa menambahkan komponen aplikasi bahkan mengatur tampilannya menjadi indah dan nyaman
dimata pengguna.
LINEARLAYOUT, RELATIVELAYOUT, DAN
FRAMELAYOUT
SOPIAN ALVIANA, S.KOM., M.KOM
LINEARLAYOUT, RELATIVELAYOUT, TABLELAYOUT DAN
FRAMELAYOUT

 Linearlayout merupakan layout yang berfungsi untuk menampilkan komponen – komponen aplikasi, contohnya :
Teks, tombol, gambar, dan lainnya dengan cara vertical atau horizontal.
 Relativelayout merupakan layout yang berfungsi untuk mengatur tata letak komponen atau widget aplikasi android
dengan cara relative (secara bebas) tidak hanya vertical atau horizontal saja.
 Relativelayout memungkinkan kita untuk memposisikan komponen mana saja yang kita inginkan, sehingga dianggap
sebagai layout yang paling fleksibel.
 Tablelayout digunakan untuk merancang layout menggunakan baris dan kolom. Meskipun Namanya tablelayout
tetapi tidak ada garis kolom, baris, atau cell yang ditampilkan.
 Framelayout yaitu layout komponen yang saling tumpeng tindih.
LANGKAH AWAL MEMBUAT
LAYOUT

 Buka Android Studio, Lalu buat project

baru,kemudian next
 Pilih Empty Activity, Klik Next
LANGKAH AWAL MEMBUAT
LAYOUT

 Isi Name : (Bebas)

 Package name : Default
 Location : Sesuaikan lokasi penyimpanan
 Kemudian Finish
 Tunggu sampai halaman baru project terbuat.
LANGKAH AWAL MEMBUAT
LAYOUT

 Klik Tabulasi activity_main.xml

 Pada tabulasi text, kita akan mengetikan kode –
kode xml untuk pembuatan layout.
LINEARLAYOUT
SOPIAN ALVIANA, S.KOM., M.KOM
LINEAR LAYOUT

 Linear Layout diawali tag pembuka <LinearLayout>

dan tag akhirnya yaitu </LinearLayout>
 Berikut contoh pembuatan kode xml nya.
 Set orientation bisa menjadi vertical atau horizontal.
 Dalam contoh berikut orientation menjadi “Vertical”
 Anda boleh mencoba dengan mengganti orientation.
LINEAR LAYOUT
CONTOH LAIN PENGGUNAAN LINEAR LAYOUT
RELATIVELAYOUT
SOPIAN ALVIANA, S.KOM., M.KOM
LINEAR LAYOUT

 Relative Layout diawali tag pembuka

<RelativeLayout> dan tag akhirnya yaitu
</RelativeLayout>
 Berikut contoh pembuatan kode xml nya.
LINEAR LAYOUT
CONTOH LAIN RELATIVE LAYOUT
FRAME LAYOUT
SOPIAN ALVIANA, S.KOM., M.KOM
FRAME LAYOUT

 Frame Layout diawali tag pembuka <FrameLayout> dan tag akhirnya yaitu </FrameLayout>
 Berikut contoh pembuatan kode xml nya.
 Frame Layout digunakan untuk membuat beberapa UI saling tumpeng tindih.
 Sebagai contoh ada Image View dan Button.
 Button disimpan diatas Imageview.
TEXTVIEW, EDITTEXT, IMAGEVIEW, BUTTON
SOPIAN ALVIANA, S.KOM., M.KOM
TEXTVIEW, EDITTEXT, IMAGEVIEW, DAN BUTTON

 Textview merupakan salah satu widget yang banyak digunakan. ID merupakan atribut pada textview. ID merupakan
nama unik pada setiap textview yang digunakan.
 Edittext merupakan salah satu widget yang digunakan untuk memasukkan teks di android
 Imageview merupakan widget yang digunakan untuk memuat gambar.
 Button merupakan widget yang digunakan untuk
TEXTVIEW
EDITTEXT
IMAGEVIEW

Catatan : Penambahan
gambar pada imageview
dilakukan dengan cara :
- Copy gambar yang akan
ditampilkan dari explore
computer.
Buka project android, res,
drawable kmudian klik
kanan pada drawable dan
lakukan paste.
BUTTON
IMPLEMENTASI EVENT HANDLING
SOPIAN ALVIANA, S.KOM., M.KOM
EVENT LISTENER
 Merupakan antar muka pada kelas View yang berisi metode pemanggilan kembali.
 Metode ini akan dipanggil android ketika view yang terdaftar dengan pendengar dipicu oleh interaksi pengguna.
CONTOH EVENT ON CLICK
CONTOH EVENT ON CLICK (SETTING PADA FILE .JAVA)
CONTOH EVENT ON CLICK (HASIL TAMPILAN SEBELUM DITEKAN)
CONTOH EVENT ON CLICK (HASIL TAMPILAN SETELAH DITEKAN)
GAYA DAN TEMA APLIKASI
SOPIAN ALVIANA, S.KOM., M.KOM
GAYA DAN TEMA APLIKASI

 Gaya dan tema di Android memungkinkan Anda memisahkan detail desain aplikasi dari struktur dan perilaku UI,
mirip dengan stylesheet di desain web.
 Gaya adalah kumpulan atribut yang menentukan tampilan untuk view Tunggal. Gaya dapat menentukan atribut
seperti warna font, ukuran font, warna latar belakang, dan banyak lagi.
 Tema adalah jenis gaya yang diterapkan ke seluruh aplikasi, aktivitas, atau hierarki tampilan — bukan hanya tampilan
individual. Saat Anda menerapkan gaya sebagai tema, setiap tampilan di aplikasi atau aktivitas akan menerapkan
setiap atribut gaya yang didukungnya. Tema juga dapat menerapkan gaya ke elemen non-tampilan, seperti status bar
dan latar belakang jendela.
 Gaya dan tema dideklarasikan di res/values/ bernama Styles.XML
GAYA DAN TEMA TERANG (LIGHT)
GAYA DAN TEMA GELAP (DARK)
TUGAS 1

 Buatlah sebuah desain isian form di android studio

 Desain isian form bisa berisi isian biodata pribadi.
 Manfaatkan penggunaan layout (Linear,Relative, Frame, Table, atau Constraint Layout) dan penggunaan beberapa
widget seperti Textview, Edittext, ImageView, Button.
 Kustomisasi gaya dan tema dipersilahkan sesuai keinginan anda
 Kirimkan hasil screen shoot tugas tersebut (Berupa coding dan hasil run program) serta source code aplikasi
dalam bentuk RAR.
 Upload di LMS.
CONTOH UNTUK TUGAS
END