LAYOUT ANDROID

Mengenal atribut Margin dan Padding pada Layout XML

Saat kita membangun User Interface dengan menggunakan Layout XML, biasanya kita menggunakan
atribut antara margin dan padding, untuk mendesain suatu konten View yang sedang kita kembangkan.
Kedua atribut tersebut memiliki fungsi atau hasil tampilan yang berbeda, meskipun sama-sama memiliki
nilai atau value yang sama. Jika kita menggunakan atribut margin, ini digunakan untuk memberi
jarak(batasan) antara konten View, (Seperti :TextView ,Button dll), dengan konten View lain. Sedangkan
untuk atribut padding, digunakan mempertebal atau memperlapis sebuah konten View.

Contoh Perbandingan Margin dan Padding

Seperti pada gambar diatas, jika kita terapkan atribut padding (yang ditandai area warna merah),
pada TextView, maka akan mempertebal jarak dari dalam konten. Sedangkan jika terapkan,
atribut margin (yang ditandai area warna biru), maka akan memberi jarak antara TextView dengan Parent
View (RelativeLayout, LinearLayout), atau konten atau view lain, seperti pada contoh gambar diatas,
dengan Button.
setelah kita melihat Contoh Konsepnya, sekarang kita coba terapkan, pada layout XML, di Android Studio.

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

<RelativeLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
>

<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="50dp"

1
 android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="103dp"
android:layout_marginTop="236dp"
android:textStyle="bold" />
</RelativeLayout>

Contoh atribut padding :

android:paddingBottom=""
android:paddingEnd=""
android:paddingStart=""
android:paddingTop=""
android:paddingRight=""
android:paddingLeft=""

2
Contoh atribut margin :
android:layout_margin=""
android:layout_marginEnd=""
android:layout_marginBottom=""
android:layout_marginLeft=""
android:layout_marginRight=""
android:layout_marginStart=""
android:layout_marginTop=""

Mengenal Match Parent dan Wrap Content pada Layout xml

Saat kita sedang mendesain pada layout XML, untuk keperluan User Interface/ User Experience Aplikasi
Android. Terdapat dua atribut yang sangat umum digunakan, yang biasa kita kenal,
yaitu match_parent (dulu fill_parent) dan wrap_content, kedua nilai atribut ini digunakan untuk
menentukan jenis lebar (width) atau tinggi (height), pada ViewGroup dan View di Aplikasi Android.
Atribut match_parent adalah salah satu nilai atribut, yang berfungsi agar lebar atau tinggi, dapat
mengikuti layar atau screen pada perangkat Android. Sedangkan untuk wrap_content adalah salah satu
nilai atribut, yang berfungsi agar lebar atau tinggi, dapat mengikuti object (seperti :TextView, Button dan
lain-lain) tersebut.

3
perbedaan dari penerapan match_parent, dan wrap_content adalah, jika match_parent digunakan agar
lebar atau tinggi, mengikuti layar atau screen pada perangkat Android, Jadi penerapan ini secara default
digunakan pada ParentView, tapi tak menutup kemungkinan juga, bisa digunakan pada ChildView.
Sedangkan untuk wrap_content , akan mengikuti bentuk dari obyek tersebut. Biasanya memang hanya
digunakan untuk ChildView.

Contoh Penggunaan :

Sebagai contoh penggunaan, kita akan menggunakan widget Button, yang termasuk dalam kategori View
atau ChildView. untuk menempatkan nilai atribut match_parent atau wrap_content,
pada android:layout_width= "" dan android:layout_height= ""

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

<RelativeLayout
xmlns:android="[Link]
android:id="@+id/activity_main2"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<Button
android:text="UNIBI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"/>
</RelativeLayout>

4
 Hasil dari lebar dan tinggi wrap_content

Disini karena, Button atau ChildView ini berada pada ParentView dari RelativeLayout, yang mempunyai
nilai atribut lebar dan tinggi match_parent, secara default. Maka, jika widget Button kita terapkan nilai
atribut match_parent, pada lebar atau tinggi, akan sejajar dengan ukuran ParentView dari RelativeLayout.

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

<RelativeLayout
xmlns:android="[Link]
android:id="@+id/activity_main2"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<Button
android:text="UNIBI"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"/>
</RelativeLayout>

5
 Hasil dari lebar match_parent dan tinggi wrap_content

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

<RelativeLayout
xmlns:android="[Link]
android:id="@+id/activity_main2"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<Button
android:text="UNIBI"
android:layout_width="wrap_content"
android:layout_height="match_parent"
/>
</RelativeLayout>

6
 Hasil dari lebar wrap_content dan tinggi match_parent

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

<RelativeLayout
xmlns:android="[Link]
android:id="@+id/activity_main2"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<Button
android:text="UNIBI"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>

7
 Hasil dari lebar dan tinggi match_parent

Perbedaan Atribut Gravity dengan Layout Gravity Pada Layout XML

Sebenarnya ,kata-kunci yang paling tepat ,untuk mengambarkan penggunaan atribut gravity dengan
layout_gravity adalah, jika atribut gravity digunakan untuk posisi inside (didalam View), lalu jika atribut
layout_gravity digunakan untuk posisi outside (diluar View). Untuk lebih jelasnya, bisa lihat gambar
dibawah, beserta code Layout XMLnya.

Contoh perbandingan atribut gravity dengan layout_gravity

8
Pada gambar diatas, contoh penggunaan dari atribut gravity, ditandai dengan warna biru pada bagian
atas, yang berpindah ialah TextView, seiiring dengan nilai atau value, yang kita tentukan pada
atribut gravity, apakah itu sebelah kanan, tengah, atau kiri. Sedangkan jika contoh penggunaan
atribut layout_gravity, di tandai dengan warna hijau, yang berpindah itu diluar atau area, yang dimana
dilihat berdasarkan ParentViewnya (Contoh diatas :LinearLayout). Beserta nilai atau value, yang kita
tentukan pada atribut layout_gravity, entah itu sebelah kanan, tengah, atau kiri.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#2196F3"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="24sp"
android:text="gravity="
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#90CAF9"
android:gravity="left"
android:text="left"
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#aacaff"
android:gravity="center_horizontal"
android:text="center_horizontal"
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#bcf5b1"
android:gravity="right"
android:text="right"
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#aacaff"
android:gravity="center"
android:text="center"
android:textStyle="bold"/>

</LinearLayout>

9
 <LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#4CAF50"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="24sp"
android:text="layout_gravity="
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_gravity="left"
android:background="#bcf5b1"
android:text="left"
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:background="#aacaff"
android:text="center_horizontal"
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_gravity="right"
android:background="#bcf5b1"
android:text="right"
android:id="@+id/textView"
android:textStyle="bold"/>

<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#aacaff"
android:text="center"
android:textStyle="bold"
android:id="@+id/textView2"/>

</LinearLayout>

</LinearLayout>

10
Mengenal Jenis Layout Android
Layout adalah suatu tampilan tata letak di android studio untuk mengatur penempatan text/gambar yang
sudah [Link] layout di sini adalah bagian terpenting untuk memperindah tampilan pada aplikasi
yang kita buat nyaman di lihat bagi pengguna.

 Liniear Layout

Liniear Layout adalah design tampilan pada aplikasi kita dengan tata letak secara vertical dan
horizontal dimana tata letak aplikasi kita hanya bisa memasukan media secara mendatar dan menurun.

contoh linear layout:

11
sebagai contoh masukan script berikut pada activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="[Link]">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ini Linear Layout Vertical"
android:textSize="25dp"
android:textColor="#000000"
android:layout_marginLeft="60dp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TextBox"
android:gravity="center" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TextBox"
android:gravity="center" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="TextBox"
android:gravity="center" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TOMBOL"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TOMBOL"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TOMBOL"/>
</LinearLayout>

12
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="[Link]">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ini Linear Layout Horizontal "
android:textSize="25dp"
android:textColor="#000000"
android:layout_marginLeft="40dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="3" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="4"/>
</LinearLayout>
</LinearLayout>

13
 Relative Layout

Relative Layout design tampilan pada aplikasi kita dengan tata letak secara bebas tanpa aturan sesuai
keinginan [Link] seperti Linear Layout yang hanya terpaku pada salah satu tampilan vertical dan
horizontal.

contoh Relative Layout:

14
cara membuat Relative layout pada android studio:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="[Link]">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ini Relative Layout "
android:textSize="25dp"
android:textColor="#000000"
android:layout_marginLeft="80dp"
android:id="@+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:layout_marginTop="21dp"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="@+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_alignTop="@+id/button"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:layout_alignBaseline="@+id/button3"
android:layout_alignBottom="@+id/button3"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="19dp"
android:layout_marginEnd="19dp" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="16dp"
android:text="4" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="3" />
</RelativeLayout>

15
 Table Layout
TableLayout pada [Link] terdiri dari baris dan kolom seperti yang ada pada tag table HTML. Disini
kita akan membuat tampilan yang terdiri dari widget editText,TextView dan Button. Dan juga sebelumnya
kita bisa membuat rancanganya terlebih dahulu.
Seperti gambar berikut:

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

<TableLayout xmlns:android="[Link]
android:id="@+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"

16
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >

<!-- Baris 1 Kolom 1 -->

<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" >

<TextView
android:id="@+id/textView9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text=" Contoh Login"
android:textSize="24dp"
android:textStyle="bold" >
</TextView>
</TableRow>

<!--Baris 2 Kolom 2 -->

<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UserName"
android:textSize="16dp" />

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
</EditText>
</TableRow>

<!-- Baris 3 Kolom 3 -->

<TableRow
android:id="@+id/tableRow3"
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="Password"
android:textSize="16dp" />

<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"

17
 android:ems="10"
android:inputType="textPassword" >
</EditText>
</TableRow>

<!-- Baris 4 Kolom 1 -->

<TableRow
android:id="@+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right" >

<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Masuk" />
</TableRow>

</TableLayout>

 FrameLayout
FrameLayout adalah layout yang paling tepat untuk membuat beberapa UI saling tumpang tindih.
Contohnya kita dapat menyisipkan widget (tombol) ke dalam widget lainya (gambar) yang tidak mungkin
dilakukan dengan LinearLayout dan RelativeLayout.

18
Contoh penggunaan pada Activity_main.xml tambahkan kode-kode berikut ini:
<FrameLayout xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:foreground="#000"
android:foregroundGravity="top"
>
<ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitXY"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<TextView
android:text="Frame Demo"
android:textSize="30sp"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>

19
 AbsoluteLayout

Absolute Layout adalah salah satu komponen user interface pada desain layout. Yang digunakan
untuk mengatur tata letak suatu widget seperti button ,dengan menggunakan atribut layout_x dan
layout_y. Jadi kalian bisa mensetting tata letak widget button dengan menginputkan angka/koordinat di
atribut layout_x dan layout_y.
<AbsoluteLayout xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="OK"
android:layout_x="50px"
android:layout_y="361px" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_x="225px"
android:layout_y="361px" />
</AbsoluteLayout>

20
21