- Sabtu, 17 Juni 2017

Tutorial Xamarin Android : Membuat Aplikasi Luas Segitiga

Selamat pagi pembaca blog xamarin indonesia, mohon maaf karena sabtu kemarin belum sempat menulis sebuah eksperimen ya hehe, baik pada kesempatan kali ini saya penasaran dengan aplikasi yang melibatkan operator aritmatika (+, - , x dan /) . Agar tidak terlalu membingungkan saya mencoba membuat aplikasi Luas Segitiga saja deh, hal ini mengingatkan saya saat belajar bahasa Java SE dahulu, latihan ini sungguh sangat berguna buat kita yang masih benar-benar belum paham dari mana mau memulai membuat program.

Dengan membuat aplikasi aritmatika yaitu luas segitiga, setidaknya kita akan belajar beberapa hal di xamarin android antara lain adalah sebagai berikut :

  1. Belajar membuat id dari setiap element outline pada file layout kita, misalkan inputan form untuk menginput alasnya, atau inputan tingginya yang menggunakan EditText yaitu Plain Text yang diberikan id = txtAlas atau txtTinggi. 
  2. Belajar bagaimana button yang di berikan id bisa bekerja dan memproses variable inputan
  3. Belajar bagaimana hasil dari perkalian / penjumlahan yang ditampilan pada TextView yang sudah diberikan id .
Step 1
Buatlah sebuah project / solution baru bernama LuasSegitiga.

Step 2
Sekarang buka file Main.axml ini kemudian ketika code sebagai berikut .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp">
    <TextView
        android:text="Aplikasi Luas Segitiga"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:gravity="center"
        android:layout_marginTop="14.0dp"
        android:layout_marginBottom="14.0dp" />
    <TextView
        android:text="Masukan Alas"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtAlas" />
    <TextView
        android:text="Masukan Tinggi"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtTinggi" />
    <Button
        android:text="Hitung"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnHitung" />
    <TextView
        android:text="Text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtHasil"
        android:textSize="30dp"
        android:layout_marginTop="22.5dp" />
</LinearLayout>


Desainnnya kurang lebih seperti ini .

Nah, bisa kita lihat kita memiliki Inputan Alas, Tinggi lalu Button Hitung dan sebuah Text View yang akan menampilkan hasilnya.

Step 3
Selanjutnya kita akan memodifikasi file MainActivity.cs nya , nah difile ini kita tentunya akan membuat variable yang akan menampung data inputan kemudian memprosesnya agar bisa menciptakan keluaran atau hasil yang tepat. Buka file MainActivity.cs lalu ketikan code sebagai berikut .

using Android.App;
using Android.Widget;
using Android.OS;

namespace LuasSegitiga
{
 [Activity(Label = "LuasSegitiga", MainLauncher = true)]
 public class MainActivity : Activity
 {
  

  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);
   EditText alas = FindViewById<EditText>(Resource.Id.txtAlas);
   EditText tinggi = FindViewById<EditText>(Resource.Id.txtTinggi);
   Button hitung = FindViewById<Button>(Resource.Id.btnHitung);
   TextView hasil = FindViewById<TextView>(Resource.Id.txtHasil);

   double a;
   double t;
   double h;


   hitung.Click += delegate {
    a = double.Parse(alas.Text);
    t = double.Parse(tinggi.Text);
    h = a * t * 0.5;
    hasil.Text = h.ToString();
   };
  }


 }
}

Penjelasan :

Terlebih dahulu kita membuat variable yang akan menampung data inputan / proses dari id setiap componen di file Main.axml, kemudian buat variable double a, t dan h , double adalah tipe data yang bisa menampung data bilangan bulat atau desimal. Kemudian pada proses hitungnya kita delegasikan agar h = a x t x 0.5 (luas segitiga) dan cetak hasilnya pada textview hasil.

Terimakasih


Ipung Purwono
https://www.facebook.com/ipungz.purwono