Scribd
Unggah
119 tayangan

Modul Layout

Modul 4 membahas tentang layout yang mendefinisikan struktur visual untuk antarmuka pengguna. Terdapat dua cara untuk mendeklarasikan layout yaitu secara XML dan saat runtime. Jenis-jenis layout yang dibahas meliputi linear layout, relative layout, constraint layout, frame layout, dan table layout beserta fungsi dan contoh penggunaannya. Praktikum membahas cara memasukkan gambar ke dalam aplikasi menggunakan @drawable.

Diunggah oleh

Cah Jambon
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
119 tayangan

Modul Layout

Modul 4 membahas tentang layout yang mendefinisikan struktur visual untuk antarmuka pengguna. Terdapat dua cara untuk mendeklarasikan layout yaitu secara XML dan saat runtime. Jenis-jenis layout yang dibahas meliputi linear layout, relative layout, constraint layout, frame layout, dan table layout beserta fungsi dan contoh penggunaannya. Praktikum membahas cara memasukkan gambar ke dalam aplikasi menggunakan @drawable.

Diunggah oleh

Cah Jambon
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

Modul 4

Layout
Layout mendefinisikan struktur visual untuk antarmuka pengguna, seperti UI
sebuah aktivitas atau widget aplikasi. Anda dapat mendeklarasikan layout dengan dua
cara:

 Deklarasikan elemen UI dalam XML. Android menyediakan sebuah kosakata


XML sederhana yang sesuai dengan kelas dan subkelas View, seperti halnya untuk
widget dan layout.
 Buat instance elemen layout saat waktu proses. Aplikasi Anda bisa membuat
objek View dan ViewGroup (dan memanipulasi propertinya) lewat program.

Kerangka kerja Android memberi Anda fleksibilitas untuk menggunakan salah satu atau
kedua metode ini guna mendeklarasikan dan mengelola UI aplikasi Anda. Misalnya,
Anda bisa mendeklarasikan layout default aplikasi Anda dalam XML, termasuk elemen-
elemen layar yang akan muncul di dalamnya dan di propertinya. Anda nanti bisa
menambahkan kode dalam aplikasi yang akan memodifikasi status objek layar,
termasuk yang dideklarasikan dalam XML, saat waktu proses.

Jenis - jenis dan fungsi Layout


1. Linear Layout

Linear Layout adalah layout yang menyejajarkan semua child view-nya dalam satu arah,
secara vertikal atau horizontal. Anda bisa menetapkan arah layout dengan
atribut android:orientation.
Semua anak LinearLayout akan ditumpuk satu sama lain, jadi daftar vertikal hanya akan
memiliki satu anak per baris, seberapa pun lebarnya, dan daftar horizontal hanya akan
setinggi satu baris (tinggi anak yang tertinggi, ditambah pengisi). LinearLayout akan
mengikuti margin antara anak dan gravity (sejajar kanan, tengah, atau kiri) setiap anak.

2. Relative Layout

Relative Layout adalah layout yang penataan nya ini adalah penataan yang menempatkan
widget-widget didalamnya seperti layer, sehingga sebuah widget dapat berada di atas/di
bawah widget lainnya atau dengan kata lain Relative merupakan layout yang penataannya
lebih bebas (Relative) sehingga bisa di tata di mana saja.
Jadi dapat diartikan bahwa Relative Layout adalah desain tampilan pada aplikasi dengan
tata letak objek atau komponen secara bebas tanpa aturan sesuai orientasi (horizontal atau
vertical) seperti yang diterapkan pada Linear Layout.

3. Constraint Layout

Sebenarnya Constraint Layout mirip dengan Relative Layout, karena letak View


bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya.
Contohnya di Relative Layout kita bisa meletakkan sebuah View di atas, bawah, atau
samping View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout
menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint
Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.
Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiap sisinya,
yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb. Tali tersebut wajib kita
“ikatkan” kepada anchor point atau suatu titik yang dapat berupa sisi dari Parent Layout,
View lain, ataupun titik bantu (helper) yang bisa kita buat sendiri.

4. Frame Layout

Frame Layout adalah Layout yang biasanya digunakan untuk membuat objek yang saling
bertindihan contohnya yaitu kita membuat button di atas image.

5. Table Layout

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan
antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom. Table Layout terdiri
dari:
1. Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang

dapat disimpan.

2. Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis

kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.
Tag Table Layout

Beberapa tag pada Table Layout :


1. TableLayout : Tag pembuka untuk menggunakan TableLayout

2. TableRow : Tag untuk membuat Baris


Praktikum 1: Memasukkan gambar

Pada praktikum memasukkan gambar akan dipelajari bagaimana memasukkan gambar


menggunakan @drawable dengan memasukkan file gambar ke dalam resource.
Implementasi memasukkan gambar dengan penggunaan @drawable adalah sebagai
berikut:

1. Buatlah proyek baru pada android Studio

2. Siapkan image yang ingin dimasukkan

3. Copy image yang ingin dimasukkan


4. Langkah selanjutnya adalah expand res, lalu klik kanan pada folder drawable, pilih
show in explorer, paste gambar yang akan dimasukkan ke dalam folder drawable.

5. Masukkan kode seperti di bawah ini.

Ukuran gambar

` Tata letak gambar (silahkan


dicoba)

@drawable/(nama file
gambar yang ingin
dimasukkan sesuai dlm
folder drawable)

6. Lihat tampilan layout pada design tab


7. Untuk memberi jarak tiap elemen UI dapat menggunakan perintah :

android:layout_marginBottom="15dp"

Tugas

1. Buatlah Flowchart aplikasi yang akan anda kembangkan


2. Dari flowchart tersebut, buatlah Flow intent aplikasi
3. Buatlah UI dari aplikasi yang akan anda kembangkan

Anda mungkin juga menyukai