Langsung ke konten utama

Cara Membuat Aplikasi Kalkulator Sederhana

Hal pertama yang dilakukan untuk membuat aplikasi kalkuator sederhana adalah membuka Android Studio.
Setelah itu klik start a new Android Studio Project untuk membuat project baru.
Pada Application Name, isi nama aplikasi sesuai yang kalian inginkan.Untuk company domain, jika kalian memiliki domain website sendiri, bisa diisi dengan domain websitenya atau bisa hanya menggunakan default yang sudah ada yaitu example.com. Setelah itu klik Next.
Pada tampilan Target android Devices,untuk phone dan tablet kita memilih API 15: Android 4.0.3(Ice Cream Sandwich). Tujuan memilih API 15: Android 4.0.3(Ice Cream Sandwich) adalah agar aplikasi dapat dijalankan di hampir  semua perangkat android. Setelah itu klik Next.
Setelah mengkonfigurasi target pengguna aplikasi kita,selanjutnya kita akan memilih jenis activity yang akan kita gunakan,disini kita pilih Empty Activity.Setelah itu klik Next.
Pada tampilan configure activity kita dapat membiri nama activity sesuai dengan yang diinginkan, disini kita memberi nama activity dengan defaultnya yaitu MainActivity. Selanjutnya klik Finish, tunggu sampai proses build gradle selesai.

Setelah proses build gradle selesai,langkah selanjutnya kita akan membuat widget. Untuk membuat widget aplikasi  kalkulator sederhana yang kita butuhkan yaitu 2 plainText, 4 button (tambah,kurang,kali,bagi) dan 1 TextView untuk memunculkan hasil. Untuk membuat widget bisa dilakukan dengan menyeret(drag) widget icon disamping dan diletakkan di preview gadget. Untuk memudahkannya, bisa langsung copy code di bawah ini dan paste kan pada bagian text activity_main.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:paddingBottom="16dp"    android:paddingLeft="16dp"    android:paddingRight="16dp"    android:paddingTop="16dp"    android:background="#ffffff"    tools:context="com.bmpnj.ferawidyawatibm_calculator.MainActivity">
    <EditText        android:id="@+id/angka1"        android:gravity="center_horizontal"        android:hint="Masukkan Angka Pertama"        android:layout_width="match_parent"        android:layout_height="wrap_content" />
    <EditText        android:id="@+id/angka2"        android:gravity="center_horizontal"        android:hint="Masukkan Angka Kedua"        android:layout_width="match_parent"        android:layout_height="wrap_content" />
    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#ffb5b5"        android:id="@+id/labeljawaban"        android:textSize="24sp"/>
    <Button        android:id="@+id/btnMul"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="*"/>
    <Button        android:id="@+id/btnDiv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="/" />
    <Button        android:id="@+id/btnAdd"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="+"/>
    <Button        android:id="@+id/btnSub"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="-"/>
</LinearLayout>

*Pada bagian code yang diberi background pink, di ganti sesuai dengan company name, dan application name yang kalian buat. 
Selanjutnya copy paste kan kode di bawah ini di  MainActivity. java.
package com.bmpnj.ferawidyawatibm_calculator;
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 {
    Button btnAdd, btnSub, btnMul, btnDiv;
    EditText angkaSatu, angkaDua;
    TextView hasil;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        angkaSatu=(EditText)findViewById(R.id.angka1);
        angkaDua= (EditText)findViewById(R.id.angka2);
        hasil = (TextView)findViewById(R.id.labeljawaban);
        btnAdd=(Button)findViewById(R.id.btnAdd);
        btnSub=(Button)findViewById(R.id.btnSub);
        btnMul=(Button)findViewById(R.id.btnMul);
        btnDiv=(Button)findViewById(R.id.btnDiv);
        btnMul.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                hasil.setText(String.valueOf(Integer.valueOf(angkaSatu.getText().toString())*Integer.valueOf(angkaDua.getText().toString())));
            }
        });
        btnSub.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                hasil.setText(String.valueOf(Integer.valueOf(angkaSatu.getText().toString())-Integer.valueOf(angkaDua.getText().toString())));
            }
        });
        btnAdd.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                hasil.setText(String.valueOf(Integer.valueOf(angkaSatu.getText().toString())+ Integer.valueOf(angkaDua.getText().toString())));
            }
        });
        btnDiv.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                hasil.setText(String.valueOf(Integer.valueOf(angkaSatu.getText().toString())/Integer.valueOf(angkaDua.getText().toString())));
            }
        });

        btnMul.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                hasil.setText(String.valueOf(Integer.valueOf(angkaSatu.getText().toString())*Integer.valueOf(angkaDua.getText().toString())));
            }
        });
    }
}
*Pada bagian code yang diberi background pink, di ganti sesuai dengan company name, dan application name yang kalian buat.
Kalian juga dapat mengubah warna aplikasi yang kalian buat sesuai dengan keinginan kalian, caranya pada project klik app-->res-->values-->styles.html ubah code di bawah yang diberi background pink dengan kode warna yang kalian inginkan.
<resources>
    <!-- Base application theme. -->    <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->        <item name="colorPrimary">#ec4261</item>
        <item name="colorPrimaryDark">#ff90a3</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>
Pada Application Name, Selain itu kalian juga bisa mengubah icon aplikasi pada saat di run dihp,caranya copy paste gambar icon yang kalian mau jadikan icon aplikasi kalian(file gambarnya .png) ke folder yang diberi kotak  pink di bawah ini
Setelah itu buka  AndroidManifest.xml


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

    <application        android:allowBackup="true"        android:icon="@mipmap/calculator"        android:label="Calculator"        android:roundIcon="@mipmap/calculator_round"        android:supportsRtl="true"        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

*Pada Kode AndroidManifest.xml yang diberi background warna pink, ubah sesuai dengan nama icon yang kalian copy paste tadi.
Setelah itu klik run project yang sudah selesai dibuat dengan cara klik gambar di bawah ini:

Selanjutnya akan muncul tampilan seperti berikut ini:
Aplikasi dapat dijalankan dengan emulator atau dapat dijalankan di Handphone. 




Tampilan di atas merupakan tampilan aplikasi yang di run menggunakan emulator Nexus 5 API28.
Berikut ini adalah langkah- langkah untuk menjalankan Aplikasi di Handphone Android.Agar perangkat dapat menjalankan aplikasi dari Android Studio, perlu membuka Developer Mode dulu atau Mode Pengembang.
1.Buka Settings (Pengaturan)

2.Selanjutnya klik Setelan Tambahan, lalu pilih Opsi Pengembang
3.Selanjutnya aktifkan opsi pengembang
4.Cari USB debugging, kemudian aktifkan.
Pengaturan pada Handphone sudah selesai, selanjutnya hubungkan handphone dan Laptop menggunakan kabel USB.
Berikut ini tampilan aplikasi Calculator Sederhana pada saat di run di handphone :
tampilan di atas merupakan tampilan icon aplikasi kalkulator sederhana yang telah terinstall di handphone.


Komentar