Layout Android Studio Yang Perlu Kita Ketahui dan Bagaimana Cara Membuatnya

Layout adalah sesuatu yang mendefinisikan struktur visual untuk pengguna atau dapat dikatakan juga sebagai suatu tampilan yang ditampilkan kepada pengguna. Yang akan dibahas kali ini adalah penggunaan dari Relative Layout, Linear Layout, dan Web View.

Layout yang wajib diketahui: 

·         Relative Layout 

·         Linear layout

o   Linear layout Horizontal 

o   Linear layout  Vertikal  

·         Table layout 

·         Frame layout 

·         Scroll View

Penjelasan :

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

Langkah-langkah membuat Relative Layout, sebagai berikut :

1.      Buka Project Baru, Beri nama Layout (nama project terserah kamu). 

     

2.      setelah itu pilih Phone dan Tablet, lalu klik next untuk melanjutkan.

3.      Setelah itu pilih Empty Activity dan klik next untuk melanjutkan.

4.    Beri nama Main Activity, tetapi disini saya tidak mengubah nama hanya klik finish untuk melanjutkan ke proses selanjutnya.

5.    Dibawah ini adalah tampilan setelah proses pembuatan project baru selesai,  terdapat Activity_main.xml, pada file tersebut kita bisa mengedit deain dari aplikasi yang di inginkan, di sebelah kanan terdapat  " Properties " yang berfungsi untuk mengatur komponen yang kita buat.

6.    Drag sebuah Text View kedalam layout, lalu atur width dan height seperti gambar dibawah .

 

7.     Untuk pengaturan lebih lanjut, maka klik " View All Properties "

      

8.      Penganturan textsize untuk mengatur ukuran huruf, atur sesuai keinginan.

      

9.    Text Alignment untuk mengatur posisi text yang dibuat.

10.     Textcolor untuk mengatur warna text yang dibuat.

11.     Masukan sebuah Button kedalam Layout (drag pada pallete Button).

12.     Ubah ukuran Button seperti pada gambar dibawah :

           Match_parent >> untuk menyesuaikan lebar atau tinggi sesuai dengan ukuran layout.

           Wrap_content >> untuk mengatur lebar atau tinggi sesuai dengan keinginan.

    13. Untuk mempercantik tombol, maka tambahka warna pada View All properties >>    background >> pilih warna yang di inginkan.

14. Setelah itu, proses selanjutnya adalah Run aplikasi yang dibuat, disini saya menggunakan genymotion sebagai emulator, klik OK untuk melanjutkan

15.    Berikut hasil yang ditampilkan oleh emulator mengenai Relative Layout.

   Linear Layout

           Linear Layout adalah layout yang terstruktur, Linear layout akan meletakan elemen yang ada didalamnya secara berurutan tergantung orientationnya. Jika orientationnya vertikal maka peletakan elemen akan terurut kebawah, jika orientationnya horizontal maka peletakan elemennya terurut ke samping. 

A.     Linear layout Vertikal   

            adalah Layout yang menyusun komponen secara vertikal.

cara membuat  Linear layout Vertikal yaitu :

1.      untuk membuat Layout baru, maka pilih Res >> New >> Layout Resource File.

2.      Beri nama layout, misalnya Linear_layout, dan klik OK untuk melanjutkan

3.      Masukan sebuah Text kedalam layout lalu ubah Tulisan dan posisi text tersebut ( sama seperti cara yang telah dijelaskan diatas).

4.      Setelah itu masukan plain text dan sebuah button lalu atur propertis sesuai dengan keinginan.

5.      Masukan satu Button lagi dan atur properties dengan cara yang sama.

6.      Pada Text , maka ganti kodingan seperti yang ditunjukan pada gambar, mengubah android:id menjadi android:hint pada edit text.

7.      Untuk melihat hasil run dengan linear layout yang dibuat, maka beralih ke Mainactivity.java dan ubah kodingan seperti pada gambar dibawah ini.

8.      Setelah di Run maka akan tampil hasil sebagai berikut :

   

B.     Linear layout  Horizontal 

Masih dengan file yang sama, untuk membuat Linear layout  Horizontal dengan mengikuti langkah langkah berikut :

                    I.            Klik Linier Layout utuk mengedit properties layout linier, dan pada kolom properties, ubah orientation menjadi " horizontal ".

                 II.            Jika design menjadi berantakan, maka atur kembali ukuran komponen yang dimasukan. lihat contoh pada gambar dibawah.

               III.            Ini adalah tampilan aplikasi setelah di run.

Table layout 

Table  layout adalah layout yang berbentuk seperti tabel yang berdasarkan atas baris dan kolom. 

 cara membuat tabel layout adalah sebagai berikut : 

a.       Untuk membuat Layout baru, maka pilih Res >> New >> Layout Resource File.

        

b.      Beri nama layout, misalnya table_layout, dan klik OK untuk melanjutkan.

c.       Masukan empat buah tabelrow kedalam layout, dan beri ID menjadi tabel1, tabel2, tabel3, dan tabel4.

d.      Lalu buatlah susunan komponen menjadi berikut ini.

e.       Seperti biasa, pada Text, maka ubah komponen Edit text sesuai dengan gambar dibawah :

f.       Untuk menampilkan Table layout yang dibuat, maka ganti kodingan pada MainActivity.java menjadi gambar dibawah:

g.       Berikut adalah hasil Run aplikasi dengan Table Layout :

Frame layout

 Dapat disebut juga sebagai Layout Bingkai.

Cara membuat frame layout adalah sebagai berikut :

          i.            Untuk membuat Layout baru, maka pilih Res >> New >> Layout Resource File.

        ii.            Beri nama layout, misalnya frame_layout, dan klik OK untuk melanjutkan.

      iii.            Masukan empat buah textview dan beri ID sesuai dengan warna yang dinginkan.

 

      iv.            Beri warna pada text view , pilih warna ada kolom Properties >> Background.

        v.            Beri warna semua textview yang di masukan. Maka akan menjadi seperti gambar dibawah ini.

      vi.            Untuk menampilkan Frame layout yang dibuat, maka ubah kodingan pada MainActivity.java menjadi gambar dibawah:

    vii.            Hasil Running applikasi dengan emulator :

Scroll View

 Scroll View adalah halaman yang bisa di scroll atau di runtut. 

Cara membuat Scroll view :

a)      Untuk membuat Layout baru, maka pilih Res >> New >> Layout Resource File.

b)      Beri nama layout, misalnya scroll_view , dan klik OK untuk melanjutkan.

           c) Masukkan Sebuah Scroll View Pada Layout

d)  Lalu masukan semua elemen sehingga menjadi susunan komponen seperti gambar dibawah ini.

 e) Untuk menampilkan Scroll View yang dibuat, maka ubah kodingan pada MainActivity.java menjadi gambar dibawah:

f)   Berikut hasil Running Scroll View pada emulator.

A.    Form login

1.       Klik menu file >> New >> New Project. kita akan membuat from login

2. Tunggu sesaat, jika tampilannya sudah tampil. Kamu pilih tab “activity_main.XML” lalu pilih tab “Design”. Dan masukan dua buah textview dan satu tombol button seperti gambar dibawah ini tulis User Name :

 

           

                  selanjut Pasword

         

                  selanjutnya Login

            3. sebelum menampilkan hasil Run kita harus mengecek kodingan yang harus kita ubah                              seperti gambar dibawah ini 

7.      Selanjutnya Silahkan klik tombol RUN kemudian kamu pilih emulator yang kamu miliki, lalu klik OK, dan hasilnya seperti berikut untuk login yang berhasil:

     contohnya : user name : admin

                         pasword    : admin

Untuk login yang failed :

kenapa login failed dikarenakan paswordnya tidak cocok

misalnya kita gunakan : Username : admin

                                        Pasword  : saya

Maka hasinya akan seperti gambar dibah ini

Demikian tutorial hari ini, semoga bermanfaat :)