Dokumen ini adalah panduan pelatihan Android yang mencakup berbagai konsep dan praktik mulai dari pengenalan Android Studio hingga penggunaan RecyclerView dan fragment. Terdapat penjelasan tentang pengaturan perangkat, penggunaan JSON API, dan penerapan berbagai komponen UI. Pelatihan ini dirancang untuk membantu peserta membangun aplikasi Android dengan metode yang terstruktur dan efisien.

1. Special for Wonderkoding
ANDROID
TRAINING

2. Ceritakan nama, asal, pengalaman dan
ekspektasi kamu mengikuti training ini
HITHERE!

3. Senin Activity, Intent, ListView
Selasa RecyclerView, Layout, Localization
rabu Fragment, Menu, Navigation
kamis Background Thread, JSON, Get API
jum’at ViewModel, Testing
OURTarget

4. PERSIAPAN
● Android Studio v3.4 ke atas
● JDK (Java Development Kit)
● Smartphone/Emulator

5. Android
studio

6. ANDROID STUDIO REQUIREMENT
● OS : Windows, Mac, Linux
● Ram min 4 Gb, 8 Gb recommended
● Available Disk 2 Gb, 4 Gb recommended
● Resolution : 1280 x 800

7. “The master has failed more times
than the beginner has even tried.”
—SOMEONEFAMOUS

8. Caramenjalankan aplikasi
- Virtual Device from Android Studio
- Emulator (Memu, Nox, Genymotion, Bluestack)
- Langsung di device
- Enable Your Developer Option First
(Setting > About Phone > Tap 7 times in Build
Number)
- Enable USB Debugging

10. PengenalanANDROID STUDIO
Untuk mengatur permission,
activity, dan launcher.
Untuk menulis kode
Untuk menulis UI Testing
Untuk menulis Unit Testing

11. PengenalanANDROID STUDIO
Untuk resource gambar
Untuk resource layout
Untuk resource icon aplikasi
Untuk resource warna
Untuk resource teks
Untuk resource styles

12. PengenalanANDROID STUDIO
Untuk library level project
Untuk library level App,
mengganti min SDK dan
version code

13. ACtivity

14. AlurACTIVITY

15. Codelab 1:
aPLIKASI
MENGHITUNG
VOLUME

16. Desain denganLINEarLAYOUT

17. Padding vsmargin

18. AmbilDATA
MenampilkanDATA
val volume = inputLength.toDouble() * inputWidth.toDouble()
* inputHeight.toDouble()
tvResult.text = volume.toString()
val inputLength = edtLength.text.toString().trim()
val inputWidth = edtWidth.text.toString().trim()
val inputHeight = edtHeight.text.toString().trim()

19. Cobalahrotate Aplikasi
Apayangterjadi?
Saatconfigurationchanges
Datanyahilangalias
Tidakterjaga.Lalu
Bagaimanamengatasinya?
onsaveinstancestate
JAWABANNYA

20. save instancestate
Showinstancestate
val inputLength = edtLength.text.toString().trim()
val inputWidth = edtWidth.text.toString().trim()
val inputHeight = edtHeight.text.toString().trim()

21. Membuatactivitybaru

22. konsepRelativelayout

23. konsepRelativelayout

24. Linearlayout vsRelativelayout
Harus berurutan
Atas ke bawah (vertikal) atau
Kiri ke kanan (horizontal)
Boleh Bebas
di mana saja
(tidak harus urut)

25. Desain detaildenganRelativelayout

26. intent

27. INTENT

28. kirimDATAviaintent
TERIMADATA

29. logGING
Untuk menampilkan nilai di Logcat

30. debugGING
Untuk menampilkan nilai secara bertahap
Untuk Resume

31. KONSTANTA
Supaya aman karena
nilainya pasti sama

32. listview

33. Codelab 2:
aPLIKASIlist
pahlawan

34. Listviewdenganarray adapter

35. LALUBAGAIMANA CARANYAJIKA
DATANYAkompleks SEPERTIINI?
CUSTOMADAPTER
JAWABANNYA

36. KONSEP customadapter

37. Data class/kelasmodel
klik kanan pada package utama → New → Kotlin Class.
Beri nama Hero.

38. Desain layoutitem
klik kanan pada direktori layout → new → layout
resource file dan kemudian beri nama item_hero.xml.

39. Membuatadapter
● Extend ke BaseAdapter
● Implement method getCount(), geItem(), getItemId, dan getView()

40. Intiadapter
● Menghubungkan adapter dengan layout item
● Menyesuaikan data ke masing-masing komponen

41. Persiapan data source
● Tambahakan foto pahlawan ke drawable
● Tambahkan data ke values/strings.xml

42. Penerapan adapter
Inisialisasi sesuai constructor,
set data, dan
pasang ke ListView

43. onitemClickpadalistview
Buat activity baru terlebih dahulu dengan cara
klik kanan pada package utama → New → Activity →
ScrollingActivity. Beri nama DetailActivity.

44. parcelable

45. Mengirimdata individual
Kita sudah belajar cara mengirim data dengan intent sebelumnya,
yang kalau diimplementasikan hasilnya seperti ini:
● Kirim data di MainActivity
● Terima data di DetailActivity

46. LALUBAGAIMANA CARANYA
JIKAPROPERTIDATANYAadaBANYAK?20?100?
2000?
Pastibakalsangatpanjangkan?
parcelable
JAWABANNYA

47. Menambahkanparcelable pada data class
● Pastikan dulu di dalam build.gradle (module: app)
● Tambahkan anotasi @Parcelize dan Parcelable di data class Hero

48. Mengirimdata denganparcelable
● Kirim data di MainActivity
● Terima data di DetailActivity

49. Menambahkankomponendidetail
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="360dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="@+id/toolbar">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:id="@+id/imgDetailPhoto"
/>
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".DetailActivity"
tools:showIn="@layout/activity_detail">
<TextView
android:id="@+id/tvDetailDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/text_margin"
android:text="@string/large_text" />
</androidx.core.widget.NestedScrollView>
● Tambah id di
content_detail.xml
● Tambah ImageView di
activity_detail.xml

50. Menampilkandatadidetail

51. Submission
1

52. constraint
layout

53. Buatactivitydetailbaru
Buat activity baru terlebih dahulu dengan cara
klik kanan pada package utama → New → Activity →
EmptyActivity. Beri nama ConstraintDetailActivity.

54. Detaillistdenganconstraint layout

55. SCROLlVIEW

56. MembuatdanMenggunakanstyle
<TextView
android:id="@+id/tvNameDetail"
style="@style/TitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Sudirman"
/>
<TextView
android:id="@+id/txt_name"
style="@style/TitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="26dp"
android:layout_toEndOf="@id/img_photo"
android:text="@string/name_heroes" />
● activity_constraint_detail.xml● Style di item_hero.xml

57. Mengganticolortheme
● Values > colors.xml
● Referensi warna bisa lihat di
https://www.materialpalette.com

58. Menggantiicon
● Klik kanan pada
mipmap > new >
Image Asset
● Pilih logo di
bagian Path
● Buat logo mudah
di canva.com

59. Recycler
view

60. Konseprecyclerview

61. Kelebihanrecyclerview
Tidak langsung membuat semua list, tapi menggunakan lagi
item yang lama. Sehingga menjadi lebih efisien

62. Kelebihanrecyclerview
Ada LayoutManager yang dapat merubah jenis tampilan hanya
dengan 1 baris kode
LinearLayoutManager GridLayoutManager StaggeredLayoutManager

63. Menambahkan library
● Masuk ke build.gradle (module:app), tambahkan di dalam
dependencies, kemudian Sync Now

64. Menggantilistviewjadi recyclerview
● Ubah di activity_main.xml
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

65. Menambahkancardview
● Ubah di item_hero.xml

66. Membuatadapter untukrecyclerview
● Ubah di activity_main.xml
class HeroAdapter internal constructor(private val context:
Context) : RecyclerView.Adapter<HeroAdapter.ListViewHolder> {

67. Fungsimasing-masingmethod

68. RecyclerViewAdapter
ListView Adapter

69. Hasil akhir RecyclerViewAdapter

70. Lho?Direcyclerviewtidakadaonitemclick?
LALUBAGAIMANA CARANYA?
buatdidalamadapter
JAWABANNYA

71. Onclickdidalamadapter
fun bind(hero: Hero) {
with(itemView){
txt_name.text = hero.name
txt_description.text = hero.description
img_photo.setImageResource(hero.photo)
itemView.setOnClickListener {
val intentDetail = Intent(context, ConstraintDetailActivity::class.java)
val selectedHero = hero
intentDetail.putExtra(ConstraintDetailActivity.KEY_HERO, selectedHero)
context.startActivity(intentDetail)
}
}
}
Di sini memerlukan context karena kita tidak di Activity, tapi di
dalam Adapter. Kita perlu context karena yg berpindah bukan
Adapter-nya, tapi Activity-nya

72. WajiBada Layout manager
rv_list.layoutManager =
LinearLayoutManager(this)
rv_list.layoutManager =
GridLayoutManager(this, 2)

73. Fragment&
Navigation

74. fragment bersifat Modular
● Satu Activity bisa berisi banyak Fragment (ex: Activity B)
● Satu Fragment bisa dipakai di banyak Activity (ex: Fragment A)

75. Codelab 3:
Bottom
navigation

76. Template bottom navigation

77. Buatfragment baru
klik kanan package utama Anda → pilih new → Fragment → Fragment(Blank) → masukan nama fragment tersebut dan
lakukan uncheck pada include fragment factory methods dan include interface callbacks → selanjutnya pilih Finish

78. Tambahiconbaru
klik kanan pada folder drawable → pilih new → pilih Vector Asset. Kemudian pada Clip Art cari icon dengan nama
account_circle. Lalu Klik Next dan Finish.

79. Menambahkanfragment kebuttomnavigation
bottom_nav_menu.xml
mobile_navigation.xml

80. Konfigurasiappbarotomatis

81. Merubahactivityjadifragment
Secara umum kode antara Activity dan Fragment sama,
yang berbeda hanya di bagian ini:
● OnCreate >> onViewCreated
● Context this >> activity

82. Option
menu

83. Membuatmenu
● klik kanan pada res → new → android resource directory dan namai "menu" untuk membuat folder menu. Klik Finish
● klik kanan pada menu → new → android resource file → main_menu.xml dan klik Finish

84. Menampilkanmenudiactivity

85. Menampilkanmenudiactivity
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?actionBarSize"
android:padding="@dimen/appbar_padding"
android:text="@string/app_name"
android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
<activity
android:name=".MenuActivity"
android:label="@string/title_activity_menu"
android:theme="@style/AppTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

86. localization

87. Membuatmulti-language
Masuk ke res → values →strings.xml kemudian klik Open editor

88. Menambahkanbahasa

89. Memanggilsettingbahasa

90. Submission
1I

91. Jsonapi

92. Mendaftar keopenweather api
● Daftar ke http://openweathermap.org/ dan dapatkan API KEY

93. mencobaopenweather api
● Coba buka
https://api.openweathermap.org/data/2.5/weather?q=Bandung&appid=YOUR_API_KEY
● Supaya rapi gunakan extension JSON FORMATTER di Google Chrome

94. Jsonobject danjsonarray
● JSON Array yang
ditandai dengan
tanda kurung siku /
"[]"
● JSON Object yang
ditandai dengan
kurung kurawal / "{}"

95. Json parsing
Ambildatadeskripsi
Ambildatatemperature

96. loopj

97. Codelab 4:
Getdata from
jsonapi

98. Menambahkanlibrary loopj
● Masuk ke build.gradle (module:app), tambahkan di dalam
dependencies, kemudian Sync Now

99. Buatlayout item

100. weatheradapter.kt
class WeatherAdapter internal constructor(private val context: Context) : RecyclerView.Adapter<WeatherAdapter.ListViewHolder>()
{
internal var listData = arrayListOf<WeatherItems>()
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListViewHolder {
//untuk menghubungkan dengan layout item
val itemView = LayoutInflater.from(context).inflate(R.layout.weather_items, parent, false)
val viewHolder = ListViewHolder(itemView)
return viewHolder
}
override fun getItemCount(): Int {
//untuk jumlah item yang ditampilkan
return listData.size
}
override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
//memberi data ke ViewHolder sesuai posisinya
val hero = listData[position]
holder.bind(hero)
}
class ListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
//mencocokkan data dengan komponen
fun bind(weatherItems: WeatherItems) {
with(itemView){
textKota.text = weatherItems.name
textTemp.text = weatherItems.temperature
textDesc.text = weatherItems.description
}
}
}
}
adapter = WeatherAdapter(this)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = adapter
mainactivity.kt

101. Caramengunakanloopj

102. Parsing jsonketikaberhasil

103. Parsing jsonketikaberhasil

104. Menambahkanpermission internet

105. Parsing jsonketikaberhasil

106. Cobalahrotate Aplikasi
Apayangterjadi?
Saatconfigurationchanges
Datanyahilangalias
Tidakterjaga.Lalu
Bagaimanamengatasinya?
viewmodel
JAWABANNYA

107. View
model

108. Buatmainviewmodel

109. Inisialisasiviewmodeldanobserve data

111. Submission
1iI

112. CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, and
infographics & images by Freepik.
THANKSDoes anyone have any questions?
Ahmad Arif Faizin
Dimas Maulana
dicoding.com
Please keep this slide for attribution.