Mengatur Posisi Widget pada Layout xml Android Studio

Kali ini kita akan memulai tutorial Android yang sesungguhnya dan pembahasan kali ini yaitu tentang mengatur posisi Widget pada tampilan layout xml, sebelum memulai apakah kalian sudah membaca postingan tentang Memulai Project Baru di Android Studio? Jika belum silahkan dibaca terlebih dahulu. Nah langsung saja kita mulai.

• Pertama, buka atau buat project terlebih dahulu.
• Setelah membuat project atau membuka project kita tambahkan layout baru pada project tersebut dengan cara klik kanan pada res>New>Android resource file.

• Lalu beri nama Layoutnya dan ubah Resource type-nya menjadi Layout lalu klik OK.

• Setelah itu akan muncul tampilan seperti di bawah ini dan tambahkan Widget untuk contoh kali ini kita akan menggunakan Button.

• Tutorial akan dilanjutkan di bawah

Tag match_parent dan wrap_content pada Layout

Sebelum melanjutkan tutorial kita harus mengetahui dulu apa si fungsi dari tag match_parent dan wrap_content. match_parent adalah tag yang digunakan untuk merubah ukuran dari widget atau layout agar memenuhi atau se-ukuran dengan parentnya (match_pareng digunakan untuk Android dengan level API 8 keatas jika level API 8 kebawah menggunakan fill_parent), lalu untuk wrap_content tag ini digunakan untuk merubah ukuran widget atau layout akan menyesuaikan dengan kontennya, misal teks pada button maka lebar button akan menyesuaikan dengan panjang teksnya.

Tag ini digunakan pada 2 atribut yaitu :

android:layout_width

dan

android:layout_height

Nah setelah mengetahui kegunaan dari tag match_parent dan wrap_content mari kita lanjutkan tutorialnya.

• Setelah kalian menambahkan Widget pada Layout maka kita menuju ke text editor dengan mengeklik tab text pada bagian bawah Layout Editor

• Lalu edit pada pada tag LinearLayout untuk merubah ukuran layout yang akan digunakan, edit pada atribut yang tadi sudah disebutkan diatas.

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

• Lalu ubah pada bagian android:layout_width dan android:layout_height jika menggunakan match_parent maka ukurannya akan sama dengan parentnya atau layoutnya, tapi jika dirubah ke wrap_content makan ukuran layout akan menyesuaikan dengan ukuran widget atau konten yang ada di dalamnya.

• Dan untuk ukuran widget, caranya sama seperti di atas hanya saja tagnya yang dirubah berbeda, sesuai dengan widget mana yang akan dirubah.

<Button
    android:text="HanTech-Android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button" 

• Setelah diubah sesuai dengan keinginan maka tampilan bisa langsung kalian lihat di bagian kanan Text Editor-nya.

Membuat Linear Layout

Untuk selanjutnya kita akan membuat Linear Layout, Linear Layout sendiri memiliki dua jenis yaitu vertical (tegak) dan horizontal (mendatar). Untuk tutorialnya mari kita lihat dibawah :

• Kita bisa menambahkan Layout baru atau mengedit layout yang sudah dibuat di atas.

• Lalu tambahkan Widget yang kalian inginkan, untuk kali ini saya hanya menggunakan Button.

• Lalu ubah tag ukuran pada Button menjadi wrap_content semua, seperti dibawah ini>

• Lalu tambahkan syntax seperti dibawah ini : 

Jika ingin tampilan mendatar maka gunakan :

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

Jika ingin tampilan menurun maka gunakan :

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

• Maka tampilannya akan seperti di bawah ini.

Vertical

Horizontal

Membuat Relative Layout

Relative Layout adalah jenis layout yang ini berbeda dengan Linear Layout yang hanya bisa diposisikan secara horizontal atau vertical, untuk Relative Layout kita bisa menempatkan posisi Widget sesuai yang kita inginkan. Langsung saja ke tutorialnya.

• Pertama tambahkan Layout baru (caranya sama seperti di atas), lalu ubah Root element-nya menjadi RelativeLayout, lalu klik OK.

• Lalu letakkan Widget sesuai dengan keinginan kita.

• Lalu jika ingin merubah posisi bisa kita drag Widget tersebut ke lokasi yang kita inginkan atau merubah posisi dengan menggunakan syntax, pertama klik tab Text pada bagian kiri bawah Layout Editor.

• Lalu kalian bisa rubah pada bagian syntaxnya memiliki kata margin lalu ubah lebarnya sesuai yang diinginkan.
• Dan untuk keterangan syntaxnya bisa dilihat dibawah.

No.	Syntax	Keterangan
1	android:layout_alignParentTop="true"/"false"	Widget akan menempel pada bagian atas parent(layout)
2	android:layout_alignParentBottom="true"/"false"	Widget akan menempel pada bagian bawah parent(layout)
3	android:layout_alignParentLeft="true"/"false"	Widget akan menempel pada bagian kiri parent(layout)
4	android:layout_alignParentRight="true"/"false"	Widget akan menempel pada bagian kanan parent(layout)
5	android:layout_marginTop="angka dp"	Menambahkan jarak pada bagian atas Widget atau layout
6	android:layout_marginBottom="angka dp"	Menambahkan jarak pada bagian bawah Widget atau layout
7	android:layout_marginLeft="angka dp"	Menambahkan jarak pada bagian kiri Widget atau layout
8	android:layout_marginRight="angka dp"	Menambahkan jarak pada bagian kanan Widget atau layout
9	android:layout_above="@+id/nama widget"	Meletakkan Widget di atas Widget lain yang menjadi referensi
10	android:layout_below="@+id/nama widget"	Meletakkan Widget di bawah Widget lain yang menjadi referensi
11	android:layout_toRightOf="@+id/nama widget"	Meletakkan Widget di kanan Widget lain yang menjadi referensi
12	android:layout_toLeftOf="@+id/nama widget"	Meletakkan Widget di kanan Widget lain yang menjadi referensi

Nah tutorial Mengatur Posisi Widget pada Layout xml Android Studio kali ini cukup sampai disini dulu, semoga kalian paham dan jangan bosan belajar di sini ya.