Showing Revision 5 created 10/20/2015 by Abe Felisa.

1. Title:
   05-07 Membuat Layout - Solusi
2. Description:

   05-07 Membuat Layout - Solusi

3. 150 0:00 - 0:04
   Untuk membuat layout ini,
   saya membuka fail activity_main.xml.
4. 4433 0:04 - 0:06
   Saya tahu saya butuh
   LinearLayout vertikal
5. 6475 0:06 - 0:09
   untuk meletakkan setiap tampilan ini
   dalam kolom vertikal.
6. 9219 0:09 - 0:13
   Pertama, saya akan mengubah
   RelativeLayout menjadi LinearLayout.
7. 12615 0:13 - 0:14
   Ini segera menampilkan kesalahan
8. 14227 0:14 - 0:18
   bahwa tag pembuka tidak cocok
   dengan tag penutup.
9. 17747 0:18 - 0:21
   Saya bisa menyalin ini
   dan merekatkannya di bawah sini.
10. 20655 0:21 - 0:22
    Sekarang tag-nya cocok.
11. 21950 0:22 - 0:24
    Lalu saya bisa
    menambahkan tampilannya.
12. 23774 0:24 - 0:26
    Pertama, ada TextView "Quantity".
13. 25513 0:26 - 0:30
    Saya akan mengambil TextView ini
    dan mengganti teksnya menjadi "Quantity".
14. 29587 0:30 - 0:32
    Berikutnya, ada TextView
    yang bertuliskan "0".
15. 31752 0:32 - 0:35
    Saya bisa menyalin TextView pertama
    dan merekatkannya di bawahnya.
16. 34840 0:35 - 0:38
    Saya akan ganti teksnya menjadi "0"
    agar cocok dengan cuplikan layar ini.
17. 38268 0:38 - 0:41
    Anak terakhir dalam LinearLayout ini
    adalah tombol.
18. 41302 0:41 - 0:45
    Kita belum pernah menambahkan tombol
    dalam layout. Mari cari di Google.
19. 44730 0:45 - 0:48
    Jika membuka peramban,
    Anda bisa mencari "button android".
20. 47967 0:48 - 0:52
    Taut pertama ini tampak bagus.
    Ini situs developer.android.com.
21. 52376 0:52 - 0:56
    Ini dokumentasi untuk tombol. Kita bisa
    mengabaikan mayoritas teks di sini.
22. 56493 0:56 - 0:59
    Kita gulirkan ke bawah
    untuk membaca Class Overview.
23. 59013 0:59 - 1:03
    Ini membahas sedikit tentang kode Java
    yang belum kita pelajari.
24. 62691 1:03 - 1:06
    Namun di bawah sini, ada XML untuk tombol.
25. 66122 1:06 - 1:09
    Kita bisa menyalin ini dan melihat
    pengaruhnya pada kode.
26. 69014 1:09 - 1:13
    Dalam layout, saya akan menambahkan
    tombol di bawah kedua TextView ini.
27. 72589 1:13 - 1:16
    Saya akan merekatkan kode
    dari dokumentasi tadi di sini.
28. 75773 1:16 - 1:18
    Sekarang, alih-alih string self_destruct,
29. 78008 1:18 - 1:22
    saya akan memilih
    yang lebih bersahabat, seperti "Order".
30. 82094 1:22 - 1:25
    Baris terakhir ini juga bisa dihapus
    karena tidak perlu.
31. 84734 1:25 - 1:30
    Bagus, sekarang Anda punya TextView "0"
    dan "Quantity" serta tombol Order.
32. 90129 1:30 - 1:32
    Jalankan di aplikasi
    untuk lihat hasilnya
33. 92078 1:32 - 1:34
    dengan mengeklik
    tombol putar berwarna hijau ini.
34. 94365 1:34 - 1:37
    Di bawah, kita bisa melihat
    aplikasinya sedang dibuat.
35. 97624 1:38 - 1:39
    Bukan ini yang kita mau.
36. 98970 1:39 - 1:43
    Tampaknya, LinearLayout kita
    adalah horizontal, bukan vertikal.
37. 103311 1:43 - 1:47
    Jadi, pastikan kita menambahkan
    atribut orientasi.
38. 107696 1:48 - 1:52
    Kita akan mengubah ini
    dengan android:orientation="vertical".
39. 111890 1:52 - 1:53
    Itu akan memecahkan masalah ini.
40. 113433 1:53 - 1:55
    Kita klik Run lagi.
41. 115325 1:55 - 1:57
    Itu lebih baik.
42. 116868 1:57 - 2:00
    Ketiga anak ini ditampilkan
    dalam kolom vertikal.
43. 120054 2:00 - 2:02
    Sekarang tinggal mempercantiknya
44. 121583 2:02 - 2:05
    agar lebih mirip
    dengan cuplikan layar yang tersedia.
45. 125087 2:05 - 2:09
    Dari cuplikan layar ini, kita melihat
    TextView "Quantity" berhuruf besar.
46. 129428 2:09 - 2:14
    Di Pelajaran 1, kita mempelajari atribut
    yang disebut android:textAllCaps.
47. 133689 2:14 - 2:16
    Atribut itu muncul
    dalam autocomplete ini.
48. 136049 2:16 - 2:18
    Jika muncul seperti ini,
    tinggal tekan enter
49. 138095 2:18 - 2:21
    dan ini akan otomatis
    ditambahkan pada kode.
50. 141223 2:21 - 2:25
    Kita buat nilainya "true"
    karena kita ingin huruf besar semua.
51. 144798 2:25 - 2:28
    Lebih baik menggunakan atribut ini
    untuk menulis teks dengan huruf besar
52. 148424 2:28 - 2:31
    karena antarmuka pengguna ingin diubah
53. 150581 2:31 - 2:33
    agar "Quantity" ditulis
    dengan huruf kecil seperti ini,
54. 153166 2:33 - 2:38
    kita tinggal menghapus atribut ini
    alih-alih mengubah teksnya.
55. 157806 2:38 - 2:43
    Berikutnya, untuk teks "0", kita harus
    menggunakan ukuran teks 16 sp.
56. 162696 2:43 - 2:46
    Saya tambahkan sekarang.
    Ini muncul di saran autocomplete.
57. 165721 2:46 - 2:50
    Jadi, saya tekan enter saja,
    lalu saya memilih 16 sp untuk nilainya.
58. 170444 2:50 - 2:53
    Kita juga ingin warna hurufnya hitam.
59. 173002 2:53 - 2:57
    Saya akan menggunakan warna sistem Android
    untuk hitam yang ditulis seperti ini.
60. 177156 2:57 - 3:01
    Bagus, itu menyelesaikan
    TextView "Quantity" dan "0".
61. 180665 3:01 - 3:03
    Tombol Order-nya sudah bagus.
62. 182619 3:03 - 3:06
    Ini akan otomatis membuat
    teks dalam tombolnya berhuruf besar.
63. 186352 3:06 - 3:09
    Tinggi dan lebarnya wrap_content.
64. 188661 3:09 - 3:12
    Namun kita harus menyelesaikan
    ruang vertikal ini.
65. 191653 3:12 - 3:14
    Kita menginginkan padding
    atau margin sebesar 16dp
66. 194341 3:14 - 3:17
    antara TextView "Quantity" dan "0".
67. 197030 3:17 - 3:21
    Kita juga menginginkan padding 16 dp
    antara "0" dan tombol Order.
68. 201297 3:21 - 3:24
    Anda dapat menerapkan ini
    dalam berbagai cara.
69. 203678 3:24 - 3:26
    Saya hanya akan menambahkannya
70. 205985 3:26 - 3:29
    sebagai layout margin atas
    untuk tombol ini.
71. 211195 3:31 - 3:35
    Saya akan tambahkan sebagai margin bawah
    untuk TextView "Quantity" ini.
72. 217583 3:38 - 3:41
    Silakan melakukannya dengan cara lain
    selama tampilannya sama.
73. 220595 3:41 - 3:43
    Penyebab saya memilih
    margin bawah dan margin atas
74. 223092 3:43 - 3:47
    adalah karena saya tahu
    area tengah ini akan berubah nantinya.
75. 226874 3:47 - 3:50
    Kita akan menjadikannya pemilih kuantitas
    dengan tombol plus dan minus.
76. 230364 3:50 - 3:53
    Saya juga masih
    menginginkan jarak 16 dp
77. 233338 3:53 - 3:57
    antara "Quantity", judul,
    dan pemilih kuantitas.
78. 236503 3:57 - 3:58
    Begitu pula dengan tombol ini.
79. 238410 3:58 - 4:01
    Mari kita jalankan lagi sekarang
    pada perangkat kita.
80. 241054 4:01 - 4:03
    Bagus, dan ini persis
    seperti yang kita mau.
81. 243192 4:03 - 4:06
    TextView "Quantity" ditulis
    dengan huruf besar,
82. 245616 4:06 - 4:10
    TextView "0" menggunakan
    huruf 16 sp berwarna hitam,
83. 249999 4:10 - 4:12
    dan ada tombol Order di sini.
84. 251501 4:12 - 4:15
    Juga ada jarak 16 dp
    antara tampilan-tampilan ini.
85. 255577 4:16 - 4:17
    Bagus.
86. 256796 4:17 - 4:19
    Saya hampir lupa.
    Dalam kuis juga ada pertanyaan,
87. 259171 4:19 - 4:21
    apa yang terjadi saat tombol ini diklik?
88. 261439 4:21 - 4:26
    Tidak terjadi apa-apa,
    setidaknya untuk sekarang.
89. 265650 4:26 - 4:29
    Terus saksikan untuk ketahui
    apa yang terjadi berikutnya