Cara Membuat Layout Pada Android Studio.

Cara Membuat Layout Pada 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 Ane akan membahas Layout di Android. Layout memungkinkan Sahabat untuk membuat tampilan desain menggunakan file XML. Semua file layout harus di simpan dalam path /res/layout folder.

Pada tutorial kali ini Sahabat 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 “Layoutku” atau boleh terserah Sahabat. 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 Sahabat pilih saja yang “Empty Activity”. Lalu klik Next.

5. Kemudian isi kan Activity Name nya sesuai keinginan Sahabat atau biarkan itu defaultnya lalu klik Finish.

6. Tunggu sesaat, jika tampilannya sudah tampil. Sahabat pilih tab “activity_main.XML” lalu pilih tab “Design”.

7. silahkan kamu klik “Hello World!” maka akan muncul jendela properties disebalah kiri. Sahabat bisa ubah kalimat tersebut pada bagian Text dan silahkan isi juga ID nya.

8. 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. Dan sahabat bias tambahkan designnya dengan mengganti warna text, button dll.

9. Kemudian Sahabat klik Text disamping menu design. Sahabat cumah menambahkan perintah yang telah dimerahkan dibawah. 

10. Jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN kemudian kamu pilih emulator genymotion sesuai pada tutorial sebelumnya yang telah sahabat miliki, lalu klik OK.

11. Kemudian tunggu hingga tampilannya keluar di genymotion

Nah itu dia tadi tentang relativelayout, selanjutnya sahabat 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.

Linear layout vertical ini akan menyusun komponen atau item secara vertikal.

1. Masih pada project yang sama. Sahabat 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. Sahabat isi File name nya “linear_layout” (untuk file name, ketetapan dari android studio untuk huruf kecil pada awal kalimat). Lalu untuk Root element sahabat ganti menjadi LinearLayout. Jika sudah klik OK

3. 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

4. Jika sudah meletakkan semua komponen, sekarang kita edit sedikit. Sahabat pilih tab “TEXT” pada bagian bawah.

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

before

After

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

9. Kemudian RUN program sahabat.

10. Jika berhasil maka hasilnya akan sperti ini:

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

D. Frame Layout

Frame layout adalah sebuah layout seperti bingkai.

1. Masih pada project yang sama. sahabat pilih “Layout >> New >> layout resource file”.

2. pada Filename isi “sesuai yang sahabat inginkan”. Lalu klik OK.

3. kemudian sahabat 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 sahabat klik menu text. Lalu sahabat atur ukuranya. Seperti pada gambar.

5.pada mainActivity.java sesuaikan nama project yang sahabat buat, perhatikan pada gambar.

7. Lalu sahabat bias RUN projectnya. Sehingga hasilnya akan seprti ini.

Gimana mudah juga bukan?? ^^ sekarang Sahabat 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 sahabat bisa gunakan scrollview.

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

2. untuk file name isi “terserah sahabat” boleh bebas. Jika sudah klik OK.

3. Kemudian pilih scroll view dan drag ke linearlayout

4. kemudian sahabat drag kembali TextView ke dalam ScrollView >> Linear Layout.

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

6. pada menu text sahabat bisa juga menambah button dengan cara mengetikan perintah dibawah secara manual.

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

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

Nah Bagaimana…? apakah sekarang sahabat 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 sahabat yang lain, sekian dan terimakasih.