Modul 2

MEMBUAT APLIKASI SEDERHANA

(INPUT DATA DAN MENAMPILKAN TOAST)

Capaian pembelajaran:

• Mahasiswa mampu membuat aplikasi sederhana untuk menginputkan data dan menampilkan
data lewat Toast kemudian menjalankan aplikasi di smartphone.

Dasar Teori

Activity

Activity menyatakan layar tunggal di aplikasi Anda dengan antarmuka yang bisa digunakan pengguna
untuk berinteraksi. Misalnya, aplikasi email mungkin memiliki satu activity yang menampilkan daftar email
baru, activity lain untuk menulis email, dan activity lainnya lagi untuk membaca pesan satu per satu.
Aplikasi Anda adalah koleksi activity yang dibuat sendiri atau yang digunakan kembali dari aplikasi lain.

Meskipun activity di aplikasi Anda bekerja sama membentuk pengalaman pengguna yang kohesif di
aplikasi, setiap aplikasi tidak saling bergantung. Proses ini memungkinkan aplikasi memulai activity di
aplikasi lainnya, dan aplikasi lainnya bisa memulai activity Anda (jika aplikasi mengizinkannya). Misalnya,
aplikasi perpesanan yang Anda tulis bisa memulai activity di aplikasi kamera untuk mengambil gambar,
kemudian memulai activity di aplikasi email untuk memungkinkan pengguna berbagi gambar itu di email.

Umumnya, satu aktivitas di aplikasi ditetapkan sebagai aktivitas "utama", yang disajikan kepada pengguna
saat membuka aplikasi untuk pertama kali. Kemudian setiap aktivitas bisa memulai aktivitas lainnya untuk
melakukan tindakan yang berbeda.

Setiap kali aktivitas baru dimulai, aktivitas sebelumnya akan dihentikan, namun sistem mempertahankan
aktivitas dalam tumpukan ("back-stack"). Bila pengguna selesai dengan aktivitas saat ini dan menekan
tombol Kembali, aktivitas akan muncul dari tumpukan (dan dimusnahkan) dan aktivitas sebelumnya
dilanjutkan.

Bila aktivitas dihentikan karena aktivitas baru dimulai, aktivitas pertama akan diberi tahu tentang
perubahan tersebut dengan metode callback daur hidup aktivitas. Daur hidup Aktivitas adalah
serangkaian keadaan aktivitas, mulai dari pertama kali dibuat, hingga setiap kali dihentikan atau
dilanjutkan, hingga bila sistem memusnahkannya.

Daur hidup aktivitas dijelaskan sebagai berikut. Pada aplikasi android, program dimulai dengan method
callback onCreate(). Urutan method callback dari mulai activiy sampai berakhirnya activity dapat dilihat
pada diagram activity lifecycle berikut ini.

Activity Lifecycle (sumber gambar : developer.android.com)

Method callback mendefinisikan suatu event, Kita tidak perlu mengimplementasi semua method callback.
Namun, penting memahami masing-masing method Callback, sehingga aplikasi kita berperilaku sesuai
harapan pengguna.

Method Description

Method ini pertama kali dipanggil ketika activity

onCreate()
pertama dimulai.

onStart() Method ini dipanggil ketika activity sudah terlihat pada user.
 Method ini dipanggil ketika activity mulai berinteraksi dengan
onResume()
user.

Method ini Dipanggil ketika activity berhenti sementara tidak

onPause()
menerima inputan user dan tidak mengeksekusi kode apapun.

Method ini dipanggil ketika activity sudah tidak terlihat pada

onStop()
user.

onDestroy() Method ini dipanggil sebelum sebuah activity di matikan.

Method ini dipanggil setelah activity berhenti dan ditampilkan

onRestart()
ulang oleh user.

XML Layout

Kode XML akan tergenerate secara otomatis ketika kita mengcreate sebuah project dan menciptakan user
interface pada Pallete, seperti menambahkan Button, label, textfield dsb. Kita dapat menemukan kode
XML pada app/src/main/res/layout/…, pilih file xml. Jika belum muncul kode xml-nya, berarti sedang
berada dalam mode Design. Untuk itu kita tinggal mengklik mode Code/Split untuk melihat dalam format
XML.

Tampilan user interface pada android didefinisikan dalam bentuk XML yang terdiri dari susunan hirarki
ViewGroup dan View. View dalam android adalah Widget: misalnya Button, TextBox, Label, dan
sebagainya. Ada pun ViewGroup, adalah layout yang menjadi kontainer untuk menghimpun berbagai
macam Widget di dalamnya, seperti LinearLayout atau ConstraintLayout. Berikut adalah ilustrasi susunan
user interface pada aplikasi android yang terdiri dari hirarki ViewGroup dan View.
Toast

Toast memberikan masukan singkat tentang operasi dalam pop-up kecil. Pop-up ini hanya memenuhi
ruang yang diperlukan agar pesan dan activity saat ini tetap terlihat dan interaktif. Toast menghilang
otomatis setelah waktu tunggu. Misalnya, klik button Kirim di email akan memunculkan toast "Mengirim
pesan...", seperti ditampilkan di screenshot berikut:

Praktek

1. Buat folder Modul2NPM di D:\Mobile Computing\

2. Jalankan Android Studio
3. Buat project baru dengan nama Project Toast NPM
Simpan project di folder Mobile Computing\Modul2NPM. (ganti NPM dengan NPM kalian masing-
masing).
Save Location : D:\Mobile Computing\Modul2NPM
Klik Finish
4. Pada jendela Sourcecode ada 2 file yang terbuka, yaitu: activity_main.xml dan Main_Activity.kt.
• activity_main.xml adalah file xml yang mengatur user interface/tampilan dari activity.
• Main_Activity.kt adalah file kotlin yang mengatur logic dari activity.
Klik activity_main.xml untuk mengatur tampilan dari activity pertama aplikasi kita, klik tombol design
surface di bagian toolbar atas lalu pilih Design, kemudian klik tombol split untuk
menampilkan code xml dan canvas/layout dari activity. Tampilan layar akan seperti berikut.

5. Berikutnya adalah menambahkan plugin id 'kotlin-android-extensions' di file build.gradle (Module

ProjectShareMessage.app).
Kotlin Android Extensions: adalah extension yang digunakan untuk mempermudah kita dalam
memanggil ID dari layout yang sudah kita buat pada file xml kita. Untuk dapat menggunakan Kotlin
Android Extensions tersebut, maka kita perlu menambahkan plugin berikut pada file gradle kita.
Caranya:
o Klik root project dari aplikasi yang kita buat,
o kemudian double click pada build.gradle (Module ProjectShareMessage.app)
o tambahkan code berikut di bagian plugin
id 'kotlin-android-extensions'
o klik Sync Now atau File > Sync Project with Gradle Files untuk mensinkronisasi file gradle
yang baru saja kita ubah dengan project kita.
o Close file build.gradle(:app)
6. Kembali ke activity_main.xml mode Split. Secara default design activity akan menampilkan TextView
dengan tulisan “Hello World!” di bagian tengah canvas. Hapus TextView Hello World!
7. Selanjutnya tambahkan Button pada canvas. Caranya:
• Klik Mode Design.
• Pada panel Pallete, pilih grup Buttons
• Klik dan tarik widget Button ke dalam canvas
8. Selanjutnya kita buat constraint untuk button agar dia tampil relativ terhadap layout container /
parent. Caranya:
• Klik button hingga ia aktif.
• Perhatikan 4 lingkaran yang berada di tiap sisi widget Button. Tugas kita selanjutnya adalah
membuat 3 constraint baru pada anchor (tanda lingkaran) atas, anchor kanan, dan anchor kiri
dengan cara menariknya ke luar. Anchor pada sisi atas kita tarik ke atas hingga menyentuh
bagian atas layout parent, dan anchor pada sisi kiri dan kanan kita tarik ke sebelah kiri dan
kanan hingga menyentuh bagian parent, seperti gambar berikut.
9. Klik tombol split untuk menampilkan code xml dan canvas dari activity. Ganti tulisan Button
dengan Show Toast.

10. Berikutnya kita akan membuka file MainActivity.kt, file kotlin yang menjadi logic dari activity_main
(layout aplikasi kita).
Klik tab MainActivity.kt, maka akan tampil jendela sourcecode seperti berikut

11. Pada MainActivity.kt, terdapat beberapa koding yang dapat dijelaskan sebagai berikut.
• Kelas MainActivity extends AppCompatActivity.
class MainActivity : AppCompatActivity() { …
• AppCompatActivity adalah subkelas Activity yang mendukung semua fitur Android modern sambil
memberikan kompatibilitas dengan versi Android yang lebih lama. Untuk membuat aplikasi kita
tersedia untuk sejumlah besar perangkat dan pengguna mungkin, selalu gunakan
AppCompatActivity.
• Untuk menginisialisasi objek, Activity menggunakan serangkaian metode yang telah ditentukan
(disebut "metode siklus hidup") disebut sebagai bagian dari pengaturan aktivitas. Salah satu
metode siklus hidup tersebut adalah onCreate ().
• Di onCreate (), kita menentukan layout mana yang dikaitkan dengan aktivitas, melalui Metode
setContentView ().
 override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main) }
• Metode setContentView() mereferensikan layout menggunakan R.layout.activity_main, yang
sebenarnya merupakan referensi integer. Kelas R dihasilkan ketika kita membangun aplikasi kita.
Kelas R mencakup semua aset aplikasi, termasuk konten direktori res.

12. Berikutnya kita akan menampilkan Toast “Button was click” ketika kita klik button Show Toast.
Tambahkan kode berikut di function onCreate()

13. Jalankan aplikasi di smartphone, sambungkan hp ke PC dengan USB. Klik tombol run . Tunggu
beberapa saat, maka tampil seperti gambar kiri, dan jika button Show Toast di klik akan muncul pesan
“Button was click!” (gambar kanan)

Buton Show Toast diklik

14. Selanjutnya kita akan tambahkan PlainText.
• Geser button Show Toast ke bawah kemudian sisipkan Edit text / Plain text diatas Button.
• PlainText adalah sebuah EditText untuk menginputkan data teks. Caranya klik tombol design
untuk menampilkan panel Pallete. Kemudian klik group Text pada panel Pallete, lalu drag
PlainText ke dalam canvas.
15. Kembali ke mode Split. Ubah atribut dari Edit Teks :
• Setting constraint, Klik EditText Name, Perhatikan 4 lingkaran/anchor yang berada di tiap sisi
PlainText. Buat constraint baru pada anchor atas dengan cara menariknya hingga menyentuh
parent, anchor kiri menyentuh parent sebelah kiri dan anchor kanan menyentuh parent sebelah
kanan, seperti gambar berikut.

• Ubah id, layout_width, hapus teks Name dan tambahkan hint “Input Message”
16. Ubah atribut dari Button:
• Ubah atribute text : SHOW MESSAGE
• Klik button hingga ia aktif, Perhatikan 4 lingkaran yang berada di tiap sisi Button. Buat constraint
baru pada anchor (tanda lingkaran) atas dengan cara menariknya hingga menyentuh PlainText,
seperti gambar berikut.

17. Berikutnya tambahkan padding layout = 20dp

18. Berikutnya membuat aksi jika Button Show Message diklik maka akan menampilkan Toast berupa teks
yang kita tuliskan di editText. Caranya:
• Klik Main_Activity.kt.
• Ubah kode di method button.setOnClickListener seperti berikut:

19. Run di smartphone. Klik tombol run . Tunggu beberapa saat, maka tampil seperti gambar kiri,
ketikkan semangat terus mencoba (gambar tengah), dan jika button Show Message di klik akan
muncul Toast semangat terus mencoba. Screenshoot hasil project kalian (gambar kanan).
20. Ubah Layout menjadi seperti berikut:
• Tambahkan Edit text, edit atributte seperti berikut:

21. Ubah aksi dari Button Show Message. Jika Button di klik akan menampilkan Toast berupa Nama dan
NPM yang kalian inputkan.
• Ubah kode di method button.setOnClickListener seperti berikut:
22. Run aplikasi di smartphone. Tunggu beberapa saat, maka tampil seperti gambar kiri, ketikkan nama
dan NPM kalian (gambar tengah), dan jika button Show Message di klik akan muncul Toast nama dan
NPM kalian (gambar kanan). Screenshoot hasil project kalian (gambar kanan).
Tugas praktikum:
Modifikasi tampilan project pertama kalian seperti berikut (gambar kiri), kemudian jika button Show My
Toast di klik akan muncul Toast Nama NPM Jurusan. Screensot hasilnya (gambar kanan).

Kumpulkan hasil screenshot praktikum dan tugas praktikum (3 file screenshot) dalam 1 folder
ScreenshotModul2NPM, dan kumpulkan di asisten lab