Belajar Membuat Layout

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.

Berikut ikuti cara pembuatannya:
1. Klik menu file, pilih new lalu klik new project.

 

2. Masukkan application name misalnya “layoutku”

3. Pada Target Android Devices silahkan pilih saja Android 4.2 (jelly bean) . 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 misalnya : “pertama” atau biarkan itu defaultnya lalu klik Finish.

6. Tunggu sesaat, jika tampilannya sudah tampil. Kamu pilih tab “activity_main.XML” lalu pilih tab “Design”. Masukkan textview misalnya “saya belajar aplikasi mobile” dan button misalnya “yeee zeruuu!!!”

7.  lalu dari design pindah ke  text pada tab “pertama.XML”. lalu ganti pada text view dan Button. “match_parent” maka dia akan menyesuaikan lebar dan tinggi sesuai space yang tersedia.

8. ganti pada mainactivity.java menjadi nama file .xml misalnya: “pertama”.

9. jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN kemudian kamu pilih emulator yang kamu miliki, lalu klik OK.

10. pastikan apk genymotion anda telah aktif maka akan muncul hasil run sebagai berikut :

B. Linear Layout

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

Linear_layout ( Horizontal )

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

1.       Masih pada project yang sama. Pilih folder “Res pilih Layout”. Klik kanan pada Layout kemudian pilih New lalu klik Layout resource file

2.       Isi File name misalnya : “kedua”

3.       Masukkan plain text dan mengisi dengan misalnya : “apakah anda senang?” dan Button misalnya dengan pilihan  “iya atau tidak”

4.       Lalu dari design pindah ke  text pada tab “kedua.XML”. lalu ganti pada text view  menjadi android:hint agar tulisan dapat disembunyikan ketika mengedit text.

5.        ganti pada mainactivity.java menjadi nama file .xml misalnya: “kedua”.

6.       jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN kemudian kamu pilih emulator yang kamu miliki, lalu klik OK.

7.       pastikan apk genymotion anda telah aktif maka akan muncul hasil run sebagai berikut :

C. Frame Layout

Frame layout adalah sebuah layout seperti bingkai.

1.       Masih pada project yang sama. Kamu pilih Layout pilih New klik layout resource file. Seperti langka 1-2 pada linear layout

2.       Masukkan beberapa textview

3.       Lalu dari design pindah ke  text pada tab “ketiga.XML”. lalu ganti pada text view. Perhatikan gambar berikut:

 

4.       ganti pada mainactivity.java menjadi nama file .xml misalnya: “ketiga”.

5.       jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN kemudian kamu pilih emulator yang kamu miliki, lalu klik OK.

6.       pastikan apk genymotion anda telah aktif maka akan muncul hasil run sebagai berikut :

D. 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 linear layout.

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.