LAPORAN PRAKTIKUM

PEMROGRAMAN MOBLIE
MODUL 2

Tip Calculator App

Oleh:
Fajar Hidayat NIM. 2110817310009

PROGRAM STUDI TEKNOLOGI INFORMASI

FAKULTAS TEKNIK
UNIVERSITAS LAMBUNG MANGKURAT
MARET 2023
 LEMBAR PENGESAHAN
LAPORAN PRAKTIKUM PEMROGRAMAN MOBILE
MODUL 2

Laporan Praktikum Pemrograman Mobile Modul 2: Tip Calculator App ini disusun sebagai
syarat lulus mata kuliah Praktikum Pemrograman Mobile. Laporan Prakitkum ini dikerjakan
oleh:

Nama Praktikan : Fajar Hidayat

NIM : 2110817310009

Menyetujui, Mengetahui,
Asisten Praktikum Dosen Penanggung Jawab Praktikum

Ahmad Zaini Andreyan Rizky Baskara, S.Kom., M.Kom.

NIM. 2010817310001 NIP. 19930703 201903 1 011

2
 DAFTAR ISI

LEMBAR PENGESAHAN .................................................................................................... 2

DAFTAR ISI .......................................................................................................................... 3
DAFTAR GAMBAR.............................................................................................................. 4
DAFTAR TABEL .................................................................................................................. 5
SOAL 1 ................................................................................................................................... 6
A. Source Code ............................................................................................................. 6
B. Output Program...................................................................................................... 12
C. Pembahasan ........................................................................................................... 12
D. Tautan Git .............................................................................................................. 13

3
 DAFTAR GAMBAR

Gambar 1. Screenshot Hasil Jawaban Soal 1A..................................................................... 12

4
 DAFTAR TABEL
Table 1 Source Code dari MainActivity.kt ............................................................................. 7
Table 2 Source Code dari activity_main.xml ....................................................................... 11

5
 SOAL 1
Create a tip calculator app by building the layout first and then implementing the logic to
calculate the tip from the user input.And Add visual polish to the Tip Calculator app using
Material Design guidelines.

A. Source Code

1 package com.example.praktikum2
2
3 import android.content.Context
4 import androidx.appcompat.app.AppCompatActivity
5 import android.os.Bundle
6 import android.view.KeyEvent
7 import android.view.View
8 import android.view.inputmethod.InputMethodManager
9 import com.example.praktikum2.databinding.ActivityMainBinding
10 import java.text.NumberFormat
11
12
13 class MainActivity : AppCompatActivity() {
14
15 private lateinit var binding: ActivityMainBinding
16
17 override fun onCreate(savedInstanceState: Bundle?) {
18
19 super.onCreate(savedInstanceState)
20
21 binding = ActivityMainBinding.inflate(layoutInflater)
22 setContentView(binding.root)
23
24 binding.calculateButton.setOnClickListener {
25 calculateTip() }
26
27 binding.costOfServiceEditText.setOnKeyListener {
28 view, keyCode, _ ->
29 handleKeyEvent(view, keyCode)
30 }
31 }
32
33 private fun calculateTip() {
34 // Get the decimal value from the cost of service
35 text field
36 val stringInTextField =
37 binding.costOfServiceEditText.text.toString()

6
38 val cost = stringInTextField.toDoubleOrNull()
39 if (cost == null) {
40 binding.tipResult.text = ""
41 return
42 }
43
44 val tipPercentage = when
45 (binding.tipOptions.checkedRadioButtonId) {
46 R.id.option_twenty_percent -> 0.20
47 R.id.option_eighteen_percent -> 0.18
48 else -> 0.15
49 }
50
51 var tip = tipPercentage * cost
52 if (binding.roundUpSwitch.isChecked) {
53 tip = kotlin.math.ceil(tip)
54 }
55
56 val formattedTip =
57 NumberFormat.getCurrencyInstance().format(tip)
58 binding.tipResult.text =
59 getString(R.string.tip_amount, formattedTip)
60 }
61
62 private fun handleKeyEvent(view: View, keyCode: Int):
63 Boolean {
64 if (keyCode == KeyEvent.KEYCODE_ENTER) {
65 // Hide the keyboard
66 val inputMethodManager =
67
68 getSystemService(Context.INPUT_METHOD_SERVICE) as
69 InputMethodManager
70
71 inputMethodManager.hideSoftInputFromWindow(view.windowToken,
72 0)
73 return true
74 }
75 return false
76 }
77 }

Table 1 Source Code dari MainActivity.kt

7
1 <?xml version="1.0" encoding="utf-8"?>
2 <ScrollView
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 xmlns:app="http://schemas.android.com/apk/res-auto"
5 xmlns:tools="http://schemas.android.com/tools"
6 android:layout_height="match_parent"
7 android:layout_width="match_parent">
8 <androidx.constraintlayout.widget.ConstraintLayout
9 android:layout_width="match_parent"
10 android:layout_height="wrap_content"
11 android:padding="16dp"
12 tools:context=".MainActivity">
13
14 <ImageView
15 android:id="@+id/icon_cost_of_service"
16 android:layout_width="wrap_content"
17 android:layout_height="wrap_content"
18 android:importantForAccessibility="no"
19 app:srcCompat="@drawable/ic_store"
20 app:layout_constraintStart_toStartOf="parent"
21 app:layout_constraintTop_toTopOf="@id/cost_of_service"
22
23 app:layout_constraintBottom_toBottomOf="@id/cost_of_service" />
24
25 <com.google.android.material.textfield.TextInputLayout
26 android:id="@+id/cost_of_service"
27 android:layout_width="160dp"
28 android:layout_height="wrap_content"
29 android:hint="@string/cost_of_service"
30 app:layout_constraintStart_toStartOf="parent"
31 app:layout_constraintTop_toTopOf="parent"
32 android:layout_marginStart="30dp"
33
34 app:layout_constraintStart_toEndOf="@id/icon_cost_of_service">
35
36
37 <com.google.android.material.textfield.TextInputEditText
38 android:id="@+id/cost_of_service_edit_text"
39 android:layout_width="match_parent"
40 android:layout_height="wrap_content"
41 android:inputType="numberDecimal" />
42
43 </com.google.android.material.textfield.TextInputLayout>

<!-- <EditText-->

8
<!-- android:id="@+id/cost_of_service"-->
<!-- android:layout_width="match_parent"-->
<!-- android:layout_height="wrap_content"-->
<!-- android:hint="@string/cost_of_service"-->
<!-- android:inputType="numberDecimal"-->
<!-- android:minHeight="48dp"-->
<!-- app:layout_constraintStart_toStartOf="parent"-->
<!-- app:layout_constraintTop_toTopOf="parent" />-->
<ImageView
android:id="@+id/icon_service_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:importantForAccessibility="no"
app:srcCompat="@drawable/ic_service"
app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="@id/service_question"

app:layout_constraintBottom_toBottomOf="@id/service_question"
/>
<TextView
android:id="@+id/service_question"
style="@style/Widget.TipTime.TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/how_was_the_service"
android:layout_marginTop="30dp"

app:layout_constraintStart_toStartOf="@id/cost_of_service"

app:layout_constraintTop_toBottomOf="@id/cost_of_service"/>

<RadioGroup
android:id="@+id/tip_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checkedButton="@id/option_twenty_percent"
android:orientation="vertical"

app:layout_constraintStart_toStartOf="@id/service_question"

app:layout_constraintTop_toBottomOf="@id/service_question">

<!-- add RadioButtons here -->

<RadioButton
android:id="@+id/option_twenty_percent"

9
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/amazing_service" />

<RadioButton
android:id="@+id/option_eighteen_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/good_service" />

<RadioButton
android:id="@+id/option_fifteen_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok_service" />

</RadioGroup>

<!-- <Switch-->
<!-- android:id="@+id/round_up_switch"-->
<!-- android:layout_width="0dp"-->
<!-- android:layout_height="wrap_content"-->
<!-- android:checked="true"-->
<!-- android:text="@string/round_up_tip"-->
<!-- app:layout_constraintEnd_toEndOf="parent"-->
<!--
app:layout_constraintStart_toStartOf="@id/tip_options"-->
<!--
app:layout_constraintTop_toBottomOf="@id/tip_options" />-->

<ImageView
android:id="@+id/icon_round_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:importantForAccessibility="no"
app:srcCompat="@drawable/ic_round_up"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/round_up_switch"

app:layout_constraintBottom_toBottomOf="@id/round_up_switch" />

<com.google.android.material.switchmaterial.SwitchMaterial
android:id="@+id/round_up_switch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:checked="true"

10
 android:text="@string/round_up_tip"
app:layout_constraintStart_toEndOf="@id/icon_round_up"
app:layout_constraintStart_toStartOf="@id/tip_options"
app:layout_constraintTop_toBottomOf="@id/tip_options"
/>

<Button
android:id="@+id/calculate_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/calculate"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="8dp"

app:layout_constraintStart_toStartOf="@id/round_up_switch"

app:layout_constraintTop_toBottomOf="@id/round_up_switch" />

<TextView
android:id="@+id/tip_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="@string/tip_amount"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="8dp"

app:layout_constraintTop_toBottomOf="@id/calculate_button" />

</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Table 2 Source Code dari activity_main.xml

11
B. Output Program

Gambar 1. Screenshot Hasil Jawaban Soal 1A

C. Pembahasan

Code tersebut adalah sebuah implementasi sederhana dari sebuah aplikasi kalkulator
tip yang menghitung tip berdasarkan persentase yang dipilih oleh pengguna, serta
memungkinkan pengguna untuk membulatkan tip ke nilai terdekat yang lebih tinggi.

Code ini ditulis dalam bahasa Kotlin dan menggunakan framework Android. Code
ini memiliki beberapa fungsi penting:

• onCreate() : method ini dipanggil ketika activity pertama kali dibuat. Di sini,
view binding diinisialisasi dan beberapa listener diatur.

• calculateTip() : method ini dipanggil ketika pengguna mengeklik tombol

"Hitung Tip". Ini mengambil input pengguna dari EditText dan menghitung tip
berdasarkan persentase yang dipilih oleh pengguna. Jika nilai yang dimasukkan
oleh pengguna tidak dapat diubah menjadi Double, maka hasil tip akan kosong.

• handleKeyEvent() : method ini dipanggil ketika tombol di keyboard ditekan.

Jika tombol yang ditekan adalah tombol "Enter", keyboard akan
disembunyikan.

12
 Code ini juga menggunakan beberapa kelas dan objek yang disediakan oleh Android:

• AppCompatActivity : Kelas ini adalah turunan dari Activity dan menyediakan

dukungan untuk tema modern dan fitur-fitur ActionBar.

• ActivityMainBinding : Ini adalah kelas yang dibuat oleh Android Studio dari
file layout XML dan digunakan untuk mengikat elemen UI ke kode Kotlin.

• InputMethodManager : Ini adalah kelas sistem yang menyediakan metode

untuk mengelola keyboard pada perangkat Android.

activity_amin.xml adalah file layout XML yang digunakan oleh activity MainActivity.
Layout XML ini mendefinisikan tata letak tampilan yang akan ditampilkan oleh aplikasi pada
layar.

Pada layout ini terdapat tiga view yang didefinisikan, yaitu:

• ScrollView: Digunakan untuk membuat aplikasi bisa di scroll

• androidx.constraintlayout.widget.ConstraintLayout:Sebagai pembungkus dari

semua code yang ada

• ImageView dengan id imageView: Digunakan untuk menampilkan gambar icon

• TextView: Digunakan untuk menampikan text

• Radiogroup: Digunakan untuk membuat grup terhadap RadioButton

• RadioButton: Sebagai Tombol untuk di pilih sebagai input user

D. Tautan Git
Berikut adalah tautan untuk source code yang telah dibuat.
https://github.com/Hotaru-tech/praktikum2.git

13