9 Langkah Mudah Membuat Aplikasi Kalkulator Sederhana di Android

Pada tutorial kali ini kita akan belajar membuat aplikasi kalkulator sederhana di android menggunakan Android Studio. Bagaimana cara membuatnya ? Mudah ko 😀 Langsung saja kita buat sekarang, inilah langkah-langkahnya.

9 langkah Membuat Aplikasi Kalkulator Sederhana di Android Studio

Tutorial ini dibuat menggunakan Android Studio versi 3.5. Sehingga sudah compatible jika kamu menggunakan Android Studio versi terbaru saat ini yaitu 4.0.

1. Pertama, Buat Project Baru

Buat project baru pada android studio dengan nama project app ” calculator “ atau kamu bisa menyesuaikan sendiri.

2. Setelah Itu, Ubah Icon

Icon default aplikasi bawaan dari android yaitu logo android (robot hijau). Kali ini kita akan merubah icon aplikasi dengan icon yang sudah kita download dari situs flaticon dengan cara sebagai berikut.

Klik folder res > klik kanan pada folder mipmap > New Image Asset

Setelah itu ubah nama ic_launcher menjadi ic_calc > pilih image pada asset type > pilih icon dari komputer kita pada path > Next > Finish

3. Lalu, Buat Layout

Buat layout kalkulator pada activity_main.xml. Kita akan menggunakan beberapa widget yaitu :

• TextView
• Button

TextView akan digunakan sebagai layar angka kalkulator ditambah beberapa tombol yang diperlukan. TextView juga digunakan sebagai pengganti EditText, untuk mencegah input pengguna manual menggunakan keypad default Android.

Dan layout yang digunakan yaitu :

• Relative Layout
• Linear Layout

Kode lengkapnya 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"

    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtScreen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="right|center_vertical"
        android:maxLength="16"
        android:padding="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30sp"
        android:typeface="serif" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/txtScreen"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnSeven"
                android:text="7" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnEight"
                android:text="8" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnNine"
                android:text="9"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnDivide"
                android:text="/"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnFour"
                android:text="4"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnFive"
                android:text="5" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnSix"
                android:text="6" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnMultiply"
                android:text="*" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnOne"
                android:text="1" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnTwo"
                android:text="2" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnThree"
                android:text="3" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnSubtract"
                android:text="-" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                 android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnDot"
                android:text="." />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnZero"
                android:text="0" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnClear"
                android:text="C" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnAdd"
                android:text="+" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnEqual"
                android:text="=" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Maka pada bagian preveiw akan terlihat seperti gambar dibawah ini layoutnya :

4. Style pada Button

Button pada layout yang sudah dibuat pada langkah ke 3 terlihat kurang menarik. Kita akan memberikan style pada button agar lebih menarik. Caranya yaitu :

• Klik folder res > Klik kanan pada drawable > Pilih New > Pilih Drawable resource file

Drawable filenya kita beri nama button

Kemudian masukan kode-kode berikut pada drawable/ button.xml

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <gradient android:angle="90" android:endColor="#FFFFFF" android:startColor="#9EB8FF" android:type="linear" />
            <padding android:bottom="0dp" android:left="0dp" android:right="0dp" android:top="0dp" />
            <size android:width="60dp" android:height="60dp" />
            <stroke android:width="1dp" android:color="#ff3da6ef" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient android:angle="90" android:endColor="#FFFFFF" android:startColor="#ffd9d9d9" android:type="linear" />
            <padding android:bottom="0dp" android:left="0dp" android:right="0dp" android:top="0dp" />
            <size android:width="60dp" android:height="60dp" />
            <stroke android:width="0.5dp" android:color="#ffcecece" />
        </shape>
    </item>
</selector>

Hasilnya :

5. Background button

Setelah kamu buat file button.xml pada drawable. Maka langkah selanjutnya gunakan button.xml sebagai background button pada activity_main.xml.

Tambahkan kode berikut pada setiap button.

android:background="@drawable/button"

Sehingga kode lengkap pada activity_main.xml yaitu :

<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"

    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtScreen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="right|center_vertical"
        android:maxLength="16"
        android:padding="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30sp"
        android:typeface="serif" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/txtScreen"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:background="@drawable/button"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnSeven"
                android:text="7" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnEight"
                android:text="8" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnNine"
                android:text="9"/>
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnDivide"
                android:text="/"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnFour"
                android:text="4"/>
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnFive"
                android:text="5" />
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:background="@drawable/button"
                android:id="@+id/btnSix"
                android:text="6" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnMultiply"
                android:text="*" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnOne"
                android:text="1" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnTwo"
                android:text="2" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnThree"
                android:text="3" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnSubtract"
                android:text="-" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnDot"
                android:text="." />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnZero"
                android:text="0" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnClear"
                android:text="C" />
            <Button
                android:layout_width="0dp"
                android:background="@drawable/button"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnAdd"
                android:text="+" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:background="@drawable/button"
                android:layout_weight="1"
                android:textSize="30sp"
                android:id="@+id/btnEqual"
                android:text="=" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Jika di preview hasilnya button terlihat lebih modern sekarang :

6. Library

Untuk mengevaluasi ekspresi aritmatika, library exp4J digunakan dalam pembuatan kalkulator ini.

• Buka file “build.gradle (Module: app)” dari skrip Gradle
• Tambahkan kode berikut  :

implementation 'net.objecthunter:exp4j:0.4.4'

pastikan terhubung ke internet lalu klik sync now.

Sangat di Rekomendasikan : Modul Android Studio Keren dan Lengkap Yang Wajib Kamu Punya 

 7. MainActivity.java

Ubah MainActivity.java seperti yang kode-kode di bawah ini. Deskripsi lengkap tentang kode diberikan pada tag komentar. 

package com.example.kalkulator;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import net.objecthunter.exp4j.Expression;
import net.objecthunter.exp4j.ExpressionBuilder;


public class MainActivity extends AppCompatActivity {
    // IDs of all the numeric buttons
    private int[] numericButtons = {R.id.btnZero, R.id.btnOne, R.id.btnTwo, R.id.btnThree, R.id.btnFour, R.id.btnFive, R.id.btnSix, R.id.btnSeven, R.id.btnEight, R.id.btnNine};
    // IDs of all the operator buttons
    private int[] operatorButtons = {R.id.btnAdd, R.id.btnSubtract, R.id.btnMultiply, R.id.btnDivide};
    // TextView used to display the output
    private TextView txtScreen;
    // Represent whether the lastly pressed key is numeric or not
    private boolean lastNumeric;
    // Represent that current state is in error or not
    private boolean stateError;
    // If true, do not allow to add another DOT
    private boolean lastDot;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Find the TextView
        this.txtScreen = (TextView) findViewById(R.id.txtScreen);
        // Find and set OnClickListener to numeric buttons
        setNumericOnClickListener();
        // Find and set OnClickListener to operator buttons, equal button and decimal point button
        setOperatorOnClickListener();
    }

    /**
     * Find and set OnClickListener to numeric buttons.
     */
    private void setNumericOnClickListener() {
        // Create a common OnClickListener
        View.OnClickListener listener = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Just append/set the text of clicked button
                Button button = (Button) v;
                if (stateError) {
                    // If current state is Error, replace the error message
                    txtScreen.setText(button.getText());
                    stateError = false;
                } else {
                    // If not, already there is a valid expression so append to it
                    txtScreen.append(button.getText());
                }
                // Set the flag
                lastNumeric = true;
            }
        };
        // Assign the listener to all the numeric buttons
        for (int id : numericButtons) {
            findViewById(id).setOnClickListener(listener);
        }
    }

    /**
     * Find and set OnClickListener to operator buttons, equal button and decimal point button.
     */
    private void setOperatorOnClickListener() {
        // Create a common OnClickListener for operators
        View.OnClickListener listener = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // If the current state is Error do not append the operator
                // If the last input is number only, append the operator
                if (lastNumeric && !stateError) {
                    Button button = (Button) v;
                    txtScreen.append(button.getText());
                    lastNumeric = false;
                    lastDot = false;    // Reset the DOT flag
                }
            }
        };
        // Assign the listener to all the operator buttons
        for (int id : operatorButtons) {
            findViewById(id).setOnClickListener(listener);
        }
        // Decimal point
        findViewById(R.id.btnDot).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (lastNumeric && !stateError && !lastDot) {
                    txtScreen.append(".");
                    lastNumeric = false;
                    lastDot = true;
                }
            }
        });
        // Clear button
        findViewById(R.id.btnClear).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                txtScreen.setText("");  // Clear the screen
                // Reset all the states and flags
                lastNumeric = false;
                stateError = false;
                lastDot = false;
            }
        });
        // Equal button
        findViewById(R.id.btnEqual).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onEqual();
            }
        });
    }

    /**
     * Logic to calculate the solution.
     */
    private void onEqual() {
        // If the current state is error, nothing to do.
        // If the last input is a number only, solution can be found.
        if (lastNumeric && !stateError) {
            // Read the expression
            String txt = txtScreen.getText().toString();
            // Create an Expression (A class from exp4j library)
            Expression expression = new ExpressionBuilder(txt).build();
            try {
                // Calculate the result and display
                double result = expression.evaluate();
                txtScreen.setText(Double.toString(result));
                lastDot = true; // Result contains a dot
            } catch (ArithmeticException ex) {
                // Display an error message
                txtScreen.setText("Error");
                stateError = true;
                lastNumeric = false;
            }
        }
    }
}

 8. AndroidManifest.xml

Ubah android:icon menjadi @mipmap/ic_calc agar icon tidak lagi robot hijau.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.kalkulator">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_calc"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_calc_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 9. Running App

Silahkan kamu jalankan aplikasi pada android virtual device,  emulator genymotion, atau langsung menggunakan device android.

Tujuan dari tutorial ini bukanlah untuk membuat kalkulator yang sempurna seperti pada aplikasi bawaan android. Setidaknya kita bisa mengetahui cara dasar pembuatan kalkulator sederhana dari tutorial ini. Jangan lupa klik tombol share :D. Semoga bermanfaat.