@2020

Belajar Membuat Aplikasi Kalkulator Sederhana Dengan Android Studio


Pada postingan kali ini kita akan belajar membuat aplikasi kalkulator sederhana menggunakan Android Studio.  Pada aplikasi kalkulator sederhana, kita akan menggunakan dua inputan dan operasi standar yaitu, tambah, kurang, kali dan bagi.

Berikut langkah-langkah membuat kalkulator dengan Android Studio:

  1. Buat project baru dengan nama “KalkulatorApp” atau sesuka hati juga boleh.
  2. Buat tampilan interface pada layout seperti gambar berikut:

 
  • Algoritma
Tuliskan nilai a, nilai b, operasi, hasil
Input nilai a, b
Pilih salah satu operasi dari (+),(-),(x),(:)
Jika anda memilih operasi (+), maka hasil = a + b
Jika anda memilih operasi (-), maka hasil = a – b
Jika anda memilih operasi (x), maka hasil = a * b
Jika anda memilih operasi (:), maka hasil = a / b
Cetak hasil

  • Flowchart
fc

  • Pseudo Code
Widget yang digunakan pada program kalkulator yaitu textview (digunakan untuk layar angka kalkulator) dan button (digunakan untuk tombol pada kalkulator).
  • Script Layout
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
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/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/btnClear”
android:text=”C”/>
</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/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/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/btnDevide”
android:text=”/” />
<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>

  • MainActivity.java
package badoystudio.com.simplecalculator;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
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 ActionBarActivity {
// 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;
}
}
}
}

3. Script MainActivity.java
  1. package com.jadibaru.kalkulatorapp;

  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.Button;
  6. import android.widget.TextView;

  7. public class MainActivity extends AppCompatActivity {

  8. TextView input1, input2, operator, result, notif;
  9. Button btHitung, btJumlah, btKurang, btKali, btBagi;

  10. private int operation = 0;
  11. private double HasilAkhir = 0.0;
  12. private String Cek1 = "";
  13. private String Cek2 = "";

  14. @Override
  15. protected void onCreate(Bundle savedInstanceState) {
  16. super.onCreate(savedInstanceState);
  17. setContentView(R.layout.activity_main);

  18. input1 = (TextView) findViewById(R.id.masukan1);
  19. input2 = (TextView) findViewById(R.id.masukan2);
  20. operator = (TextView) findViewById(R.id.operan);
  21. result = (TextView) findViewById(R.id.hasil);
  22. notif = (TextView) findViewById(R.id.notifikasi);

  23. btHitung = (Button) findViewById(R.id.hitung);
  24. btJumlah = (Button) findViewById(R.id.tambah);
  25. btKurang = (Button) findViewById(R.id.kurang);
  26. btKali = (Button) findViewById(R.id.kali);
  27. btBagi = (Button) findViewById(R.id.bagi);

  28. }

  29. public void klikTambah(View V){
  30. operation = 1;
  31. operator.setText("+");
  32. }

  33. public void klikKurang(View V){
  34. operation = 2;
  35. operator.setText("-");
  36. }

  37. public void klikKali(View V){
  38. operation = 3;
  39. operator.setText("x");
  40. }

  41. public void klikBagi(View V){
  42. operation = 4;
  43. operator.setText(":");
  44. }

  45. public void klikHasil(View V){

  46. Cek1 = input1.getText().toString();
  47. Cek2 = input2.getText().toString();

  48. if((Cek1.equalsIgnoreCase("")) || (Cek2.equalsIgnoreCase(""))){
  49. notif.setText("Kolom tidak boleh kosong");
  50. }
  51. else{
  52. double inputA = Double.parseDouble(input1.getText().toString());
  53. double inputB = Double.parseDouble(input2.getText().toString());

  54. switch(operation){
  55. case 1:
  56. HasilAkhir = inputA + inputB;
  57. break;

  58. case 2:
  59. HasilAkhir = inputA - inputB;
  60. break;

  61. case 3:
  62. HasilAkhir = inputA * inputB;
  63. break;

  64. case 4:
  65. HasilAkhir = inputA / inputB;
  66. break;

  67. case 0:
  68. notif.setText("Pilih operasi perhitungan dahulu!");
  69. break;

  70. default:
  71. notif.setText("Undescribeable Error!");
  72. break;
  73. }
  74. if(operation < 1){
  75. result.setText("0");
  76. }

  77. else{
  78. String hasilString = String.valueOf(HasilAkhir);
  79. result.setText(hasilString);
  80. notif.setText("Kalkulator App");
  81. }
  82. }

  83. }
  84. public void clearInput1(View V){
  85. input1.setText("");
  86. operation = 0;
  87. }
  88. public void clearInput2(View V){
  89. input2.setText("");
  90. operation = 0;
  91. }

  92. }

4. Jalankan aplikasi dengan emulator bawaan Android Studio 
Previous
Next Post »

Mengenal Seni Musik Lebih Dalam

Seni musik merupakan bagian penting dari kehidupan. Musik digunakan dalam semua hal diantaraya sebagai ungkapan ekspresi diri. Seseorang pa...