Sebelum saya mulai coding,
saya akan jawab pertanyaan ini.
Saya hanya mengetahui dua
view groups, LinearLayouts dan
RelativeLayouts.
Kata kuncinya adalah keduanya harus
menempati ruang yang sama.
Menggunakan layout weight adalah
cara paling mudah digunakan.
Oke, ayo kerjakan dan perhatikan kodenya.
Saya tidak lagi bekerja dalam
Java, jadi akan saya lanjutkan dan
pindah ke activity_main.xml.
Inilah berkas XML saya.
Saya akan mulai dengan meletakkan semua
kode ini pada LinearLayout lain.
Dan ini adalah induk LinearLayout untuk
dua LinearLayouts mini saya.
Saya pindah dua baris ini ke atas sini,
karena mereka harus menempel pada
root view, tambahkan kurung kurawal.
Oke, Android Studio secara otomatis
akan membuat tag penutup untuk saya.
Jadi, saya lanjutkan dan
memotong tag penutup, gulir
ke bawah dan tempel.
Oke, muncul garis merah dan
jika saya lihat kesalahannya,
dikatakan kalau saya harus menentukan
layout_height dan layout_width.
Baiklah, ayo kerjakan.
Jadi karena ini adalah root view,
saya akan membuat match_parent.
Oke, jadi
Saya punya satu LinearLayout mengelilingi
anak LinearLayout sekarang.
Dan jika saya buka Preview,
terlihat sama.
Oke, yang akan saya lakukan
adalah menyalin semuanya yang ada
di dalam Team A LinearLayout, dan
disebelah Team A, saya akan tempel.
Dan akan menjadi LinearLayout Team B.
Sekarang, semuanya mulai
terlihat berantakan.
Saya akan lakukan Cmd+A,
atau pilih semua, kemudian
menggunakan jalan pintas papan ketik
Cmd+Option+L untuk memformat kode saya.
Pada Windows, Ctrl+Alt+L,
terlihat sedikit lebih baik.
Saya hanya ingin memastikan kalau Anda
memahami apa yang kini sedang terjadi.
Gulir ke atas,
ada root LinearLayout di sini
Dimulai dari sini, dan jika kita
gulir ke bawah, berakhir di sini.
Di dalam root LinearLayout,
saya gulir ke atas lagi.
Ada satu anak tata letak di sini,
yang mulai dari sini.
Saya akan gulir perlahan.
Dan berakhir di sini.
Ini untuk TeamA.
Dan saya ada anak LinearLayout lain
yang mulai dari sini.
Gulir ke bawah perlahan,
akhiri di sini untuk TeamB.
Baiklah, saya menemukan beberapa
tanda merah di sebelah atas,
Saya akan gulir ke atas lagi
dan melihat kesalahannya.
Orientasi salah, tidak ada orientasi
ditetapkan, dan defaultnya horizontal.
Namun tata letak ini memiliki banyak anak,
dimana setidaknya memiliki setidaknya
satu width match_parent.
Saya juga ingin membuatnya horizontal,
tapi ayo lanjutkan dulu dan
tetapkan orientasinya.
Sekali lagi, secara teknis ini tidak
dibutuhkan karena defaultnya horizontal
tapi akan bagus jika lebih jelas.
Oke, ini tentang anak
yang saling menutupi.
Saya akan klik Pratinjau.
Tidak terlihat berubah
terlalu banyak, meskipun
saya sudah menyalin dan
menempel LinearLayout lain.
Pasti ada hubungannya
dengan kesalahan yang tadi.
Dikatakan kalau ini adalah
tata letak horizontal.
Jadi, dia mencoba meletakkan
dua LinearLayouts berdampingan
tapi LinearLayout itu
punya layout_width dari
match_parent yang mengisi layar.
Jadi, intinya LinearLayout
pertama saya memenuhi layar
lalu LinearLayout lain berada
di sebelahnya di luar layar.
Mari pikirkan tentang apa yang
sebenarnya kita mau di sini.
Kita mau dua tata letak menempati
ruang sama dan berdampingan.
Inilah saatnya untuk kita
memberi layout_weights.
Saya akan ambil LinearLayout pertama dan
memberinya layout_weight 1.
Saya juga akan atur width ke 0.
Oke, kita bisa lihat kalau
kita punya dua LinearLayouts,
hanya saja mereka tidak
tertata dengan baik.
Tapi sekarang sudah lebih baik.
Saya juga beri layout_weight
pada LinearLayout kedua,
di sebelah sini.
Saya gulir ke bawah.
Inilah LinearLayout kedua saya.
Saya akan lakukan hal yang sama.
layout_weight juga 1
jadi, sekarang mereka punya
layout_weight yang setara.
dan saya atur lebar ke 0.
Alasan saya mengatur lebar keduanya ke 0,
adalah jika kedua sisi tidak diberi lebar.
Maka mereka akan menguasai seluruh ruang,
yaitu seluruh layar, dibagi menjadi dua
karena keduanya memiliki lebar yang sama.
Jika semua ini membingungkan,
saya sudah menautkan beberapa video
dalam catatan instruktur yang
membahas tentang layout_weight.
Ini sudah terlihat lumayan bagus,
kecuali di sini disebut Team A.
Saya akan gulir ke bawah dan
mengubahnya menjadi Team B.
Anda mungkin juga menyadari kalau
ada kesalahan di sini dan
kesalahan itu muncul karena
adanya ID ganda.
Ingat, saya baru saja menyalin
dan menempel kode.
Jadi, pada dasarnya kita punya dua hal
yang sedang mencoba memiliki id sama
dari team_a_score.
Saya akan menggantinye ke team_b_score.
Oke, sudah lumayan bagus.
Agak kurang jelas.
Saya perbesar.
Tertulis di sini Team B.
Tombol dan semua tampilan teks yang benar.
Saya akan mencobanya di ponsel.
Oke, sudah lumayan bagus.
Sekarang, jika saya menekan tombol
Team A, dia bertambah. Bagus.
Jika saya tekan tombol Team B,
dia juga bertambah.
Ini spesial.
Tapi ingat, kita hanya ingin
mendapatkan XML yang tepat.
Kita tidak terlalu peduli dengan Java.
Tapi sekarang XML sudah bisa berjalan,
kenapa tidak sekalian kita perbaiki Java?