Kalkulator Sederhana dengan Android Studio
Sebelum memulai hands-on membuat aplikasi Kalkulator untuk Android menggunakan Android Studio, ada baiknya kita mengetahui terlebih dahulu apa itu Android serta Android Stuio. Android merupakan sistem operasi berbasis Linux yang dirancang untuk perangkat seluler. Sedangkan Android Studio adalah IDE (Intregrated Development Environment) untuk pengembangan aplikasi Android.
Langsung saja ke tahapan membuat kalkulator sederhana dengan Android Studio:
- Install Android Studio.
- Buka Android Studio dan pilih File lalu New Project, pilih Empty Activity
3. Isi beberapa informasi penting seperti nama aplikasi, package name.
- Name: nama aplikasi yang dibuat
- Package name: company domain sekaligus menjadi id dari aplikasi yang dibuat saat di upload di Play Store
- Save location: boleh mengikuti default, atau lokasi lain
- Language: Java atau Kotlin. FYI, sudah banyak yang melakukan imigrasi ke Kotlin
- Minimum API level: di sarankan Android 4.0, semakin rendah level API yang digunakan semakin bisa mendukung banyak devices namun dengan fungsionalitas yang sedikit.
p.s.: API (Application Programming Interface) adalah seperangkat fungsi, perintah, dan protokol yang digunakan programmer untuk menciptakan software untuk OS tertentu.
4. Membuat layout melalui activity_main.xml
- Inisiasi awal, bagian terpenting adalah dengan mensetting layout sesuai kebutuhan. Kali ini kita menggunakan RelativeLayout yang dapat mengatur letak widget atau komponen dalam aplikasi secara relative terhadap satu sama lain.
- Yang tidak kalah penting adalah menuliskan nama package yang digunakan pada bagian
tools:context= ".MainActivity"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.kalkulator.MainActivity">
...
...</RelativeLayout>
5. Membuat beberapa komponen utama. Kali ini saya menggunakan dua input angka dari user yang menampilkan output berupa hasil operasi.
- Untuk input dari user, kita menggunakan EditText
<EditText
android:id="@+id/num1"
android:layout_width="351dp"
android:layout_height="wrap_content"
android:autofillHints=""
android:hint="@string/masukkan_angka"
android:inputType="number"
tools:ignore="MissingConstraints, UnusedAttribute"
tools:layout_editor_absoluteX="27dp"
tools:layout_editor_absoluteY="34dp" />
<EditText
android:id="@+id/num2"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:layout_below="@id/num1"
android:layout_marginTop="2dp"
android:autofillHints=""
android:hint="@string/masukkan_angka"
android:inputType="number"
tools:ignore="MissingConstraints,UnusedAttribute"
tools:layout_editor_absoluteX="27dp"
tools:layout_editor_absoluteY="93dp" />- Button untuk operasi dari dua input
<Button
android:id="@+id/add"
android:layout_width="347dp"
android:layout_height="wrap_content"
android:text="@string/add"
android:layout_below="@id/result"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="29dp"
tools:layout_editor_absoluteY="190dp" />- Tampilan hasil menggunakan TextView
<TextView
android:id="@+id/result"
android:layout_below="@id/num2"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:text="@string/result"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="27dp"
tools:layout_editor_absoluteY="154dp" />
Sedikit catatan saja, perbedaan antara android:text= dengan android:hint= adalah hint menampilkan text yang membayang pada tampilan layout, sekedar tampilan yang menunjukkan kepada pengguna pada bagian itu user menginputkan sesuatu. Sedangkan text secara harfiah menampilkan teks biasa.
Kemudian android:id= berguna untuk menunjukkan komponen tertentu akan diperlakukan seperti apa pada layout maupun eksekusi programnya.
5. Sekarang buka MainActivity.java
Tampilan awal nya akan seperti ini:
package com.example.kalkulator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {// pertama @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); // kedua }
}
Pada // pertamaatau dalam kelas MainActivity kita akan mendefenisikan variabel khusus pada layout.
TextView result;
EditText num1, num2;
Button addition;Pada // kedua deklarasikan variabelnya
num1 = findViewById(R.id.num1);
num2 = findViewById(R.id.num2);
result = findViewById(R.id.result);
addition = findViewById(R.id.add);Ingat kembali ketika kita memencet tombol + pada tampilan aplikasi maka kita akan menjumlahkan input pada kolom Masukkan Angka angka pertama dan kedua. Kemudian hasilnya akan ditampilkan pada kolom Result. Hal pertama yang perlu dilakukan adalah dengan mensettingaddition dengan SetOnClickListener.
addition.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// mengambil nilai pada kolom input menjadi angka
number1 = Integer.parseInt(num1.getText().toString());
number2 = Integer.parseInt(num2.getText().toString());
// operasi aritmatika biasa
getResult = number1 + number2;
// menampilkan hasil
result.setText(String.valueOf(getResult));
}
});Jangan lupa menambahkan variabel baru pada # pertama
TextView result;
EditText num1, num2;
Button addition;
float number1, number2, getResult;Gabungan dari codingan akhir MainActivity.java dapat dilihat di log berikut:
package com.example.kalkulator;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
TextView result;
EditText num1, num2;
Button addition;
float number1, number2, getResult;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
num1 = findViewById(R.id.num1);
num2 = findViewById(R.id.num2);
result = findViewById(R.id.result);
addition = findViewById(R.id.add);
addition.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
number1 = Integer.parseInt(num1.getText().toString());
number2 = Integer.parseInt(num2.getText().toString());
getResult = number1 + number2;
result.setText(String.valueOf(getResult));
}
});
}
}Sedangkan untuk MainActivity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.kalkulator.MainActivity">
<Button
android:id="@+id/add"
android:layout_width="347dp"
android:layout_height="wrap_content"
android:text="@string/add"
android:layout_below="@id/result"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="29dp"
tools:layout_editor_absoluteY="190dp" />
<EditText
android:id="@+id/num1"
android:layout_width="351dp"
android:layout_height="wrap_content"
android:autofillHints=""
android:hint="@string/masukkan_angka"
android:inputType="number"
tools:ignore="MissingConstraints, UnusedAttribute"
tools:layout_editor_absoluteX="27dp"
tools:layout_editor_absoluteY="34dp" />
<EditText
android:id="@+id/num2"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:layout_below="@id/num1"
android:layout_marginTop="2dp"
android:autofillHints=""
android:hint="@string/masukkan_angka"
android:inputType="number"
tools:ignore="MissingConstraints,UnusedAttribute"
tools:layout_editor_absoluteX="27dp"
tools:layout_editor_absoluteY="93dp" />
<TextView
android:id="@+id/result"
android:layout_below="@id/num2"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:text="@string/result"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="27dp"
tools:layout_editor_absoluteY="154dp" />
</RelativeLayout>6. Step selanjutnya, Run. Bisa di Run melalui devices seperti Smartphone atau pun Virtual Devices.
Saya me-run aplikasi ini pada HP Xiaomi model Redmi 4A, perlu diperhatikan sebelum me-run aplikasi ini developer option pada HP harus diaktifkan. Pada smartphone saya sendiri dapat dilihat melalui Setting>Additional Setting>Developer Option>Kemudian aktifkan.
