Let's Love: Tutorial Membuat Layout Pada Android Studio

A. Relative Layout

langkah membuatnya sebagai berikut:

1. klik menu file > New > New project

2. isi aplication name boleh terserah disini saya membuat "Belajar Layout" lalu Next

3.setelah klik next maka akan muncul "Target android device" ini juga pilih sesuai ke inginan disini saya menggunakan android 4.2 (jelly bean) lalu 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,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. Lihat pada gambar

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

8. selanjutnya anda bisa mengatur TextColor,FontColor sesuai keinginan anda pada "Properties"

9. lalu masukkan "Button" yang terdapat di pallet, 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.

10. kemudian anda klik "all properties" untuk menambahkan warna background pada "button"

11. jika sudah selesai anda desain bisa di run maka hasilnya seperti ini

selesai mudahkan, selanjutnya kita akan membuat linear layout. pada linear layout terdapat dua bentuk layout yaitu vertical dan horizontal.
berikut langkah - langkahnya :

B. LINEAR LAYOUT

LINERAR LAYOUT <VERTICAL>

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” Lalu untuk Root element kita ganti menjadi LinearLayout. Jika sudah klik OK

3. anda bisa menbahkan editView, editText, dan button seperti pada gambar
4. jika anda susah selessai meletakkan komponen tsb anda bisa meng edit sedikit pada tab TEXT pada bagian bawah
5.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:

sebelum:

sesudah:

6. lalu pilih tab “MainActivity.java” lalu ubahlah tujuan layout yang akan ditampilkan dengan layout yang baru kita buat.

7. lalu RUN program,

LINEAR LAYOUT <HORIZONTAL>

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. nanti templetenya akan berantakan, tapi jangan khawatir anda bisa mengatur akurannya dan akan kembali normal
3. jika sudah rapi anda bisa RUN programnya maka akan seperti ini tampilan linear layout horizontal

C. Table Layout

berikut langkah - langkah membuat table layout

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. kemudian edit ID table menjadi tabel1, table2, table3 dan table4.

5. Kemudian kamu inputkan komponen TextView pada table1. Drag Text View dan pas kan pada table 1.

6. Jika sudah selesai , kita kembali edit sedikit pada bagian Text.

7. anda cari EditText. Dan ubah sesuai dengan Gambar berikut:

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

9. setelah selesai RUN programnya maka seperti ini tampilannya

D. Frame Layout

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 MERAH. Lalu kamu tarik dan atur ukuranya. Kemudian klik “View all Properties”
5. 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. Setelah selesai maka RUN program, maka seperti ini tampilannya

E. Scroll View

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