Tutorial Belajar Layout Pada Android Studio

BELAJAR LAYOUT

Haii guys, apa kabar kabar??? Semoga sehat selalu yaa😉😊
Mampir lagi di blog saya yaa heheh...

Layout adalah komponen dasar dalam pembentukan UI dan merupakan container utama untuk komponen-komponen lain pada tampilan aplikasi Android. Dalam satu tampilan aplikasi Android bisa terdapat lebih dari satu Layout dengan adanya sebuah file XML layout sebagai parent, dan dimungkinkan adanya nested layout dalam satu file UI XML.
Kali ini kita akan membuat 5 layout dalam 1 project menggunakan Layout pada Android Studio. Yukk simak tutorial di bawah ini :

A. Relative Layout

Merupakan Layout yang paling fleksibel karena posisi dari masing-masing komponen di dalamnya dapat mengacu secara relatif paa komponen yang lainnya dan juga dapat mengacu secara relatif ke batas layar. Adapun langkah-langkahnya sebagai berikut :
1. Pilih menu File -> New -> New Project

2. Konfigurasi project baru dengan mengisi Application Name nya terserah anda, saya contohkan di sini "belajar_layout", lalu klik Next.

3. Pada Target Android Devices pilih "Phone and Tablet" dan minimum SDK nya pilih saja "IceCreamSandwich". Kemudian klik Next.

4. Pada Add an Activity to Mobile, pilih Empty Activity dan klik Next

5. Selanjutnya isi Activity Name nya "MainActivity" , pilih Finish

6. Setelah muncul tampilan seperti dibawah ini, silahkan klik Hello World maka akan muncul Properties sebelah kanan desain. Disini anda bisa edit

7. Silahkan edit Text dan juga ID nya pada bagian Properties. Untuk layout_width dan laayout_height ada 2 pilihan yaitu match_parent dan wrap_content.

match_parent : menyesuaikan lebar atau tinggi

wrap_content : mengatur lebar atau tinggi sesuai keinginan kita

8. Selanjutnya kita akan mengedit teks pada bagian Properties. Klik item yang akan diedit lalu pilih View all properties

Disini kita bisa mengubah ukuran tulisan, letak dan warna tulisan dan masih banyak lagi. Untuk merubah ukuran tulisan pilih TextSize dan silahkan ubah sesuai keinginan kalian.

9. Untuk mengatur posisi teks, pilih "textAlignment", pilih Center untuk rata tengah

10. Selanjutnya untuk warna tulisan, cari textColor

11. Maka akan muncul jendela baru, pilih tab "Color" pilih warna yang diinginkan

12. Selanjutnya kita akan memasukkan item button, pilih "Button" pada Palette lalu drag ke desain androidnya

13. Selanjutnya silahkan edit button. Select button, lalu pada layout_width dan layout_height silahkan pilih match_content yang ada pada Properties, maka dia akan menyesuaikan lebar dan tingginya.
Untuk mengedit teks bisa ganti pada kolom text.

14. Kemudian klik View all properties. Untuk mengganti warna tombol, cari "Background" silahkan klik.

15. Setelah muncul jendela baru, cari tab "Color", pilih warna yang diinginkan

16. Jika sudah bagus, aktifkan emulator yang dimiliki. Saya disini menggunakan Genymotion.Silahkan running program, dengan klik tombol "RUN"

17. Tunggu sampai proses gradle selesai, maka akan muncul tampilan seperti di bawah ini

Itulah tutorial relative layout. Selanjutnya kita akan belajar tentang Linear Layout

B. Linear Layout

Linear Layout adalah sekelompok tampilan yang menyejajarkan semua anak dalam satu arah, secara vertikal atau horizontal. Anda bisa menetapkan arah layout dengan atribut android:orientation

a. Linear Layout Vertical

Menyusun komponen secara vertical
1. Masih pada project yang sama. Pilih res -> Layout. Klik kanan pada Layout lalu pilih New -> Layout resouce file

2. Isi File name nya "linear_layout" (ketetapan Android Studio, file name huruf kecil diawal). Root element ganti "LinearLayout", lalu klik "OK".

3.Adapun komponen yang diperlukan

4. Jika komponennya sudah semua. Pilih tab "text" pada bagian bawah sebelah tab desain.
Silahkan ganti "text" dengan "hint"

5. Kemudian pilih "MainActivity.java". Ubah tujuan layout yang akan ditampilkan dengan layout yang baru kita buat.
Before:

After :

6. Setelah itu silahkan RUN, maka akan muncul tampilan seperti dibawah ini

Ketik nama username, maka tulisan Masukkan Username akan hilang. Itulah fungsi dari hint tadi.

b. Linear Layout horizontal
Membuat komponen secara horizontal.
1. Masih pada layout vertical tadi. Kita cukup merubahnya menjadi horizontal.
Caranya klik "LinearLayout (vertical)" kemudian pada kolom Properties pilih orientationnya "Horizontal". Maka akan muncul tampilan seperti dibawah ini

2.Silahkan atur lebar dan tingginya.

3. Jika sudah rapi dan bagus, silahkan RUN.

C. Table Layout

Table Layout adalah layout yang menampilkan elemen view berdasarkan baris dan kolom

1. Masih pada project yang sama. Klik kanan pada folder Layout -> New -> Layout resource file

2. Isi File name "table_layout" dan root element "TableLayout". Klik OK

3. Selanjutnya masukkan komponen "TableRow". Drag TableRow pada Layouts tepat pada "TableLayout" sebanyak 4 buah.

4. Maka hasilnya akan seperti dibawah ini pada Components Tree

5. Kemudian edit ID table menjadi table1, table2, table3 dan table4.

6. Kemudian inputkan komponen TextView pada table1. Drag TextView dan tepatkan pada table1

7. Kemudian masukkan komponen berikut sesuai dengan tablenya. Bisa di drag.

8. Maka dapat dilihat sperti gambar dibawah ini

9. Jika desainnya sudah selesai, kita pilih text

10. Setelah itu pilih tab "MainActivity.java" untuk merubah layout yang akan ditampilkan.

11. Kemudian silahkan RUN.

D. Frame Layout

Frame Layout merupakan sebuah layout seperti bingkai.

1. Masih di project yang sama. Pilih Layout -> New -> Layout resource file

2. Pada File name isi "frame_layout" dan pada Root element "FrameLayout". Lalu klik OK.

3. Kemudian drag TextView sebanyak 4 buah ke dalam FrameLayout. Kemudian ubah setiap ID nya menjadi warna yang berbeda supaya mudah membedakannya dan atur juga ukurannya. Komponen paling atas akan berada paling bawah pada template.

4. Selanjutnya cari background pada View all properties. Pilih Color dan pilih warna yang diinginkan lalu klik OK.

5. Lakukan juga pada TextView yang lainnya sehingga seperti gambar dibawah ini

6. Jika sudah selesai editing, pilih tab MainActivity.java kemudian ganti dengan layout yang akan ditampilkan

7. Selanjutnya RUN program

E. Scroll View

Scroll view digunakan untuk membuat suatu halaman yang bisa di scroll.

1. Masih di project yang sama. Klik kanan Layout -> New -> Layout resource file