Baiklah. Saya akan menjawab pertanyaan-
pertanyaan ini sebelum masuk ke XML.
Pertama, adalah memilih view.
Saya akan menggambar kotak di
sekeliling yang saya lihat.
Oke, jadi ada lima view berbeda
tidak termasuk view group, yang
secara teknis dianggap satu view.
Tapi, lima view ini adalah
dua TextViews di atas sini.
diikuti oleh tiga tombol.
Dan tidak ada ImageViews di manapun
jadi saya rasa tidak perlu ImageViews.
Anda mungkin berpikir kenapa saya
buat dua ini adalah TextViews berbeda,
pada produk akhir, styling
Team A dan skornya
terlihat sangat berbeda.
Jadi saya putuskan untuk membiarkan
keduanya sebagai TextViews terpisah.
Lanjut ke langkah kedua,
memposisikan view.
Saya akan memilih ViewGroup mana
yang akan dipakai di sini.
Ada dua dalam benak saya yaitu
linear layout dan relative layout.
Ini adalah kolom vertikal pada view.
Jadi lumayan jelas apa yang saya mau,
yaitu linear layout.
Terakhir saya masuk ke langkah
ketiga, menata view.
Dan saya akan mengerjakannya
saat bekerja dengan XML.
Mari kita masuk ke XML.
Saya ingin melihat
ke tab Text.
Hal pertama yang akan saya
lakukan di sini adalah
menghapus yang tidak diperlukan.
Saya akan lanjut dan mulai dengan
menghapus TextView ini.
Dan semua paddingLeft, paddingRight,
paddingTop dan paddingBottom,
juga akan saya hapus.
Hati-hati, jangan menghapus
yang diperlukan.
Oke.
Kita telah sepakat bahwa ViewGroup yang
akan digunakan bukan relative layout
tapi linear layout, maka saya akan
mengubahnya sekarang.
Dalam linear layout ini saya akan
membuat dua TextViews
dan tiga tombol.
Saya akan memulai membuatnya.
Saya tidak akan terlalu
spesifik tentang lebar dan
tinggi TextViews ini nantinya.
Saat ini saya akan membiarkannya
sebagai wrap_content
yang akan menempatkan kotak TextView
di sekeliling teksnya.
Saya akan menentukan teks untuk
TextView ini juga.
TextView pertama ini akan
terbaca Team A.
Mari kita lihat hasilnya di Preview.
Saya dapat melihat TextView kecil
di sini yang bernama Team A.
Mari kita buat
lebih banyak lagi.
Yang di bawahnya adalah skor,
itu juga sebuah TextView.
Kita akan ketik Text.
Saya lihat ada tulisan TextView,
maka saya tekan Enter.
Saya juga akan membuatnya wrap_content.
Dan saya akan menambahkan teksnya.
Skor biasanya mulai dari nol,
maka kita memulainya dari nol.
Oke.
Sekarang tombolnya.
Saya akan mengetik huruf Button.
Teruskan dan tambahkan wrap_content
untuk ini juga.
Button pertama akan
terbilang +3 Points.
Saya akan lanjut dan salin ini dan
menempelkannya di sini sekali,
dua kali untuk mendapat dua Button lagi.
Satu Button akan terbilang
+2 Points dan
satu lagi terbilang Free Throw.
Oke, mari kita lihat tampilannya
di Preview.
Kelihatannya saya punya tiga tombol.
Saya dapat melihat Team A dan 0.
Jadi semua view saya
sudah ada,
tapi tak terlihat seperti bayangan akhir
yang diharapkan.
Ingat, mereka ada di kolom vertikal.
Jadi saya akan mengubah
orientasi layout.
Akan saya lakukan itu.
Mulai ketik orientation dan saya
menginginkannya vertikal.
Oke, terlihat lebih baik.
Tombol-tombol ini sebenarnya diperluas
untuk mengisi lebarnya jendela layar.
Jadi saya tidak mau melakukan
wrap_content untuknya,
sebagai gantinya saya akan melakukan
match_parent.
Jadi, ijinkan saya
mengubahnya sekarang.
Maka, lebar semua tombol telah
menjadi match_parent.
Lihat di Preview.
Sudah lebih baik,
mereka membesar.
Baiklah.
Teks saya masih agak
terpojok di sudut,
untuk membetulkannya saya akan
memakai sesuatu bernama gravity.
Oke, di sini saya memakai Google Drawing.
Mari kita buat satu text box di
Google Drawing.
Sebanyak inilah batas pandangan view.
Saya dapat mengetik kata Team A,
dan secara default akan tampil di
sudut kiri atas.
Sama seperti TextView, saat Anda
mengetik teks di TextView,
secara default akan ada di
sudut kiri atas.
Dengan Google Drawings, saya dapat
memilih teks ini dan menggunakan
sesuatu yang setara dengan attribute,
namanya line, agar rata tengah
secara mendatar dalam kotak teks dan
rata tengah vertikal di dalamnya.
Lumayan keren.
Mengambil konten dan menggerakkannya
di dalam batas pandangan adalah
tugas layout gravity.
Jika Anda pikir ini mungkin mirip
metode alignment
yang dapat Anda pakai untuk
relative layout, memang benar, tapi Anda
dapat memakai gravity attribute untuk
linear layout, yang membuatnya berguna.
Kita akan melihatnya di dalam kode.
Saya akan ambil TextView pertama dan
ketik gravity.
Dengan gravity,
saya punya dua pilihan:
layout gravity dan gravity.
Saya sudah katakan
tentang atribut gravity.
Itu yang akan kita gunakan.
Kemudian saya punya beberapa
pilihan di sini,
dan saya menginginkannya
ditengahkan secara mendatar.
Jadi itu yang akan saya pakai.
Saya akan lanjut dan lihat
hasilnya di Preview.
Tidak terlihat berubah banyak,
tapi ada sebabnya.
Bila saya klik di sini, perbesarlah
karena mungkin terlalu kecil.
ada Team A di sini, dan Anda dapat
melihat batas view di sekelilingnya.
Kalau saya bilang ini tadinya diletakkan
di tengah view,
itu memang benar.
Memang terlihat seperti terletak di tengah
pandangan, karena sangat kecil.
Kembali ke Google Drawing.
Bila saya perkecil ukurannya menjadi
sebesar teks,
Rata tengah, tapi tidak terlihat
sangat berbeda dari
jika didorong ke kiri.
Kalau saya menginginkannya
di tengah-tengah ponsel,
saya perlu memperbesar view
selebar ponsel.
Jadi kita perlu mengubah lebarnya.
Oke, di sini saya akan menutup Preview.
Dan melihat lebarnya di sini.
Saya akan lakukan match_parent,
daripada wrap_content.
Mari kita lihat di Preview lagi.
Kita perkecil.
Jauh lebih baik.
Kelihatannya rata tengah.
Mari kita ulangi untuk skor di sini.
Oke, saya akan tambahkan
gravity ke ini juga dan
gravity dalam semua layout gravity.
center_horizontal dan saya akan mengubah
lebarnya ke match_parent.
Oke, mari kita cek lagi.
Keren! Jadi semuanya ada di tengah.
Terlihat lumayan bagus.
Selain terlihat sedikit
tertekan jadi satu,
tidak terlalu banyak ruang untuk
elemen-elemen ini.
Saya akan memberi setiap TextView
4 padding.
Saya mulai mengetik padding,
memberinya 4dp.
Ingat dp?
Saya hanya menggunakan padding,
bukan padding bottom atau sejenisnya.
Itu akan memberi 4dp di sekitar
semua TextView.
Mari kita lihat tampilannya di Preview.
Oke. Itu memberinya sedikit ruang lebih.
Saya akan melakukan hal yang sama ke
Score TextView.
Oke, sekarang saya akan lakukan hal yang
sama kepada Button.
Hmm, kelihatannya tidak berubah banyak.
Bagaimana kalau saya membuatnya
sedikit lebih besar, mungkin 8?
20?
Hmm, menarik, jadi ini membuat
tombolnya sendiri lebih besar.
Saya tidak ingin tombolnya membesar,
saya ingin ruang sekitarnya yang membesar.
Dan sebenarnya, itu adalah tugas
yang lebih baik untuk layout_margin.
Ingat, padding menambahkan lapisan
dalam view,
margin menambahkan ruang
di sekitar view.
Jadi kita ubah ini ke layout_margin.
Saya akan membuatnya 8dp.
Nah, ini terlihat lebih baik.
Sekarang ada ruang di sekitar view di
antara dua view ini.
Ayo kita lanjut melakukannya
kepada tombol-tombol lainnya.
Margin, bukan padding, layout_margin.
Oke, itu terlihat lumayan bagus.
Kalau Anda memilih atribut yang
berbeda dari saya
misalkan Anda memiliki lima padding
bukan empat, tidak masalah.
Ingat, saat ini saya hanya mencoba
membuat teksnya terbaca.
Kita akan belajar tentang ukuran font
dan warna yang bagus pada
tahap lebih lanjut.
Oke.
Kerjaan yang menakjubkan.
Anda telah menyelesaikan langkah itu.