Senin, 18 Januari 2016

Membuat Project Aplikasi Kalkulator Sederhana pada Android Bagian 1



Layout antarmuka pada aplikasi android dibuat menggunakan bahasa pemrograman XML. Perhatikan activity_main.xml, sebagai komponen induk (root), LinearLayout memiliki parameter layout_width = match_parent dan layout_height = match_parent. Akibatnya, tampilan aplikasi ini melebar penuh ke samping kanan serta melebar penuh ke bawah (fullscreen). Berbeda dengan induknya, LinearLayout yang terdapat pada baris berkedudukan sebagai anak yang memiliki parameter layout_width = mathc_parent dan layout_height = wrap_content. Parameter match_parent yang terdapat pada anak mengindiksaikan bahwa kompinen ini lebarnya menyesuaikan dengan komponen induk atau identik terhadap komponen induknya. Sedangkan wrap_content artinya ukuran tinggi LinearLayout menyesuaikan tinggi komponen didalamnya. LinearLayout ini mempunyai dua komponen lagi yang berkedudukan sebagai anak, yaitu TextView dan EditText. Pada komponen EditText, terdapat parameter ID dan inputType. Parameter ID digunakan sebagai identitas pengenal komponen yang akan dipanggil dari java. InputType pada EditText merupakan variasi keyboard yang akana muncul ketika user akan memasukkan angka. Input Type nmber artinya saat user mengklik widget ini maka keyboard yang muncul adalah deretan number.

MainActivity.java
Objek seperti button dan EditText dideklarasikan pada bagial awal kelas. Setiap activity pasti memiliki metode onCreate(). Metode ini dieksekuis ertama kali oleh sistem ketika aplikasi berjalan. Setiap ctivity juga memiliki pasangan berupa layout. Biasanya, metode onCreate() digunakan untuk melakukan pengenalan komponen-komponen atau widge apa saja yang terdapat pada layout pasangannya.
Widget-widget yang memiliki ID pada activity_main.xml dipanggil serta dipasangkan dengan objek Button dan EditText.
Baris 30-33 menunjukkan setiap Button diaktifkan menggunakan metode setOnClick. Metode onClick() bertugas menangani proses apabila button diklik. Karena menggunakan empat button (+,-,:,x), maka didalam metode onClick() kita tamahkan fungsi switch-case untuk membedakan button mana yang diklik. Misalnya button “+”, apabila diklik akan menjalankan perintah-perintah pada baris 48-55. Proses sederhananya adalah mengambil teks angka 1 dan angka 2 yang dimasukkan user, kemudian masing-masing teks dipindahkan ke variabel string varangka1 dan varangka2. Kedua vairabel string ini dikirim ke metode penjumlahan() untuk dikonversi menjadi tipe data double. Operasi aritmetika tidak dapat dilakukan pada tipe data string. Selesai dikonversi, kedua variabel dijumlahkan kemudian hasilnya dikonversi lagi menjadi string. Hasil yang sudah dikonversi kemudian dikembalikan ke pemanggilnya untuk ditampilkan pada EditText out. Fungsi pada button lain identik dengan fungsi pada button “+”.

Buatlah project baru, File > New > Android Application Project. Isilah field yang tersedia, lalu klik Next berulang-ulang hingga selesai, kemudian klik Finish.


 

Pada activity_main.xml, ubahlah RelativeLayout menjadi LinearLayout dengan cara klik kanan > change layout > linearLayout (vertical) > OK. Kemudian tambahkan empat LinearLayout ke dalam outline.

Secara drag and drop, tambahkan LinearLayout, widget Button, EditText, dan TextView pada activity_main.xml.


Editlah setiap widget pada layout dengan menambahkan teks dan ID. Parameter setiap widget/komponen bisa dilihat di source code.
<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="com.kalkulator.app.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="angka 1" />

        <EditText
            android:id="@+id/idSatu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:inputType="number" >

            <requestFocus />
        </EditText>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="angka 2" />
       
         <EditText
            android:id="@+id/idDua"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal" >
       
        <Button
            android:id="@+id/idBtnJumlah"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+" />

        <Button
            android:id="@+id/idBtnKurang"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-" />

        <Button
            android:id="@+id/idBtnBagi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=":" />

        <Button
            android:id="@+id/idBtnKali"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="x" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hasil" />
       
        <EditText
            android:id="@+id/idHasil"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number" />

    </LinearLayout>

</LinearLayout>

Tidak ada komentar:

Posting Komentar