1
00:00:00,450 --> 00:00:03,650
Sebelum saya mulai coding,
saya akan jawab pertanyaan ini.

2
00:00:03,650 --> 00:00:07,460
Saya hanya mengetahui dua
view groups, LinearLayouts dan

3
00:00:07,460 --> 00:00:08,626
RelativeLayouts.

4
00:00:08,626 --> 00:00:13,710
Kata kuncinya adalah keduanya harus
menempati ruang yang sama.

5
00:00:13,710 --> 00:00:16,260
Menggunakan layout weight adalah
cara paling mudah digunakan.

6
00:00:17,480 --> 00:00:20,070
Oke, ayo kerjakan dan perhatikan kodenya.

7
00:00:20,070 --> 00:00:22,880
Saya tidak lagi bekerja dalam 
Java, jadi akan saya lanjutkan dan

8
00:00:22,880 --> 00:00:24,775
pindah ke activity_main.xml.

9
00:00:25,830 --> 00:00:27,150
Inilah berkas XML saya.

10
00:00:28,270 --> 00:00:33,875
Saya akan mulai dengan meletakkan semua
kode ini pada LinearLayout lain.

11
00:00:33,875 --> 00:00:38,334
Dan ini adalah induk LinearLayout untuk
dua LinearLayouts mini saya.

12
00:00:39,360 --> 00:00:43,900
Saya pindah dua baris ini ke atas sini,

13
00:00:43,900 --> 00:00:49,670
karena mereka harus menempel pada
root view, tambahkan kurung kurawal.

14
00:00:49,670 --> 00:00:53,990
Oke, Android Studio secara otomatis
akan membuat tag penutup untuk saya.

15
00:00:53,990 --> 00:00:55,060
Jadi, saya lanjutkan dan

16
00:00:55,060 --> 00:00:59,370
memotong tag penutup, gulir
ke bawah dan tempel.

17
00:01:01,160 --> 00:01:06,450
Oke, muncul garis merah dan
jika saya lihat kesalahannya,

18
00:01:06,450 --> 00:01:10,660
dikatakan kalau saya harus menentukan
layout_height dan layout_width.

19
00:01:10,660 --> 00:01:12,040
Baiklah, ayo kerjakan.

20
00:01:13,210 --> 00:01:17,580
Jadi karena ini adalah root view,
saya akan membuat match_parent.

21
00:01:20,050 --> 00:01:21,140
Oke, jadi

22
00:01:21,140 --> 00:01:25,610
Saya punya satu LinearLayout mengelilingi
anak LinearLayout sekarang.

23
00:01:25,610 --> 00:01:30,500
Dan jika saya buka Preview,
terlihat sama.

24
00:01:30,500 --> 00:01:35,510
Oke, yang akan saya lakukan
adalah menyalin semuanya yang ada

25
00:01:35,510 --> 00:01:41,100
di dalam Team A LinearLayout, dan
disebelah Team A, saya akan tempel.

26
00:01:42,160 --> 00:01:47,026
Dan akan menjadi LinearLayout Team B.

27
00:01:47,026 --> 00:01:52,209
Sekarang, semuanya mulai
terlihat berantakan.

28
00:01:52,209 --> 00:01:57,264
Saya akan lakukan Cmd+A,
atau pilih semua, kemudian

29
00:01:57,264 --> 00:02:03,520
menggunakan jalan pintas papan ketik
Cmd+Option+L untuk memformat kode saya.

30
00:02:03,520 --> 00:02:07,930
Pada Windows, Ctrl+Alt+L,
terlihat sedikit lebih baik.

31
00:02:07,930 --> 00:02:11,560
Saya hanya ingin memastikan kalau Anda
memahami apa yang kini sedang terjadi.

32
00:02:11,560 --> 00:02:16,640
Gulir ke atas,
ada root LinearLayout di sini

33
00:02:16,640 --> 00:02:21,930
Dimulai dari sini, dan jika kita
gulir ke bawah, berakhir di sini.

34
00:02:23,320 --> 00:02:26,550
Di dalam root LinearLayout,
saya gulir ke atas lagi.

35
00:02:28,220 --> 00:02:31,919
Ada satu anak tata letak di sini,
yang mulai dari sini.

36
00:02:31,919 --> 00:02:35,459
Saya akan gulir perlahan.

37
00:02:35,459 --> 00:02:37,150
Dan berakhir di sini.

38
00:02:37,150 --> 00:02:38,860
Ini untuk TeamA.

39
00:02:38,860 --> 00:02:42,260
Dan saya ada anak LinearLayout lain
yang mulai dari sini.

40
00:02:42,260 --> 00:02:47,418
Gulir ke bawah perlahan,
akhiri di sini untuk TeamB.

41
00:02:47,418 --> 00:02:49,956
Baiklah, saya menemukan beberapa
tanda merah di sebelah atas,

42
00:02:49,956 --> 00:02:52,750
Saya akan gulir ke atas lagi
dan melihat kesalahannya.

43
00:02:54,400 --> 00:02:58,440
Orientasi salah, tidak ada orientasi
ditetapkan, dan defaultnya horizontal.

44
00:02:58,440 --> 00:03:00,965
Namun tata letak ini memiliki banyak anak,

45
00:03:00,965 --> 00:03:03,793
dimana setidaknya memiliki setidaknya
satu width match_parent.

46
00:03:03,793 --> 00:03:08,092
Saya juga ingin membuatnya horizontal,
tapi ayo lanjutkan dulu dan

47
00:03:08,092 --> 00:03:10,010
tetapkan orientasinya.

48
00:03:11,360 --> 00:03:15,400
Sekali lagi, secara teknis ini tidak
dibutuhkan karena defaultnya horizontal

49
00:03:15,400 --> 00:03:16,730
tapi akan bagus jika lebih jelas.

50
00:03:17,950 --> 00:03:22,168
Oke, ini tentang anak 
yang saling menutupi.

51
00:03:22,168 --> 00:03:24,334
Saya akan klik Pratinjau.

52
00:03:24,334 --> 00:03:27,901
Tidak terlihat berubah
terlalu banyak, meskipun

53
00:03:27,901 --> 00:03:30,842
saya sudah menyalin dan
menempel LinearLayout lain.

54
00:03:31,905 --> 00:03:34,345
Pasti ada hubungannya
dengan kesalahan yang tadi.

55
00:03:35,525 --> 00:03:38,915
Dikatakan kalau ini adalah
tata letak horizontal.

56
00:03:38,915 --> 00:03:42,615
Jadi, dia mencoba meletakkan
dua LinearLayouts berdampingan

57
00:03:42,615 --> 00:03:46,591
tapi LinearLayout itu 
punya layout_width dari

58
00:03:46,591 --> 00:03:49,940
match_parent yang mengisi layar.

59
00:03:49,940 --> 00:03:54,510
Jadi, intinya LinearLayout
pertama saya memenuhi layar

60
00:03:54,510 --> 00:03:58,510
lalu LinearLayout lain berada
di sebelahnya di luar layar.

61
00:04:00,000 --> 00:04:03,360
Mari pikirkan tentang apa yang
sebenarnya kita mau di sini.

62
00:04:03,360 --> 00:04:08,090
Kita mau dua tata letak menempati
ruang sama dan berdampingan.

63
00:04:08,090 --> 00:04:11,860
Inilah saatnya untuk kita
memberi layout_weights.

64
00:04:11,860 --> 00:04:16,267
Saya akan ambil LinearLayout pertama dan

65
00:04:16,267 --> 00:04:19,579
memberinya layout_weight 1.

66
00:04:21,140 --> 00:04:26,160
Saya juga akan atur width ke 0.

67
00:04:26,160 --> 00:04:29,940
Oke, kita bisa lihat kalau
kita punya dua LinearLayouts,

68
00:04:29,940 --> 00:04:32,940
hanya saja mereka tidak 
tertata dengan baik.

69
00:04:32,940 --> 00:04:34,560
Tapi sekarang sudah lebih baik.

70
00:04:34,560 --> 00:04:37,807
Saya juga beri layout_weight
pada LinearLayout kedua,

71
00:04:37,807 --> 00:04:38,877
di sebelah sini.

72
00:04:38,877 --> 00:04:40,500
Saya gulir ke bawah.

73
00:04:40,500 --> 00:04:42,190
Inilah LinearLayout kedua saya.

74
00:04:42,190 --> 00:04:44,250
Saya akan lakukan hal yang sama.

75
00:04:44,250 --> 00:04:48,186
layout_weight juga 1

76
00:04:48,186 --> 00:04:51,080
jadi, sekarang mereka punya
layout_weight yang setara.

77
00:04:52,650 --> 00:04:55,630
dan saya atur lebar ke 0.

78
00:04:55,630 --> 00:05:00,160
Alasan saya mengatur lebar keduanya ke 0,

79
00:05:00,160 --> 00:05:04,588
adalah jika kedua sisi tidak diberi lebar.

80
00:05:04,588 --> 00:05:06,850
Maka mereka akan menguasai seluruh ruang,

81
00:05:06,850 --> 00:05:11,340
yaitu seluruh layar, dibagi menjadi dua

82
00:05:11,340 --> 00:05:14,950
karena keduanya memiliki lebar yang sama.

83
00:05:14,950 --> 00:05:17,650
Jika semua ini membingungkan,
saya sudah menautkan beberapa video

84
00:05:17,650 --> 00:05:20,350
dalam catatan instruktur yang
membahas tentang layout_weight.

85
00:05:20,350 --> 00:05:24,162
Ini sudah terlihat lumayan bagus,
kecuali di sini disebut Team A.

86
00:05:24,162 --> 00:05:29,310
Saya akan gulir ke bawah dan
mengubahnya menjadi Team B.

87
00:05:30,460 --> 00:05:35,420
Anda mungkin juga menyadari kalau
ada kesalahan di sini dan

88
00:05:35,420 --> 00:05:39,760
kesalahan itu muncul karena
adanya ID ganda.

89
00:05:39,760 --> 00:05:42,340
Ingat, saya baru saja menyalin
dan menempel kode.

90
00:05:42,340 --> 00:05:46,090
Jadi, pada dasarnya kita punya dua hal
yang sedang mencoba memiliki id sama

91
00:05:46,090 --> 00:05:48,030
dari team_a_score.

92
00:05:48,030 --> 00:05:51,800
Saya akan menggantinye ke team_b_score.

93
00:05:51,800 --> 00:05:53,840
Oke, sudah lumayan bagus.

94
00:05:53,840 --> 00:05:55,420
Agak kurang jelas.
Saya perbesar.

95
00:05:56,800 --> 00:05:58,150
Tertulis di sini Team B.

96
00:05:59,290 --> 00:06:02,420
Tombol dan semua tampilan teks yang benar.

97
00:06:02,420 --> 00:06:03,870
Saya akan mencobanya di ponsel.

98
00:06:05,490 --> 00:06:07,960
Oke, sudah lumayan bagus.

99
00:06:07,960 --> 00:06:13,418
Sekarang, jika saya menekan tombol
Team A, dia bertambah. Bagus.

100
00:06:13,418 --> 00:06:18,840
Jika saya tekan tombol Team B,
dia juga bertambah.

101
00:06:18,840 --> 00:06:20,910
Ini spesial.

102
00:06:20,910 --> 00:06:23,480
Tapi ingat, kita hanya ingin
mendapatkan XML yang tepat.

103
00:06:23,480 --> 00:06:25,630
Kita tidak terlalu peduli dengan Java.

104
00:06:25,630 --> 00:06:29,140
Tapi sekarang XML sudah bisa berjalan,
kenapa tidak sekalian kita perbaiki Java?