Tuesday, December 11, 2018

Kalkulator : Mudahnya Membuat Aplikasi Kalkulator Sederhana di Android Studio

Mudahnya Membuat Aplikasi Kalkulator Sederhana di Android Studio  -  artikel kali ini akan membahas mengenai cara membuat aplikasi kalkulator sederhana atau simple, nah perlu diketahui aplikasi kalkulator ini dibuat dengan menggunakan editor Android Studio, namun jika ada yang ingin menggunakan script kalkulator sederhana ini di Eclipse, No Problem... sama saja. Script kalkulator ini bisa untuk android studio atau pun untuk eclipse.

Cara buat kalkulator simple atau sederhana sangat sering di buat atas dasar tugas dari dosen, namun tidak menutup kemungkinan bagi kalangan yang ingin belajar otodidak untuk mengetahui cara membuat kalkulator sederhana di android studio.

Pada script kalkulator android ini terbagi atas 2 bagian, yang pertama adalah  activity_main yaitu sebagai tampilan atau layout dari kalkulator nantinya. Disini bisa anda kreasikan bagaimna tampilan dari kalkulator sederhana yang baik menurut anda. untuk tampilan aplikasi kalkulator android studio kali ini seperti gambar berikut.

tampilan dari membuat kalkulator di android studio
Gambar kalkulator sederhana dengan android studio

Sebagai desain script kalkulator yaitu activity_main, berikut script layout kalkulatornya.

Activity_main.xml

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<?xml version="1.0" encoding="utf-8"?>
<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:background="@drawable/anakitlogo"
    tools:context="id.anakit.kalkulatoranakit.MainActivity">

    <TextView
        android:id="@+id/lbloperan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/btnbagi"
        android:layout_alignRight="@+id/btnbagi"
        android:layout_below="@+id/lblangka"
        android:layout_marginEnd="52dp"
        android:layout_marginRight="52dp"
        android:layout_marginTop="15dp"
        android:text="lblangka"
        android:visibility="invisible"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="427dp" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btn5"
        android:text="1"
        tools:layout_editor_absoluteX="6dp"
        tools:layout_editor_absoluteY="249dp" />

    <Button
        android:id="@+id/btn7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/linearLayout"
        android:text="7"
        tools:layout_editor_absoluteX="6dp"
        tools:layout_editor_absoluteY="105dp" />

    <Button
        android:id="@+id/btn8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout"
        android:layout_toEndOf="@+id/btn7"
        android:layout_toRightOf="@+id/btn7"
        android:text="8"
        tools:layout_editor_absoluteX="94dp"
        tools:layout_editor_absoluteY="105dp" />

    <Button
        android:id="@+id/btn9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout"
        android:layout_toEndOf="@+id/btn8"
        android:layout_toRightOf="@+id/btn8"
        android:text="9"
        tools:layout_editor_absoluteX="182dp"
        tools:layout_editor_absoluteY="105dp" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btn8"
        android:text="4"
        tools:layout_editor_absoluteX="6dp"
        tools:layout_editor_absoluteY="153dp" />

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn9"
        android:layout_toEndOf="@+id/btn4"
        android:layout_toRightOf="@+id/btn4"
        android:text="5"
        tools:layout_editor_absoluteX="94dp"
        tools:layout_editor_absoluteY="153dp" />

    <Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btntambah"
        android:layout_toEndOf="@+id/btn5"
        android:layout_toRightOf="@+id/btn5"
        android:text="6"
        tools:layout_editor_absoluteX="182dp"
        tools:layout_editor_absoluteY="153dp" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn6"
        android:layout_toEndOf="@+id/btn7"
        android:layout_toRightOf="@+id/btn7"
        android:text="2"
        tools:layout_editor_absoluteX="94dp"
        tools:layout_editor_absoluteY="201dp" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnkurang"
        android:layout_toEndOf="@+id/btn0"
        android:layout_toRightOf="@+id/btn0"
        android:text="3"
        tools:layout_editor_absoluteX="182dp"
        tools:layout_editor_absoluteY="201dp" />

    <Button
        android:id="@+id/btntambah"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout"
        android:layout_toEndOf="@+id/btn9"
        android:layout_toRightOf="@+id/btn9"
        android:text="+"
        tools:layout_editor_absoluteX="270dp"
        tools:layout_editor_absoluteY="105dp" />

    <Button
        android:id="@+id/btnkurang"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btntambah"
        android:layout_toEndOf="@+id/btn6"
        android:layout_toRightOf="@+id/btn6"
        android:text="-"
        tools:layout_editor_absoluteX="270dp"
        tools:layout_editor_absoluteY="153dp" />

    <Button
        android:id="@+id/btnkali"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btn3"
        android:layout_alignBottom="@+id/btn3"
        android:layout_toEndOf="@+id/btn3"
        android:layout_toRightOf="@+id/btn3"
        android:text="x"
        tools:layout_editor_absoluteX="270dp"
        tools:layout_editor_absoluteY="201dp" />

    <Button
        android:id="@+id/btnclear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btn2"
        android:text="CLEAR"
        tools:layout_editor_absoluteX="6dp"
        tools:layout_editor_absoluteY="249dp" />

    <Button
        android:id="@+id/btn0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn3"
        android:layout_toEndOf="@+id/btnclear"
        android:layout_toRightOf="@+id/btnclear"
        android:text="0"
        tools:layout_editor_absoluteX="94dp"
        tools:layout_editor_absoluteY="249dp" />

    <Button
        android:id="@+id/btnsamadengan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btnkali"
        android:layout_toEndOf="@+id/btn0"
        android:layout_toRightOf="@+id/btn0"
        android:text="="
        tools:layout_editor_absoluteX="182dp"
        tools:layout_editor_absoluteY="249dp" />

    <Button
        android:id="@+id/btnbagi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btnsamadengan"
        android:layout_alignBottom="@+id/btnsamadengan"
        android:layout_toEndOf="@+id/btnsamadengan"
        android:layout_toRightOf="@+id/btnsamadengan"
        android:text="/"
        tools:layout_editor_absoluteX="270dp"
        tools:layout_editor_absoluteY="249dp" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="381dp"
        android:layout_height="89dp"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="6dp"
        tools:layout_editor_absoluteY="8dp">

        <EditText
            android:id="@+id/txtangka1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:textAlignment="textEnd" />

        <EditText
            android:id="@+id/txtangka2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:textAlignment="textEnd" />
    </LinearLayout>

    <TextView
        android:id="@+id/lblangka"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn0"
        android:layout_marginTop="71dp"
        android:layout_toLeftOf="@+id/btnsamadengan"
        android:layout_toStartOf="@+id/btnsamadengan"
        android:text="lblangka"
        android:visibility="invisible"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="427dp" />

</RelativeLayout>

Jika anda ingin mengcopy secara keseluruhan ada beberapa point penting yang harus anda rubah dari script kalkulator sederhana diatas yaitu:

  1. “anakitlogo”, ini adalah nama gambar yang saya berikan di drawable yang berguna sebagai latar belakang atau background kalkulator android  sederhana. Jadi jika anda ingin tetap ada backgroundnya anda berikan gambar gantinya ke drawable.
  2. “id.anakit.kalkulatoranakit”, ini adalah nama package dari project yang saya buat ketika membuat aplikasi kalkulator sederhana ini, jadi ganti dengan nama package anda, letaknya di bagian atas pada MainActivity.java

Yang Kedua adalah MainActivity, pada bagian ini adalah bagian inti, dimana semua aktivitas dari proses ketika anda melakukan sesuatu di layout terjadi disini. Tentunya dalam hal ini script pada MainActivity adalah bahasa java android. Berikut adalah script MainActivity dari kalkulator simple di android studio.

MainActivity.java
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
package id.anakit.kalkulatoranakit;

import android.support.v7.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 {

    EditText angka1, angka2;
    TextView lbanga, lboperan;
    private Button tombol0;
    private Button tombol1;
    private Button tombol2;
    private Button tombol3;
    private Button tombol4;
    private Button tombol5;
    private Button tombol6;
    private Button tombol7;
    private Button tombol8;
    private Button tombol9;
    private Button tomboltambah;
    private Button tombolkurang;
    private Button tombolkali;
    private Button tombolbagi;
    private Button tombolsamadengan;
    private Button tombolclear;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        angka1 = (EditText) findViewById(R.id.txtangka1);
        angka2 = (EditText) findViewById(R.id.txtangka2);
//script membuat kalkulator simple di android studio by anakit
        tombol0 = findViewById(R.id.btn0);
        tombol1 = findViewById(R.id.btn1);
        tombol2 = findViewById(R.id.btn2);
        tombol3 = findViewById(R.id.btn3);
        tombol4 = findViewById(R.id.btn4);
        tombol5 = findViewById(R.id.btn5);
        tombol6 = findViewById(R.id.btn6);
        tombol7 = findViewById(R.id.btn7);
        tombol8 = findViewById(R.id.btn8);
        tombol9 = findViewById(R.id.btn9);
        tomboltambah = findViewById(R.id.btntambah);
        tombolkurang = findViewById(R.id.btnkurang);
        tombolkali = findViewById(R.id.btnkali);
        tombolbagi = findViewById(R.id.btnbagi);
        tombolsamadengan = findViewById(R.id.btnsamadengan);
        tombolclear = findViewById(R.id.btnclear);
        lbanga = findViewById(R.id.lblangka);
        lboperan = findViewById(R.id.lbloperan);
//aplikasi kalkulator anakit


        tombol0.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() +  "0");

            }
        });
        tombol1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() +   "1");

            }
        });
        tombol2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() +  "2"); //anakit kalkulator sederhana

            }
        });
        tombol3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() +  "3");

            }
        });
        tombol4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() +  "4");
//script kalkulator sederhana anakit
            }
        });
        tombol5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() + "5");

            }
        });
        tombol6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() + "6");

            }
        });
        tombol7.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() + "7");

            }
        });
        tombol8.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() + "8");
//cara membuat kalkulator dengan android stuido by anakit
            }
        });
        tombol9.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText(angka2.getText() + "9");

            }
        });
        tombolclear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka2.setText("");
                angka1.setText("");

            }
        });
        tomboltambah.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                lboperan.setText("+");
                angka1.setText(angka2.getText() + " " + lboperan.getText() + " ");
                lbanga.setText(angka2.getText());
                angka2.setText("");
//source code kalkulator android studio
            }
        });
        tombolkurang.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                lboperan.setText("-");
                angka1.setText(angka2.getText() + " " + lboperan.getText() + " ");
                lbanga.setText(angka2.getText());
                angka2.setText("");


            }
        });
        tombolkali.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                lboperan.setText("x");
                angka1.setText(angka2.getText() + " " + lboperan.getText() + " ");
                lbanga.setText(angka2.getText());
                angka2.setText("");


            }
        });
        tombolbagi.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                lboperan.setText("/");
                angka1.setText(angka2.getText() + " " + lboperan.getText() + " ");
                lbanga.setText(angka2.getText());
                angka2.setText("");
//cara membuat aplikasi kalkulator di android studio

            }
        });
        tombolsamadengan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                angka1.setText(lbanga.getText() + " " + lboperan.getText() + " " + angka2.getText() );

                if(lboperan.getText().toString().equals("+"))
                {
                    int ang1 = Integer.parseInt(lbanga.getText().toString());
                    int ang2 = Integer.parseInt(angka2.getText().toString());
                    int hasil = ang1 + ang2;

                    angka2.setText("= " + hasil );

                }
                else if (lboperan.getText().toString().equals("-"))
                {
                    int ang1 = Integer.parseInt(lbanga.getText().toString());
                    int ang2 = Integer.parseInt(angka2.getText().toString());
                    int hasil = ang1 - ang2;

                    angka2.setText("= " + hasil );
                }
                else if (lboperan.getText().toString().equals("x"))
                {
                    int ang1 = Integer.parseInt(lbanga.getText().toString());
                    int ang2 = Integer.parseInt(angka2.getText().toString());
                    int hasil = ang1 * ang2;
//aplikasi kalkulator sederhana by anakit
                    angka2.setText("= " + hasil );

                }
                else
                {
                    int ang1 = Integer.parseInt(lbanga.getText().toString());
                    int ang2 = Integer.parseInt(angka2.getText().toString());
                    int hasil = ang1 / ang2;

                    angka2.setText("= " + hasil );

                }
            }
        });
    }


}
jika anda ingin mengcopy scrip kalkulator sederhana di atas, yaitu MainActivity untuk dimasukkan ke dalam project kalkulator anda, sebaiknya copy dari import android.support.v7.app.AppCompatActivity; sampai habis kebawah. karena paling atas kan package, tentu berbeda dong nama package setiap project masing-masing. Jadi silahkan perhatikan panduan copy yang saya sarankan.

Setelah selesai program membuat kalkulator diatas, saya coba testing android saya sebagai pengganti emulator (biar gak lama buildnya). Maka begini tampilan aplikasinya di android saya
hasil dari program android studio membuat aplikasi kalkulator sederhana
Gambar hasil kalkulator sederhana dari script kalkulato anakit

Oia, aplikasinya saya ganti iconnya dengan logo anakit, mau aplikasi mu ber-logo atau ber-icon pilhan atau gambar mu? Cek disini : Cara Mudah Ganti Icon Project di Android Studio

jadi akhir dari membuat kalkulator sederhana di android studio akan menghasilkan aplikasi kalkulator sederhana seperti gambar dibawah ini.

pengujian dari aplikasi kalkulator android studio
Gambar hasil dari membuat kalkulato sederhan di android studio


Demikianlah pembahasan bagaimana cara membuat aplikasi kalkulator sederhana di android studio, Eclipse atau script kalkulator sederhana android studio, semogar artikel ini bermanfaat dan berguna.



EmoticonEmoticon