Button yang disusun dari atas ke bawah dapat dibuat dengan menggunakan layout
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 Saya akan membahas Layout di Android. Layout memungkinkan Anda untuk membuat tampilan desain menggunakan file XML. Semua file layout harus di simpan dalam path /res/layout folder. Pada tutorial kali ini kita akan membuat 5 layout dalan 1 project. Tanpa berpanjang lebar lagi yuk simak penjelasannya dibawah ini. 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 “Belajar_Layout” atau boleh terserah anda. 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 kita pilih saja yang “Empty Activity”. Lalu klik Next.
5. Kemudian isi kan Activity Name nya sesuai keinginan anda atau biarkan itu defaultnya lalu klik Finish.
6. Tunggu sesaat, jika tampilannya sudah tampil. Kamu pilih tab “activity_main.XML” lalu pilih tab “Design”.
7. silahkan kamu klik “Hello World!” maka akan muncul jendela properties disebalah kiri. Kamu bisa ubah kalimat tersebut pada bagian Text dan silahkan isi juga ID nya.
8. Untuk layout_width & layout height ada dua pilihan, pertama “match_parent” dan yang kedua “warp_content”. Match_parent ini akan menyesuaikan lebar atau tinggi sesuai ukuran layout. Wrap_content ini kita bisa mengatur lebar dan tinggi sesuai keinginan kita. Nah untuk textView ini anda sesuaikan saja dengan gambar berikut.
9. Sekarang kita akan mengedit tulisan ini pada bagian properties. Klik item yang ingin di edit lalu pilih View all Properties.
10. Silahkan anda cari yang berhubungan dengan “text” anda bisa merubah ukuran tulisan, warna tulisan, letak tulisan, dan bnayak lainnya di properties ini. Untuk merubah ukuran tulisan cari TextSize dan rubah ukurannya.
11. untuk mengatur posisi tulisan cari “TextAligment” kemudian pilih “Center” untuk rata tengah.
12. Untuk warna tulisan cari TextColor.
13. Maka akan muncul jendela baru, kamu pilih tab “Color” lalu pilih warna tulisan yang kamu inginkan. Jika sudah klik OK.
14. Sekarang kita masukkan item “button”. Silahkan anda pilih botton pada kolom pallete lalu drag (tarik) ke tampilan androidnya.
15. 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.
16. Kemudian kamu klik kembali view all properties. Kita akan mengganti warna tombol tersebut. Caranya kamu cari “backgroud” dan kamu klik.
17. maka akan muncul jendela baru, kamu pilih tab color dan kamu pilih warna yang kamu inginkan. Lalu klik OK.
18. Kamu juga bisa mengedit tulisan pada tombol tersebut, silahkan cari fungsi dibwah ini.
19. Jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN kemudian kamu pilih emulator yang kamu miliki, lalu klik OK.
20. Kemudian pilih Install and Continue.
21. Tunggu beberapa saat sampai proses gradle selesai, jika sudah selesai maka tampilannya akan seperti ini:
Nah itu dia tadi tentang relativelayout, selanjutnya kita akan membahas 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 (Vertical). Linear layout vertical ini akan menyusun komponen atau item secara vertikal. 1. Masih pada project yang sama. Kamu 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. Kamu isi File name nya “linear_layout” (untuk file name, ketetapan dari android studio untuk huruf kecil pada awal kalimat). Lalu untuk Root element kita ganti menjadi LinearLayout. Jika sudah klik OK.
3. Kamu bisa lihat pada component Tree nya sudah ada LinearLayout (Vertical).
4. Komponen yang diperlukan adalah:
5. Jika sudah meletakkan semua komponen, sekarang kita edit sedikit. Kita pilih tab “TEXT” pada bagian bawah.
6. Kemudian kamu cari EditText, kamu ganti android:text menjadi android:hint. Android hint ini berfungsi untuk membuat tulisan pada text akan hilang jika kita mulai mengetik pada komponen tersebut. Atau kalian bisa lihat gambar berikut:
7. Kemudian kita pilih tab “MainActivity.java”.
8. Rubahlah tujuan layout yang akan ditampilkan dengan layout yang baru kita buat.
9. Kemudian RUN program anda. Klik Install anda continue.
10. Jika berhasil maka hasilnya akan sperti ini:
11. Ketika kamu ketikkan pada username maka tulisan tersebut akan hilang, itulah fungsi dari hint.
Nah mudah bukan? Sekarang kita lanjut ke Linear layout (horizontal). layout ini akan membuat komponen yang anda inputkan disusun secara horizontal. Yuk kita coba buat. 1. Masih pada layout vertical tadi. Kamu cukup merubah nya menjadi horizontal. Caranya klik “Linear_layout (vertical) kemudian pada kolom properties kamu pilih orientationnya menjadi horizontal. Maka tampilan template kamu akan berubah horizontal.
2. template mu akan kelihatan berantakan, tetapi tak usah khawatir, kamu tinggal atur lebar dan tinggi dari masing-masing komponen maka tampilannya akan kembali normal.
3. Jika dirasa sudah rapi susunannya, kamu bisa RUN programnya. Dan hasilnya akan seperti ini:
Mudah bukan? ^^ sekarang kita lanjutkan ke Table_layout. TableLayout adalah layout yang menampilkan elemen view berdasarkan baris dan kolom. Bagi Anda yang telah mempelajari HTML, penggunaan TableLayout disini seperti penggunaan table di HTML yaitu dengan tag
Bài Viết Liên QuanCó thể bạn quan tâmXem NhiềuChúng tôiTrợ giúp |