Monday, March 7, 2016

Cara Membuat Kalkulator Sederhana Android

Nama / NIM : I Gusti Ngurah Made Ardika / 1404505096
Jurusan / Fakultas / Perguruan Tinggi : Teknologi Informasi / Teknik / Universitas Udayana
Mata Kuliah : Manajemen Jaringan Dan Server

Dosen : I Putu Agus Eka Pratama, ST., MT.

Untuk langkah-langkah desain user interface-nya adalah sebagai berikut :
  1. Buka file layout pada contoh ini activity_main.xml yang ada di folder layout (seperti gambar dibawah ini yang ditunjukkan dengan angka 1).
  2. Untuk menambahkan komponen GUI android, anda bisa memilih salah satu komponen yang di palette (seperti gambar dibawah ini yang ditunjukkan dengan angka 5). Tinggal klik komponen tersebut dan drag ke dalam layar monitor android (seperti gambar dibawah ini yang ditunjukkan dengan angka 4).
  3. Setiap komponen GUI mempunyai id yang ditunjukkan pada window outline (seperti gambar dibawah ini yang ditunjukkan dengan angka 2), dimana id ini berguna pada pemrograman java-nya.
  4. Kemudian kita bisa mengatur lebar maupun tinggi komponen dengan mengatur properti dari komponen tersebut yang terletak di window properties (seperti gambar dibawah ini yang ditunjukkan dengan angka 3).
    android, android tutorial, mulyono, pemrograman, tutorial android, import, import android projek, kalkulator android
    Android Tutorial membuat kalkulator sederhana
  5. Dalam penambahan komponen GUI pada android, urutan cara menambahkan secara detail seperti gambar dibawah mulai dari 1 – 3. Ini merupakan cara penambahan komponen dengan Gaphical layout yang memudahkan programmer.
  6. Cara lain adalah dengan menuliskan xml code secara langsung pada jika kita sudah familiar dengan source code android. Kita bisa menampilkan source code xml nya dengan mengklik nama file yang berekstensi xml (dalam contoh ini activity_main.xml seperti pada gambar dibawah ini yang ditandai no 4).
    android, android tutorial, mulyono, pemrograman, tutorial android, import, import android projek, kalkulator android
    Android Tutorial membuat kalkulator sederhana
    Untuk tutorial ini source code untuk xml nya adalah sebagai berikut ini :
    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
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        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=".MainActivity" >
        <EditText
            android:id="@+id/angka_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="numberDecimal"
        />
        <EditText
            android:id="@+id/angka_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="numberDecimal"
            />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
            <Button
                android:id="@+id/tombol_plus"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:text="@string/tombol_plus" />
            <Button
                android:id="@+id/tombol_min"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/tombol_plus"
                android:text="@string/tombol_min" />
            <Button
                android:id="@+id/tombol_x"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/tombol_min"
                android:text="@string/tombol_x" />
            <Button
                android:id="@+id/tombol_bagi"
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/tombol_x"
                android:text="@string/tombol_bagi" />
        </RelativeLayout>
        <EditText
            android:id="@+id/text_hasil"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="text"
            android:enabled="false"
            >
        </EditText>
        <TextView
            android:id="@+id/text_histori"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/histori" />
        <ListView
            android:id="@+id/list_histori"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             >
        </ListView>
    </LinearLayout>


    Coding Logika
Setelah kita mendesain User Interface aplikasi, maka langkah selanjutnya adalah membuat program java-nya agar aplikasinya bisa berjalan. Untuk langkah-langkah pembuatan coding java-nya adalah seperti berikut ini :
  1. Deklarasikan dulu semua variabel yang akan digunakan baik variabel untuk logika juga variabel untuk GUI-nya. Untuk tipe data variabel GUI-nya sesuaikan dengan desain yang telah kita buat. Misalnya jika komponennya berupa Button maka type datanya adalah Button. Untuk contoh ini, variabel-variabel yang dibutuhkan adalah seperti berikut ini:
    1
    2
    3
    4
    5
    protected float angka1, angka2, angkahasil;
    EditText tek_1, tek_2, tek_hasil;
    private ArrayList<String> isi_histori = new ArrayList<String>();
    ListView histori;
  2. Setelah variabel dideklarasikan, langkah selanjutnya adalah mencocokan variabel untuk GUI dengan id pada masing-masing komponen GUI yang telah didesain.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    tek_1 = (EditText) findViewById(R.id.angka_1);
    tek_2 = (EditText) findViewById(R.id.angka_2);
    tek_hasil = (EditText) findViewById(R.id.text_hasil);
    histori = (ListView) findViewById(R.id.list_histori);
    Button tambah = (Button) findViewById(R.id.tombol_plus);
    Button kurang = (Button) findViewById(R.id.tombol_min);
    Button kali = (Button) findViewById(R.id.tombol_x);
    Button bagi = (Button) findViewById(R.id.tombol_bagi);
  3. Kemudian langkah selanjutnya adalah meneruskan coding logika aplikasi-nya sesuai logika kita. Untuk contoh ini, source code java-nya adalah seperti berikut :





package com.mulyono.pertemuanii;
import java.util.ArrayList;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity implements OnClickListener {
    protected float angka1, angka2, angkahasil;
    EditText tek_1, tek_2, tek_hasil;
    private ArrayList<String> isi_histori = new ArrayList<String>();
    ListView histori;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tek_1 = (EditText) findViewById(R.id.angka_1);
        tek_2 = (EditText) findViewById(R.id.angka_2);
        tek_hasil = (EditText) findViewById(R.id.text_hasil);
        histori = (ListView) findViewById(R.id.list_histori);
        Button tambah = (Button) findViewById(R.id.tombol_plus);
        Button kurang = (Button) findViewById(R.id.tombol_min);
        Button kali = (Button) findViewById(R.id.tombol_x);
        Button bagi = (Button) findViewById(R.id.tombol_bagi);
        tambah.setOnClickListener(this);
        kurang.setOnClickListener(this);
        kali.setOnClickListener(this);
        bagi.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        angka1 = Float.parseFloat( tek_1.getText().toString());
        angka2 = Float.parseFloat( tek_2.getText().toString());
        switch (v.getId()) {
        case R.id.tombol_plus:
            angkahasil = angka1 + angka2;
            tek_hasil.setText(Float.toString(angkahasil));
            this.tampilkan_histori(angka1 + " + " + angka2 + " = " + angkahasil);
            break;
        case R.id.tombol_min:
            angkahasil = angka1 - angka2;
            tek_hasil.setText(Float.toString(angkahasil));
            this.tampilkan_histori(angka1 + " - " + angka2 + " = " + angkahasil);
            break;
        case R.id.tombol_x:
            angkahasil = angka1 * angka2;
            tek_hasil.setText(Float.toString(angkahasil));
            this.tampilkan_histori(angka1 + " x + " + angka2 + " = " + angkahasil);
            break;
        case R.id.tombol_bagi:
            angkahasil = angka1 / angka2;
            tek_hasil.setText(Float.toString(angkahasil));
            this.tampilkan_histori(angka1 + " : " + angka2 + " = " + angkahasil);
            break;
        default:
            break;
        }
    }
    private void tampilkan_histori(String tambahan){
        isi_histori.add(tambahan);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, isi_histori);
        histori.setAdapter(adapter);

    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}
  1. Jika sudah selesai codingnya, aplikasi siap dijalankan dan berikut tampilannya.
    android, android tutorial, mulyono, pemrograman, tutorial android, import, import android projek, kalkulator android
    Android Tutorial membuat kalkulator sederhana

BERKOMENTARLAH YANG SANTUN, JANGAN SPAM, AYO BERKOMENTARLAH DISINI. . .

Ditulis Oleh : I Gusti Ngurah Made Ardika ~ Mari Berbagi dan Belajar Bersama

Artikel Cara Membuat Kalkulator Sederhana Android ini diposting oleh I Gusti Ngurah Made Ardika pada hari Monday, March 7, 2016. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

0 komentar:

Post a Comment

Mari kita saling berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada sobat yang lain agar lebih bermanfaat. Terima kasih, Salam Blogger . . .