Cara Mudah 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.

Baca Juga: Cara Mempercepat Kinerja Android Studio

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. Tanpa berpanjang lebar lagi yuk simak penjelasannya dibawah ini.

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 “Belajar_Layout” 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. Kamu pilih tab “activity_main.XML” lalu pilih tab “Design”.

7. silahkan kamu klik “Hello World!” maka akan muncul jendela properties disebalah kiri. Kamu bisa ubah 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, kamu pilih tab “Color” lalu pilih warna tulisan yang kamu 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, kamu 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 kamu klik kembali view all properties. Kita akan mengganti warna tombol tersebut. Caranya kamu cari “backgroud” dan kamu klik.

17. maka akan muncul jendela baru, kamu pilih tab color dan kamu pilih warna yang kamu inginkan. Lalu klik OK.

18. Kamu 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. Kamu bisa mengimport jenis tulisannya jika kamu mau.

19. Jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN kemudian kamu pilih emulator yang kamu 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. Kamu 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. Kamu 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. Kamu bisa lihat pada component Tree nya sudah ada LinearLayout (Vertical).

4. Komponen yang diperlukan adalah:

KOMPONEN	TEXT	ID	LAYOUT
			WIDTH	HEIGHT
TextView	Contoh Layout	Txt1	Match_parent	Wrap_content
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 kamu cari EditText, kamu 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 kamu ketikkan pada username maka tulisan tersebut akan hilang, itulah fungsi dari hint.

Nah mudah bukan? Sekarang kita lanjut ke Linear layout (horizontal).

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. Kamu cukup merubah nya menjadi horizontal. Caranya klik “Linear_layout (vertical) kemudian pada kolom properties kamu pilih orientationnya menjadi horizontal. Maka tampilan template kamu akan berubah horizontal.

2. template mu akan kelihatan berantakan, tetapi tak usah khawatir, kamu tinggal atur lebar dan tinggi dari masing-masing komponen maka tampilannya akan kembali normal.

3. Jika dirasa sudah rapi susunannya, kamu bisa RUN programnya. Dan hasilnya akan seperti ini:

Mudah bukan? ^^ sekarang kita lanjutkan ke Table_layout.

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 kamu isi “table_layout”. Root Element kamu isi “TableLayout”.lalu klik OK.

3. Selanjutnya kamu 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 kamu inputkan komponen TextView pada table1. Drag Text View dan pas kan pada table 1.

7. Kemudian kamu masukkan komponen berikut sesuai dengan table nya. Bisa kamu drag.

KOMPONEN	TABEL
TextView	Table1
EditText	Table2
EditText	Table3
Button	Table4
Button	Table5

8. Kamu bisa lihat susunan Component Tree nya seprti ini:

9. Jika sudah selesai dengan desain, kita kembali edit sedikti pada bagian Text.

10. Kamu cari EditText. Dan kamu ubah sesuai dengan Gambar berikut:

11. Jika sudah. Kamu pilih tab “MainActivity.Java” untuk merubah layout yang akan ditampilkan. Kamu ganti menjadi layout yang ingin kamu 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. Kamu pilih “Layout >> New >> layout resource file”.

2. pada Filename isi “frame_layout” pada RootElement isi “FrameLayout”. Lalu klik OK.

3. kemudian kamu 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 kamu klik Biru. Lalu kamu tarik dan atur ukuranya. Seperti pada gambar. Kemudian klik “View all Properties”

5. Kamu cari “background”.

6. Maka akan muncul jendala baru, kamu 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 kamu ganti dengan layout yang akan kamu tampilkan seprti diatas tadi. Atau lihat gambar berikut:

9. Kemudian RUN program, klik install and continue.

10. Maka hasilnya akan sperti ini.

Gimana mudah juga bukan?? ^^ sekarang kita lanjut ke layout terakhir yaitu scrollView.

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 kamu drag kembali TextView ke dalam ScrollView >> Linear Layout.

5. kemudian kamu masukkan komponen button di bawah textview sebanyak-banyaknya sampai melebihi template android. Bisa dilihat pada gambar berikut:

6. Kemudian kamu pilih tab “ MainActivity.java” kamu ubah lagi layout yang ingin ditampilkan.

7. Jika sudah, RUN program kamu. Dan hasilnya akan seperti ini.

Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa itu yang dimaksud dengan Layout dan Cara Mudah Belajar Layout di Android Studio? Mungkin itu saja tulisan yang membahas tentang pengertian Layout dan Cara Mudah Belajar Layout di Android Studio, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.