Belajar Layout di Android Studio

Layout adalah hal paling penting sebelum memulai project pada android studio, karena layout
berfungsi untuk meletakkan bermacam-macam komponen di atasnya, bisa dibilang layout adalah
sebuah wadah atau tempat untuk memposisikan komponen yang akan kita masukkan.

Dalam pemprograman Android, ada beberapa layout yang digunakan untuk menempatkan
bermacam-macam “view” seperti button dan text. Untuk membuat layout cukup mudah, melalui
folder “res/layout “ dalam project, tempatkan file .xml di dalam folder tersebut.

Pada tutorial kali ini Saya akan membahas Layout di Android. Layout memungkinkan Anda untuk
membuat tampilan desain menggunakan file XML. Semua file layout harus di simpan dalam path
/res/layout folder.

Pada tutorial kali ini kita akan membuat 5 layout dalan 1 project. Berikut adalah.

A. Relative Layout
RelativeLayout adalah layout yang menampilkan elemen-elemen view dalam posisi yang relatif.
Posisi dari sebuah view yang dapat diletakkan relatif terhadap posisi elemen view di sekitarnya
atau relatif terhadap area layout utama. Sebuah desain tampilan aplikasi bisa dibuat lebih mudah
dan sederhana menggunakan RelativeLayout dibandingkan dengan LinearLayout.
Cara pembuatannya sebagai berikut:
1. Klik menu file >> New >> New Project.

2. Isi Application Name nya “BelajarLayout” atau boleh terserah anda. Kemudian klik Next.

3. Pada Target Android Devices silahkan pilih untuk “Phone dan Tablet” dan untuk minimum SDK
nya kita pilih saja “IceCreamSandwich”. Kemudian klik Next.
4. Untuk Activity nya kita pilih saja yang “Empty Activity”. Lalu klik Next.
5. Kemudian isi kan Activity Name nya sesuai keinginan anda atau biarkan itu defaultnya lalu klik
Finish.

6. Tunggu sesaat, jika tampilannya sudah tampil. Anda pilih tab “activity_main.xml” lalu pilih tab
“Design”.
7. Silahkan Anda klik “Hello World!” maka akan muncul jendela properties di sebelah kanan.
Anda bisa merubah kalimat tersebut pada bagian Text dan silahkan isi juga ID nya.

8. Untuk layout_width & layout height ada dua pilihan, pertama “match_parent” dan yang kedua
“warp_content”.

Match_parent ini akan menyesuaikan lebar atau tinggi sesuai ukuran layout.
Wrap_content ini kita bisa mengatur lebar dan tinggi sesuai keinginan kita.

Nah untuk textView ini anda sesuaikan saja dengan gambar berikut.

9. Sekarang kita akan mengedit tulisan ini pada bagian properties. Klik item yang ingin di edit lalu
pilih View all Properties.
10. Silahkan anda cari yang berhubungan dengan “text” anda bisa merubah ukuran tulisan, warna
tulisan, letak tulisan, dan bnayak lainnya di properties ini. Untuk merubah ukuran tulisan cari
TextSize dan rubah ukurannya.
11. Untuk mengatur posisi tulisan cari “TextAligment” kemudian pilih “Center” untuk rata tengah.

12. Untuk warna tulisan cari TextColor.

13. Maka akan muncul jendela baru, kemudian pilih tab “Color” lalu pilih warna tulisan yang Anda
inginkan. Jika sudah klik OK.

14. Sekarang kita masukkan item “button”. Silahkan anda pilih botton pada kolom pallete lalu
drag (tarik) ke tampilan androidnya.
15. sekarang kita edit “botton” tersebut. Select button nya kemudian di tab properties ada
Layout_width dan layout height, Anda pilih “match_content” maka dia akan menyesuaikan lebar
dan tinggi sesuai space yang tersedia. Untuk mengganti text bisa di ganti pada kolom text.

16. Kemudian Anda klik kembali view all properties. Kita akan mengganti warna tombol tersebut.
Caranya Anda cari “backgroud” dan Anda klik.
17. maka akan muncul jendela baru, Anda pilih tab color dan Anda pilih warna yang Anda
inginkan. Lalu klik OK.
18. Anda juga bisa mengedit tulisan pada tombol tersebut, silahkan cari fungsi dibwah ini.

• TextAligment = untuk perataan penulisan seperti rata tengah,kiri,kanan atauu justify/

• TextColor = untuk warna tulisan.
• TextSize = ukruan tulisan
• TextStyle = jenis tulisan / gaya tulisan seperti “ times new roman, clibri dll” tapi fontstyle
disi masih terbatas. Anda bisa mengimport jenis tulisannya jika Anda mau.
19. Jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN
kemudian Anda pilih emulator yang Anda miliki, lalu klik OK.

20. Kemudian pilih Install and Continue.

21. Tunggu beberapa saat sampai proses gradle selesai, jika sudah selesai maka tampilannya akan
seperti ini:
Nah itu dia tadi tentang relativelayout, selanjutnya kita akan membahas linear_layout.

B. Linear Layout
LinearLayout adalah layout yang menampilkan elemen-elemen view dengan arah linear, vertikal
ataupun horizontal. Ini adalah layout paling sederhana di Android.

a. Linear Layout (Vertical).

Linear layout vertical ini akan menyusun komponen atau item secara vertikal.
1. Masih pada project yang sama. Anda lihat di kolom sebelah kiri pada susunan file. Pilih folder
“Res >> Layout”. Klik kanan pada Layout kemudian pilih “New >> Layout resource file”
2. Maka akan muncul jendela baru. Anda isi File name nya “linear_layout” (untuk file name,
ketetapan dari android studio untuk huruf kecil pada awal kalimat). Lalu untuk Root element kita
ganti menjadi LinearLayout. Jika sudah klik OK.
3. Anda bisa lihat pada component Tree nya sudah ada LinearLayout (Vertical).

4. Komponen yang diperlukan adalah:

LAYOUT
KOMPONEN TEXT ID
WIDTH HEIGHT
Contoh Linier
TextView Layout Txt1 Match_parent Wrap_content
Vertical
EditText/PlainText Username EditText Match_parent Wrap_content
Button LOGIN Button1 Match_parent Wrap_content
Button CANCEL Button2 Match_parent Wrap_content
5. Jika sudah meletakkan semua komponen, sekarang kita edit sedikit. Kita pilih tab “TEXT” pada
bagian bawah.

6. Kemudian Anda cari EditText, Anda ganti android:text menjadi android:hint. Android hint ini
berfungsi untuk membuat tulisan pada text akan hilang jika kita mulai mengetik pada komponen
tersebut. Atau kalian bisa lihat gambar berikut:
before
after

7. Kemudian kita pilih tab “MainActivity.java”.

8. Rubahlah tujuan layout yang akan ditampilkan dengan layout yang baru kita buat.

9. Kemudian RUN program anda. Klik Install anda continue.

10. Jika berhasil maka hasilnya akan sperti ini:

11. Ketika Anda ketikkan pada username maka tulisan tersebut akan hilang, itulah fungsi dari hint.

b. Linear_layout ( Horizontal )

layout ini akan membuat komponen yang anda inputkan disusun secara horizontal. Yuk kita coba
buat.

1. Masih pada layout vertical tadi. Anda cukup merubah nya menjadi horizontal. Caranya klik
“Linear_layout (vertical) kemudian pada kolom properties Anda pilih orientationnya menjadi
horizontal. Maka tampilan template Anda akan berubah horizontal.
2. template mu akan kelihatan berantakan, tetapi tak usah khawatir, Anda tinggal atur lebar dan
tinggi dari masing- masing komponen maka tampilannya akan kembali normal.

3. Jika dirasa sudah rapi susunannya, Anda bisa RUN programnya. Dan hasilnya akan seperti ini:
C. Table Layout
TableLayout adalah layout yang menampilkan elemen view berdasarkan baris dan kolom. Bagi
Anda yang telah mempelajari HTML, penggunaan TableLayout disini seperti penggunaan table
di HTML yaitu dengan tag <table> dan <tr> serta <td>.

1. Masih pada project yang sama. Klik kanan pada folder Layout >> New >> Layout resource file.
2. File name Anda isi “table_layout”. Root Element Anda isi “TableLayout”.lalu klik OK.

3. Selanjutnya Anda masukkan komponen “TableRow”. Drag tablerow tepat pada TableLayout.
Masukkan table row sebanyak 4 buah.
4. Maka hasilnya akan seprti ini pada Component Tree:
5. kemudian edit ID table menjadi tabel1, table2, table3 dan table4.
6. Kemudian Anda inputkan komponen TextView pada table1. Drag Text View dan pas kan pada
table 1.
7. Kemudian Anda masukkan komponen berikut sesuai dengan table nya. Bisa Anda drag.

KOMPONEN TABEL

TextView Table1
EditText Table2
EditText Table3
Button Table4
Button Table5
8. Anda bisa lihat susunan Component Tree nya seprti ini:

9. Jika sudah selesai dengan desain, kita kembali edit sedikti pada bagian Text.
10. Anda cari EditText. Dan Anda ubah sesuai dengan Gambar berikut:

11. Jika sudah. Anda pilih tab “MainActivity.Java” untuk merubah layout yang akan ditampilkan.
Anda ganti menjadi layout yang ingin Anda tampilkan.

12. Jika sudah. RUN program dan klik Install and continue.
13. Maka hasilnya akan seperti ini:

Mudah juga bukan? Sekarang kita lanjutkan tutorialnya pada FrameLayout.

D. Frame Layout
Frame layout adalah sebuah layout seperti bingkai.

1. Masih pada project yang sama. Anda pilih “Layout >> New >> layout resource file”.
2. pada Filename isi “frame_layout” pada RootElement isi “FrameLayout”. Lalu klik OK.

3. kemudian Anda drag TextView sebanyak 4 buah ke dalam FrameLayout. Kemudian ubah setiap
ID nya menjadi warna biar mudah membedakannya. Komponen paling atas akan berada paling
bawah di template.
4. Kemudian Anda klik Biru. Lalu Anda tarik dan atur ukuranya. Seperti pada gambar. Kemudian
klik “View all Properties”

5. Anda cari “background”.

6. Maka akan muncul jendala baru, Anda pilih tab”color” dan pilih warna biru. Lalu klik OK.
7. Lakukan hal yang sama pada TextView lannya. Sehingga hasilnya akan seprti ini.
8. jika sudah selesai editing, klik tab MainActivity.java kemudian Anda ganti dengan layout yang
akan Anda tampilkan seprti diatas tadi. Atau lihat gambar berikut:

9. Kemudian RUN program, klik install and continue.

10. Maka hasilnya akan sperti ini.

E. Scroll View
ScrollView digunakan untuk membuat suatu halaman bisa di scroll. Atau seperti artikel yang
panjang kebawah maka kita bisa gunakan scrollview.

1. Masih di project yang sama. Klik “Layout >> New >> layout resource File”.

2. untuk file name isi “scroll_view” boleh bebas, untuk root element isi “Linear Layout”. Jika
sudah klik OK.

3. Kemudian pilih scroll view dan drag ke linearlayout.

4. kemudian Anda drag kembali TextView ke dalam ScrollView >> Linear Layout.
5. kemudian Anda masukkan komponen button di bawah textview sebanyak-banyaknya sampai
melebihi template android. Bisa dilihat pada gambar berikut:
6. Kemudian Anda pilih tab “ MainActivity.java” Anda ubah lagi layout yang ingin ditampilkan.
7. Jika sudah, RUN program Anda. Dan hasilnya akan seperti ini.