Langkah pertama menjadi master Android Developer - Membuat Kalkulator

Yah beginilah menjadi seorang pemula (eits... itu kamu ya bukan saya :D ... ketawa evil)... sebelum kita melangkah ke langkah yang lebih dalam lagi... kita buat dulu deh latihan sederhana. hehehe, yups kalkulator...

Kenapa kalkulator, ya pastinya kalian kalo belajar pasti buat kalkulator dulu kan di sekolah ataupun di kampus, wkwkwkw... (sialan lu ndri!!)... tapi disitu kita bisa belajar bagaimana melakukan implementasi sederhana penggunaan variable yang cukup bikin kita pusing.. ehehehe...

Oke lanjut ke topik utama

Mari kita buat sebuah project

Buat Sebuah Project

Hal pertama yang harus dilakukan ya jelas dong, buat sebuah project baru dengan melakukan klik "start a new Android Studio Project", atau 'file-> New-> New Project'

Oke kita pilih EmptyActivity di pilihan "Add an Actiivity to Mobile", dan masukan nama sesuai keinginan kamu, tapi disini saya biarkan dengan nama awalnya yaitu MainActivity. dalam hal ini, hierarchy dari tampilan kamu seharusnya seperti gambar yang saya tunjukin di bawah ini.

Nyalakan data binding dalam project-mu

Dalam contoh kali ini, kita akan melakukan pengaturan di project menggunakan data binding. menggunakan data binding di aplikasi ini membuat kita lebih mudah melakukan refer ke widgets seperti Button(tombol), EditText dan TextView secara langsung, daripada mencarinya menggunakan metode findView. untuk menjalankan data binding, kamu harus menambahkan sebuah perintah seperti dibawah ini dalam file build.grandle.
Woke dokey... Selanjutnya kita butuh melakukan perubahan terakhir pada file activity_main.xml untuk menyalakan data binding. tutup ta root yang tergenerated atau dalam kasus kita ini dalah sebuah ReltiveLayout dengan sebuah tag layout, untuk membuat sebuah tag root baru.

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <RelativeLayout>
    ...
    </RelativeLayout>
</layout>

Tag layout akan memberitahukan build system bahwa ia adalah sebuah file yang di gunakan untuk data binding. build system lalu akan melakukan generate sebuah kels binding secra otomatis untuk layout file ini. karena activity_main.xml ini menjadi sebuah target file, maka build system akan mengenerate sebuah class bernama ActivityMainBinding, dimana itu akan memberitahukan bahwa aplikasi kamu sama seperti class java lainnya. nama class dari didapat dari sebuah nama file layout dengan hurup besar pada awal kata di setiap tulisannya setelah garis bawah, dan menghapus semuah garis bawah dan menambahkan kata "Binding"

Oke, pindah ke MainActivity.java. buat sebuah private ActivityMainBinding instance dalam class-mu, dan dalam motode onCreate, delete setContentView lalu ganti dengan DataBindingUtil.setContentView() seperti pada contoh di bawa ini.

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    }
}

Mengerti apa itu layout widgets

Ada 4 hal utama dalam aplikasi kalkultor kita.

1. RelativeLayout - item ini memberikan perintah item lain diletakan atau di tampilkan dalam screen. ReltiveLayout digunakan untuk melakukan pengaturan posisi dari child element yang berhubungan dengan lainnya atau untuk dirinya sendiri.
2. TextView - item ini digunakan untuk menampilkan sebuah text. yang nantinya akan digunakan untuk menampilkan hasil komputasi.
3. EditText - jenis ini adalah sebuah jenis dimana user bisa melakukan edit atau melakukan input. walaupun begitu kita kan bakal membuat sebuah kalkulator  ya jadi kita akan buat seperti tombol saja. alias non-editable.
4. Button - nah ini digunakan untuk melakukan eksekusi atau sebuah perintah.

 

Membuat sebuah layout kalkulator

Perintah dari layout kalkulator ini lumayan panjang loh. dikarenakan kita harus secara explisit menjelaskan semua hal mulai dari posisi, fungsi dan lainnya yang disimpan di activy_main

<layout>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.sample.foo.samplecalculator.MainActivity">

        <TextView
            android:id="@+id/infoTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:textSize="30sp" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/infoTextView"
            android:enabled="false"
            android:gravity="bottom"
            android:lines="2"
            android:maxLines="2"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonSeven"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText"
            android:text="7"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonEight"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText"
            android:layout_toRightOf="@id/buttonSeven"
            android:text="8"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonNine"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editText"
            android:layout_toRightOf="@id/buttonEight"
            android:text="9"
            android:textSize="20sp" />
       
        ...
       
        ...

        <Button
            android:id="@+id/buttonDot"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/buttonOne"
            android:text="."
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonZero"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/buttonEight"
            android:layout_below="@id/buttonTwo"
            android:text="0"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonEqual"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/buttonNine"
            android:layout_below="@id/buttonThree"
            android:text="="
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonDivide"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonNine"
            android:layout_toRightOf="@id/buttonNine"
            android:text="/"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonMultiply"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonSix"
            android:layout_toRightOf="@id/buttonSix"
            android:text="*"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonSubtract"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonThree"
            android:layout_toRightOf="@id/buttonThree"
            android:text="-"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonAdd"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/buttonEqual"
            android:layout_toRightOf="@id/buttonEqual"
            android:text="+"
            android:textSize="20sp" />

        <Button
            android:id="@+id/buttonClear"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@id/buttonAdd"
            android:layout_below="@id/buttonAdd"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="C"
            android:textSize="20sp" />
    </RelativeLayout>
</layout>

Bagian dalam kalkulator

Kalkulator kita mempunyai dua isian, kita sebut disini valueOne dan valueTwo. isin ini mnejaga agar angkat tetap menyala. kedua isian ini bertipe double, jadi dia bisa tetap memberikan angka desiml ataupun bukan. kita atur valueOne menjadi special Double NaN (not an number) dengan beberapa penjelasan seperti berikut

private double valueOne = Double.NaN;
private double valueTwo;

Dalam aplikasi kita hanya bisa melakukan beberapa operasi saja seperti pertambahan, pengurangn, perkalian dan pembagian. jadi kita harus melakukan define 4 statik char yang merepresentasikan operasi ini, dan sebuah varible CURRENT_ACTION yang bertugas menahan operasi selanjutnya.

private static final char TAMBAH = '+';
private static final char KURANG = '-';
private static final char KALI = '*';
private static final char BAGI = '/';

private  char CURRENT_ACTION;

Akhirnyaaaa, kita bisa menggunakan DecimalFormat class untuk memberikan tipe output dari kalkulator kita.

decimalFormat = new DeccimalFormat (#.#########");

Menghandle Tomblok klik (angka)

kapanpun user menekan angka atau tanda titik, kita sehrunya ingin agar menambahkan sebuh angka pada editText. bagaimana caranya? coba kita buat koding seperti dibawah ini dengan default numbernya adalah 0.

        binding.buttonZero.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                binding.editText.setText(binding.editText.getText() + "0");
            }
        });

Menghandle tombol klik ( operasi )

Menghandle tombol klik untuk sebuah operasi sedikit berbeda. kita akan menjalankan komputasi yang tertunda dulu. jadi kita memberikan define ke sebuah metode ke coputateClaculation, bersma dengan computeCalculation, jiga vlueOne bernilah angka, maka kita membaca valueTwo dari sebuah editText dan menjalankan semua urutan operasi. di sisi lain jika valueOne dalah Nan, ValueOne akan diisi angka yang and di editText.

private void computeCalculation() {
        if(!Double.isNaN(valueOne)) {
            valueTwo = Double.parseDouble(binding.editText.getText().toString());
            binding.editText.setText(null);

            if(CURRENT_ACTION == ADDITION)
                valueOne = this.valueOne + valueTwo;
            else if(CURRENT_ACTION == SUBTRACTION)
                valueOne = this.valueOne - valueTwo;
            else if(CURRENT_ACTION == MULTIPLICATION)
                valueOne = this.valueOne * valueTwo;
            else if(CURRENT_ACTION == DIVISION)
                valueOne = this.valueOne / valueTwo;
        }
        else {
            try {
                valueOne = Double.parseDouble(binding.editText.getText().toString());
            }
            catch (Exception e){}
        }
    }

Untuk setiap opersi, kita panggil computeCalculation() terlebih, lalu mengatur CURRENT_ACTION ke operator yang dipilih, sama halnya dengan operator '=', kita panggil computCalculation(), lalu bersihkan konten yang berada di valueOne dan CURRENT_ACTION.

        binding.buttonAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = ADDITION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "+");
                binding.editText.setText(null);
            }
        });

        binding.buttonSubtract.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = SUBTRACTION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "-");
                binding.editText.setText(null);
            }
        });

        binding.buttonMultiply.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = MULTIPLICATION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "*");
                binding.editText.setText(null);
            }
        });

        binding.buttonDivide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                CURRENT_ACTION = DIVISION;
                binding.infoTextView.setText(decimalFormat.format(valueOne) + "/");
                binding.editText.setText(null);
            }
        });

        binding.buttonEqual.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                computeCalculation();
                binding.infoTextView.setText(binding.infoTextView.getText().toString() +
                        decimalFormat.format(valueTwo) + " = " + decimalFormat.format(valueOne));
                valueOne = Double.NaN;
                CURRENT_ACTION = '0';
            }
        });

Akhirnyaaaaaaaa..... jika kamu sudah menulis semua yang ada di tutorial ini dengan benar dan walaaaaaahhh... kamu sudah berhasil menciptakan aplikasi kalkulator sederhana untuk android... gimana ... susah kan .. iy susah emang .. ahahahaha