Praktikum

Pemrograman Aplikasi Mobile

MODUL
LAYOUT

Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam

sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut
manajemen bentuk dan bidang. Tujuan utama layout adalah menampilkan elemen
gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat
memudahkan pengguna menerima informasi yang disajikan. Layout digunakan untuk
mendefinisikan UI (antarmuka pengguna) sebenarnya dari aplikasi untuk menampung
semua elemen Misalnya, TextView, Button dan elemen UI lainnya.

Types Of Layout In Android

1. Constraint Layout
2. Linear Layout
3. Relative Layout
4. Table Layout
5. FrameLayout

1. Constraint Layout
Constarint Layout memungkinkan untuk membuat tata letak yang besar dan
kompleks dengan tampilan datar. Ini hampir mirip dengan Relative Layout karena
semua tampilan ditata berdasarkan hubungan antara satu objek dengan yang lain,
tetapi lebih fleksibel daripada RelativeLayout dan lebih mudah digunakan dengan
Editor Layout Android Studio.
https://developer.android.com/reference/android/support/constraint/ConstraintLayo
ut

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

<android.support.constraint.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=".Constraint">

<Button
android:id="@+id/button"
android:layout_width="217dp"
android:layout_height="48dp"
android:layout_marginStart="146dp"
android:layout_marginLeft="146dp"
android:layout_marginTop="160dp"
android:layout_marginEnd="174dp"
Praktikum Pemrograman Aplikasi Mobile

android:layout_marginRight="174dp"
android:text="Button 1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.388"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/button2"
android:layout_width="155dp"
android:layout_height="51dp"
android:layout_marginStart="128dp"
android:layout_marginLeft="128dp"

android:layout_marginTop="164dp"
android:text="Button 2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/button" />

</android.support.constraint.ConstraintLayout>

2. Linier Layout
Linear Layout adalah jenis layout dimana user menempatkan 1 objek per baris atau
kolom secara sejajar. Jadi di dalam setiap baris atau kolom hanya ada 1 objek yang
bisa ditempatkan . Linear Layout ini ada dua jenis . Yaitu :
• Linear Layout Vertical (Objek per baris/kesamping)
• Linear Layout Horizontal (Objek per kolom/kebawah)

https://developer.android.com/guide/topics/ui/layout/linear

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

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
Praktikum Pemrograman Aplikasi Mobile

android:layout_height="match_parent">

<LinearLayout
android:layout_width="395dp"
android:layout_height="715dp"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">

<Button
android:id="@+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 1" />

<Button
android:id="@+id/button5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 2" />
</LinearLayout>

</android.support.constraint.ConstraintLayout>
Praktikum Pemrograman Aplikasi Mobile

3. Relative Layout

Relative Layout adalah tata letak yang sangat fleksibel yang digunakan di android
untuk merancang tata letak khusus. Ini memberi kita fleksibilitas untuk memposisikan
komponen / tampilan berdasarkan posisi komponen relatif. Layout ini memungkinkan
kita untuk memposisikan komponen di mana saja kita inginkan sehingga dianggap
sebagai tata letak yang paling fleksibel. Untuk alasan yang sama Tata letak relatif
adalah tata letak yang paling banyak digunakan setelah Tata Letak Linear di Android.

https://developer.android.com/guide/topics/ui/layout/relative

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />

<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button4"
android:layout_marginTop="140dp"
android:text="Button 2" />
</RelativeLayout>
Praktikum Pemrograman Aplikasi Mobile

4. Table Layout
TableLayout memposisikan children kedalam rows and columns. TableLayout
containers tidak menampilkan border lines untuk tiap baris, columns, atau cells. Tabel
memiliki kolom berdasarkan row with the most cells. Tabel memperbolehkan cells
yang isinya kosong. Cells dapat memiliki banyak kolom seperti yang terdapat pada
bahasa pemrograman HTML.

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TableRow>
<TextView
android:text="NIM"
android:padding="3dip" />
<TextView
android:text="Nama"
android:gravity="right"
android:padding="3dip" />
<TextView
android:text="Jenis Kelamin"
android:gravity="right"
android:padding="3dip" />

<TextView
android:layout_width="179dp"
android:gravity="right"
android:padding="3dip"
android:text="Aksi" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="123" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuman" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Laki-Laki" />

<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
Praktikum Pemrograman Aplikasi Mobile

</TableRow>

</TableLayout>

</TableLayout>

5. FrameLayout
Layout yang paling tepat untuk membuat beberapa UI saling tumpang tindih.
Contohnya kita dapat menyisipkan widget (tombol) ke dalam widget lainya (gambar).

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LeftTop" />

<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="RightTop"
android:layout_gravity="top|right" />

<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CentreTop"
android:layout_gravity="top|center_horizontal" />

<TextView android:text="Left"
android:layout_gravity="left|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Right"
android:layout_gravity="right|center_vertical" />

<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Centre"
Praktikum Pemrograman Aplikasi Mobile

android:layout_gravity="center" />

<TextView android:text="LeftBottom"
android:layout_gravity="left|bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="RightBottom"
android:layout_gravity="right|bottom" />

<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="CenterBottom"
android:layout_gravity="center|bottom" />

</FrameLayout

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="@color/colorPrimary"

/>

<Button
Praktikum Pemrograman Aplikasi Mobile

android:layout_width="300px"
android:layout_height="100px"
android:layout_gravity="center"
android:text="LOGIN"
android:background="@color/colorAccent"
android:textColor="#fff"
android:textSize="20sp" />

</FrameLayout>
Praktikum Pemrograman Aplikasi Mobile

Tugas Praktikum
- Perbaiki tampilan 3 layout pada praktikum antarmuka pengguna yang telah
dibuat sebelumnya, sehingga responsive (check dengan beberapa ukuran
layar).
- Buatlah activity dan layout dari tiap menu berikut (Diperbolehkan menu lain,
bebas). Minimal 5 yang terdiri dari masing-masing jenis layout (Constraint,
Linear, Relative, Table, Frame)

- Kumpulkan sesuai dengan deadline dari dosen