WEBVTT

00:00:00.450 --> 00:00:03.650
Sebelum saya mulai coding,
saya akan jawab pertanyaan ini.

00:00:03.650 --> 00:00:07.460
Saya hanya mengetahui dua
view groups, LinearLayouts dan

00:00:07.460 --> 00:00:08.626
RelativeLayouts.

00:00:08.626 --> 00:00:13.710
Kata kuncinya adalah keduanya harus
menempati ruang yang sama.

00:00:13.710 --> 00:00:16.260
Menggunakan layout weight adalah
cara paling mudah digunakan.

00:00:17.480 --> 00:00:20.070
Oke, ayo kerjakan dan perhatikan kodenya.

00:00:20.070 --> 00:00:22.880
Saya tidak lagi bekerja dalam 
Java, jadi akan saya lanjutkan dan

00:00:22.880 --> 00:00:24.775
pindah ke activity_main.xml.

00:00:25.830 --> 00:00:27.150
Inilah berkas XML saya.

00:00:28.270 --> 00:00:33.875
Saya akan mulai dengan meletakkan semua
kode ini pada LinearLayout lain.

00:00:33.875 --> 00:00:38.334
Dan ini adalah induk LinearLayout untuk
dua LinearLayouts mini saya.

00:00:39.360 --> 00:00:43.900
Saya pindah dua baris ini ke atas sini,

00:00:43.900 --> 00:00:49.670
karena mereka harus menempel pada
root view, tambahkan kurung kurawal.

00:00:49.670 --> 00:00:53.990
Oke, Android Studio secara otomatis
akan membuat tag penutup untuk saya.

00:00:53.990 --> 00:00:55.060
Jadi, saya lanjutkan dan

00:00:55.060 --> 00:00:59.370
memotong tag penutup, gulir
ke bawah dan tempel.

00:01:01.160 --> 00:01:06.450
Oke, muncul garis merah dan
jika saya lihat kesalahannya,

00:01:06.450 --> 00:01:10.660
dikatakan kalau saya harus menentukan
layout_height dan layout_width.

00:01:10.660 --> 00:01:12.040
Baiklah, ayo kerjakan.

00:01:13.210 --> 00:01:17.580
Jadi karena ini adalah root view,
saya akan membuat match_parent.

00:01:20.050 --> 00:01:21.140
Oke, jadi

00:01:21.140 --> 00:01:25.610
Saya punya satu LinearLayout mengelilingi
anak LinearLayout sekarang.

00:01:25.610 --> 00:01:30.500
Dan jika saya buka Preview,
terlihat sama.

00:01:30.500 --> 00:01:35.510
Oke, yang akan saya lakukan
adalah menyalin semuanya yang ada

00:01:35.510 --> 00:01:41.100
di dalam Team A LinearLayout, dan
disebelah Team A, saya akan tempel.

00:01:42.160 --> 00:01:47.026
Dan akan menjadi LinearLayout Team B.

00:01:47.026 --> 00:01:52.209
Sekarang, semuanya mulai
terlihat berantakan.

00:01:52.209 --> 00:01:57.264
Saya akan lakukan Cmd+A,
atau pilih semua, kemudian

00:01:57.264 --> 00:02:03.520
menggunakan jalan pintas papan ketik
Cmd+Option+L untuk memformat kode saya.

00:02:03.520 --> 00:02:07.930
Pada Windows, Ctrl+Alt+L,
terlihat sedikit lebih baik.

00:02:07.930 --> 00:02:11.560
Saya hanya ingin memastikan kalau Anda
memahami apa yang kini sedang terjadi.

00:02:11.560 --> 00:02:16.640
Gulir ke atas,
ada root LinearLayout di sini

00:02:16.640 --> 00:02:21.930
Dimulai dari sini, dan jika kita
gulir ke bawah, berakhir di sini.

00:02:23.320 --> 00:02:26.550
Di dalam root LinearLayout,
saya gulir ke atas lagi.

00:02:28.220 --> 00:02:31.919
Ada satu anak tata letak di sini,
yang mulai dari sini.

00:02:31.919 --> 00:02:35.459
Saya akan gulir perlahan.

00:02:35.459 --> 00:02:37.150
Dan berakhir di sini.

00:02:37.150 --> 00:02:38.860
Ini untuk TeamA.

00:02:38.860 --> 00:02:42.260
Dan saya ada anak LinearLayout lain
yang mulai dari sini.

00:02:42.260 --> 00:02:47.418
Gulir ke bawah perlahan,
akhiri di sini untuk TeamB.

00:02:47.418 --> 00:02:49.956
Baiklah, saya menemukan beberapa
tanda merah di sebelah atas,

00:02:49.956 --> 00:02:52.750
Saya akan gulir ke atas lagi
dan melihat kesalahannya.

00:02:54.400 --> 00:02:58.440
Orientasi salah, tidak ada orientasi
ditetapkan, dan defaultnya horizontal.

00:02:58.440 --> 00:03:00.965
Namun tata letak ini memiliki banyak anak,

00:03:00.965 --> 00:03:03.793
dimana setidaknya memiliki setidaknya
satu width match_parent.

00:03:03.793 --> 00:03:08.092
Saya juga ingin membuatnya horizontal,
tapi ayo lanjutkan dulu dan

00:03:08.092 --> 00:03:10.010
tetapkan orientasinya.

00:03:11.360 --> 00:03:15.400
Sekali lagi, secara teknis ini tidak
dibutuhkan karena defaultnya horizontal

00:03:15.400 --> 00:03:16.730
tapi akan bagus jika lebih jelas.

00:03:17.950 --> 00:03:22.168
Oke, ini tentang anak 
yang saling menutupi.

00:03:22.168 --> 00:03:24.334
Saya akan klik Pratinjau.

00:03:24.334 --> 00:03:27.901
Tidak terlihat berubah
terlalu banyak, meskipun

00:03:27.901 --> 00:03:30.842
saya sudah menyalin dan
menempel LinearLayout lain.

00:03:31.905 --> 00:03:34.345
Pasti ada hubungannya
dengan kesalahan yang tadi.

00:03:35.525 --> 00:03:38.915
Dikatakan kalau ini adalah
tata letak horizontal.

00:03:38.915 --> 00:03:42.615
Jadi, dia mencoba meletakkan
dua LinearLayouts berdampingan

00:03:42.615 --> 00:03:46.591
tapi LinearLayout itu 
punya layout_width dari

00:03:46.591 --> 00:03:49.940
match_parent yang mengisi layar.

00:03:49.940 --> 00:03:54.510
Jadi, intinya LinearLayout
pertama saya memenuhi layar

00:03:54.510 --> 00:03:58.510
lalu LinearLayout lain berada
di sebelahnya di luar layar.

00:04:00.000 --> 00:04:03.360
Mari pikirkan tentang apa yang
sebenarnya kita mau di sini.

00:04:03.360 --> 00:04:08.090
Kita mau dua tata letak menempati
ruang sama dan berdampingan.

00:04:08.090 --> 00:04:11.860
Inilah saatnya untuk kita
memberi layout_weights.

00:04:11.860 --> 00:04:16.267
Saya akan ambil LinearLayout pertama dan

00:04:16.267 --> 00:04:19.579
memberinya layout_weight 1.

00:04:21.140 --> 00:04:26.160
Saya juga akan atur width ke 0.

00:04:26.160 --> 00:04:29.940
Oke, kita bisa lihat kalau
kita punya dua LinearLayouts,

00:04:29.940 --> 00:04:32.940
hanya saja mereka tidak 
tertata dengan baik.

00:04:32.940 --> 00:04:34.560
Tapi sekarang sudah lebih baik.

00:04:34.560 --> 00:04:37.807
Saya juga beri layout_weight
pada LinearLayout kedua,

00:04:37.807 --> 00:04:38.877
di sebelah sini.

00:04:38.877 --> 00:04:40.500
Saya gulir ke bawah.

00:04:40.500 --> 00:04:42.190
Inilah LinearLayout kedua saya.

00:04:42.190 --> 00:04:44.250
Saya akan lakukan hal yang sama.

00:04:44.250 --> 00:04:48.186
layout_weight juga 1

00:04:48.186 --> 00:04:51.080
jadi, sekarang mereka punya
layout_weight yang setara.

00:04:52.650 --> 00:04:55.630
dan saya atur lebar ke 0.

00:04:55.630 --> 00:05:00.160
Alasan saya mengatur lebar keduanya ke 0,

00:05:00.160 --> 00:05:04.588
adalah jika kedua sisi tidak diberi lebar.

00:05:04.588 --> 00:05:06.850
Maka mereka akan menguasai seluruh ruang,

00:05:06.850 --> 00:05:11.340
yaitu seluruh layar, dibagi menjadi dua

00:05:11.340 --> 00:05:14.950
karena keduanya memiliki lebar yang sama.

00:05:14.950 --> 00:05:17.650
Jika semua ini membingungkan,
saya sudah menautkan beberapa video

00:05:17.650 --> 00:05:20.350
dalam catatan instruktur yang
membahas tentang layout_weight.

00:05:20.350 --> 00:05:24.162
Ini sudah terlihat lumayan bagus,
kecuali di sini disebut Team A.

00:05:24.162 --> 00:05:29.310
Saya akan gulir ke bawah dan
mengubahnya menjadi Team B.

00:05:30.460 --> 00:05:35.420
Anda mungkin juga menyadari kalau
ada kesalahan di sini dan

00:05:35.420 --> 00:05:39.760
kesalahan itu muncul karena
adanya ID ganda.

00:05:39.760 --> 00:05:42.340
Ingat, saya baru saja menyalin
dan menempel kode.

00:05:42.340 --> 00:05:46.090
Jadi, pada dasarnya kita punya dua hal
yang sedang mencoba memiliki id sama

00:05:46.090 --> 00:05:48.030
dari team_a_score.

00:05:48.030 --> 00:05:51.800
Saya akan menggantinye ke team_b_score.

00:05:51.800 --> 00:05:53.840
Oke, sudah lumayan bagus.

00:05:53.840 --> 00:05:55.420
Agak kurang jelas.
Saya perbesar.

00:05:56.800 --> 00:05:58.150
Tertulis di sini Team B.

00:05:59.290 --> 00:06:02.420
Tombol dan semua tampilan teks yang benar.

00:06:02.420 --> 00:06:03.870
Saya akan mencobanya di ponsel.

00:06:05.490 --> 00:06:07.960
Oke, sudah lumayan bagus.

00:06:07.960 --> 00:06:13.418
Sekarang, jika saya menekan tombol
Team A, dia bertambah. Bagus.

00:06:13.418 --> 00:06:18.840
Jika saya tekan tombol Team B,
dia juga bertambah.

00:06:18.840 --> 00:06:20.910
Ini spesial.

00:06:20.910 --> 00:06:23.480
Tapi ingat, kita hanya ingin
mendapatkan XML yang tepat.

00:06:23.480 --> 00:06:25.630
Kita tidak terlalu peduli dengan Java.

00:06:25.630 --> 00:06:29.140
Tapi sekarang XML sudah bisa berjalan,
kenapa tidak sekalian kita perbaiki Java?