Pada postingan kali ini, saya akan memberikan tutorial untuk membuat kalkulator sederhana dengan menggunakan Android. Setelah sebelumnya kita mempelajari bagaimana mendapatkan inputan di Android, sekarang kita akan mempelajari bagaimana memproses masukan sehingga dapat menghasilkan output (keluaran) yang bermanfaat. (Dalam hal ini kalkulator). Hasil dari koding kita nanti akan berbentuk seperti gambar di bawah ini :
Bagaimanakah caranya..? Mari kita perhatikan langkah – langkah berikut ini.
LANGKAH – LANGKAH MEMBUAT KALKULATOR SEDERHANA
Peralatan dan Bahan
- Android IDE (Bisa menggunakan Eclipse + ADT atau menggunakan Android Studio). Untuk tutorial ini menggunakan Android Studio
- AVD atau Devices dalam mode Debugging
- Niat, Doa, serta usaha
Bukalah aplikasi android studio dan creat sebuah project dengan cara seperti di tutorial saya sebelumnya.
LAYOUT
Buatlah Layout seperti gambar di bawah ini.
Scripting layout di atas adalah sebagai berikut:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="number"
android:ems="10"
android:id="@+id/masukan1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignBottom="@+id/operan"
android:layout_toLeftOf="@+id/operan"
android:layout_toStartOf="@+id/operan"
android:onClick="clearInput1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text=" "
android:id="@+id/operan"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="40dp"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="number"
android:ems="10"
android:id="@+id/masukan2"
android:layout_alignParentTop="true"
android:layout_toEndOf="@+id/operan"
android:layout_alignBottom="@+id/operan"
android:layout_toRightOf="@+id/operan"
android:onClick="clearInput2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Hitung! "
android:id="@+id/hitung"
android:layout_below="@+id/masukan1"
android:layout_centerHorizontal="true"
android:onClick="klikHasil" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Operasi"
android:id="@+id/textView2"
android:layout_below="@+id/hitung"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" + "
android:id="@+id/tambah"
android:layout_below="@+id/textView2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="klikTambah" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - "
android:id="@+id/kurang"
android:layout_alignTop="@+id/tambah"
android:layout_toRightOf="@+id/tambah"
android:layout_toEndOf="@+id/tambah"
android:onClick="klikKurang" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" x "
android:id="@+id/kali"
android:layout_alignTop="@+id/kurang"
android:layout_toRightOf="@+id/kurang"
android:layout_toEndOf="@+id/kurang"
android:onClick="klikKali" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" : "
android:id="@+id/bagi"
android:layout_alignTop="@+id/kali"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:onClick="klikBagi" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Hasil Perhitungan"
android:id="@+id/textView3"
android:layout_below="@+id/tambah"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="0"
android:id="@+id/hasil"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="@+id/bagi"
android:layout_alignEnd="@+id/bagi"
android:gravity="right" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/notifikasi"
android:layout_below="@+id/hasil"
android:layout_centerHorizontal="true"
android:layout_marginTop="72dp"
android:gravity="center"
android:text="Simple Calculator Ready" />
</RelativeLayout>
JAVA (LOGIC PROGRAMMING)
Untuk javanya, kita akan membuat beberapa method, variable, object, dan seluruh elemen yang dibutuhkan untuk menghandle seluruh aktivitas yang ada di layout yang telah kita buat tadi.
Import class yang dibutuhkan
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
Class MainActivity yang mengextend Activity
public class MainActivity extends Activity {
}
Menginstansiasi Objek dan Variable
//R.1
TextView input1, input2, operator, result, notif;
Button btHitung, btJumlah, btKurang, btKali, btBagi;
//V.1
private int operation = 0;
private double HasilAkhir = 0.0;
private String Cek1 = "";
private String Cek2 = "";
Method onCreate
//M.1
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//R.2
input1 = (TextView) findViewById(R.id.masukan1);
input2 = (TextView) findViewById(R.id.masukan2);
operator = (TextView) findViewById(R.id.operan);
result = (TextView) findViewById(R.id.hasil);
notif = (TextView) findViewById(R.id.notifikasi);
//R.3
btHitung = (Button) findViewById(R.id.hitung);
btJumlah = (Button) findViewById(R.id.tambah);
btKurang = (Button) findViewById(R.id.kurang);
btKali = (Button) findViewById(R.id.kali);
btBagi = (Button) findViewById(R.id.bagi);
|