Bermacam macam Layout dan Cara Membuat Layout
Layout adalah tempat ataupun ruang untuk kita untuk
meletakan berbagai pallete ataupun komponen yang kita butuhkan untuk membuat
sebuah aplikasi.
Cara membuat Relative Layout, ikuti langkah langkah berikut ini :
a. Buka Project Baru, Beri nama Layout atau nama project terserah kamu.
b. setelah itu pilih Phone dan Tablet, lalu klik next untuk melanjutkan.
c. Setelah itu pilih Empty Activity dan klik next untuk melanjutkan.
d. Beri nama Main Activity, tetapi disini saya tidak mengubah nama hanya klik finish untuk melanjutkan ke proses selanjutnya.
e. 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.
f. Drag sebuah Text View kedalam layout, lalu atur width dan height seperti gambar dibawah .
g. Untuk pengaturan lebih lanjut, maka klik " View All Properties "
h. Penganturan textsize untuk mengatur ukuran huruf, atur sesuai keinginan.
i. Text Alignment untuk mengatur posisi text yang dibuat.
j. Textcolor untuk mengatur warna text yang dibuat.
k. Masukan sebuah Button kedalam Layout (drag pada pallete Button).
L. 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.
m. Untuk mempercantik tombol, maka tambahka warna pada View All properties >> background >> pilih warna yang di inginkan.
n. Setelah itu, proses selanjutnya adalah Run aplikasi yang dibuat, disini saya menggunakan genymotion sebagai emulator, klik OK untuk melanjutkan.
o. Berikut hasil yang ditampilkan oleh emulator mengenai Relative Layout.
2. 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 :
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 :
1. Klik Linier Layout utuk mengedit properties layout linier, dan pada kolom properties, ubah orientation menjadi " horizontal ".
2. Jika design menjadi berantakan, maka atur kembali ukuran komponen yang dimasukan. lihat contoh pada gambar dibawah.
3. Ini adalah tampilan aplikasi setelah di run.
3. 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:
4. Frame layout
b. Beri nama layout, misalnya frame_layout, dan klik OK untuk melanjutkan.
c. Masukan empat buah textview dan beri ID sesuai dengan warna yang dinginkan.
e. Beri warna semua textview yang di masukan. Maka akan menjadi seperti gambar dibawah ini.
f. Untuk menampilkan Frame layout yang dibuat, maka ubah kodingan pada MainActivity.java menjadi gambar dibawah:
g. Hasil Running applikasi dengan emulator :
b. Beri nama layout, misalnya scroll_view , dan klik OK untuk melanjutkan.
c. Masukan 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.
Macam macam Layout yang wajib diketahui:
- Relative Layout
- Linear layout
a. Linear layout Horizontal
b. Linear layout Vertikal
- Table layout
- Frame layout
- Scroll View
- Relative Layout
- Linear layout
a. Linear layout Horizontal
b. Linear layout Vertikal
- Table layout
- Frame layout
- Scroll View
Okee langsung saja kita ke penjelasan dan tutorialnya ^^
1. Relative Layout
Relative layout adalah layout yang tergantung. Relative layout akan meletakkan elemen secara bebas dan tidak terurut. Peletakan tergantung berdasarkan ketergantungannya kepada komponen lain, misalnya kepada parent atau elemen lain.
1. Relative Layout
Relative layout adalah layout yang tergantung. Relative layout akan meletakkan elemen secara bebas dan tidak terurut. Peletakan tergantung berdasarkan ketergantungannya kepada komponen lain, misalnya kepada parent atau elemen lain.
Cara membuat Relative Layout, ikuti langkah langkah berikut ini :
a. Buka Project Baru, Beri nama Layout atau nama project terserah kamu.
b. setelah itu pilih Phone dan Tablet, lalu klik next untuk melanjutkan.
c. Setelah itu pilih Empty Activity dan klik next untuk melanjutkan.
d. Beri nama Main Activity, tetapi disini saya tidak mengubah nama hanya klik finish untuk melanjutkan ke proses selanjutnya.
e. 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.
f. Drag sebuah Text View kedalam layout, lalu atur width dan height seperti gambar dibawah .
g. Untuk pengaturan lebih lanjut, maka klik " View All Properties "
h. Penganturan textsize untuk mengatur ukuran huruf, atur sesuai keinginan.
i. Text Alignment untuk mengatur posisi text yang dibuat.
k. Masukan sebuah Button kedalam Layout (drag pada pallete Button).
L. 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.
m. Untuk mempercantik tombol, maka tambahka warna pada View All properties >> background >> pilih warna yang di inginkan.
o. Berikut hasil yang ditampilkan oleh emulator mengenai Relative Layout.
2. 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 :
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 :
1. Klik Linier Layout utuk mengedit properties layout linier, dan pada kolom properties, ubah orientation menjadi " horizontal ".
2. Jika design menjadi berantakan, maka atur kembali ukuran komponen yang dimasukan. lihat contoh pada gambar dibawah.
3. Ini adalah tampilan aplikasi setelah di run.
3. 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 :
4. Frame layout
Dapat disebut juga sebagai Layout Bingkai.
Cara membuat frame layout adalah sebagai berikut :
a. Untuk membuat Layout baru, maka pilih Res >> New >> Layout Resource File.
b. Beri nama layout, misalnya frame_layout, dan klik OK untuk melanjutkan.
c. Masukan empat buah textview dan beri ID sesuai dengan warna yang dinginkan.
d. Beri warna pada text view , pilih warna ada kolom Properties >> Background.
e. Beri warna semua textview yang di masukan. Maka akan menjadi seperti gambar dibawah ini.
g. Hasil Running applikasi dengan emulator :
5. 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. Masukan 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.
Selamat mencoba, semoga bermanfaat :)
Komentar
Posting Komentar