Membuat Aplikasi Android Sederhana

Jumpa lagi kawan...

Kali ini kita akan membuat aplikasi sederhana menghitung luas dan keliling bangun datar. Berikut output aplikasi yang akan kita buat.

Sebelum melangkah lebih jauh, kita harus mengerti dulu apa itu Dialog. Dialog merupakan sebuah jendela kecil yang meminta pengguna untuk membuat keputusan atau memasukkan informasi tambahan (biasanya dialog ini disebut JOptionPane di Java dan MessageBox di VB). Dengan kita menggunakan dialog maka aplikasi yang kita buat akan lebih interaktif. Dialog ini hampir sama fungsinya dengan Toast namun dialog dapat memiliki beberapa pilihan keputusan ataupun inputan pengguna.

Dalam Dialog terdapat 3 buah model untuk menampilkan List, antaralain :

1. A traditional single-choice list : memilih sebuah pilihan sederhana


2. A persistent single-choice list (radio buttons) : memilih sebuah pilihan dengan radio button


3. A persistent multiple-choice list (checkboxes) : memilih beberapa pilihan dengan ChekBox

Tapi kali  ini kita hanya membahas single-choice list dialog dan custom dialog. Untuk membuat  single-choice list dialog kita akan memanggil method setItems() dan untuk custom dialog menggunakan setView().

Untuk membuat sebuah dialog kita harus mendeklarasikan class AlertDialog. Class ini memungkinkan kita untuk membangun berbagai desain dialog. Seperti ditunjukkan pada gambar dibawah , ada tiga wilayah dialog peringatan:

 

Title : Ini adalah opsional dan harus digunakan hanya ketika area konten ditempati oleh pesan rinci, daftar, atau tata letak kustom.

Content Area : Menampilkan pesan, list, maupun custom layout.

Action Buttons : Melakukan aksi/event.

Untuk membuat Action button, ada 3 buah method, antara lain :

• setPositiveButton() : digunakan untuk menyetujui dan melanjutkan aksi berikutnya.


• setNegativeButton() : digunakan untuk membatalkan aksi.
  


• setNeutralButton() : digunakan ketika pengguna mungkin tidak ingin melanjutkan dengan tindakan, tetapi tidak selalu ingin membatalkan. Biasanya terletak antara tombol positif dan negatif.

 

Langkah langkah pembuatan aplikasi :

1. Buka Eclipse dan buat sebuah project baru.


2. Buka folder res -> layout -> buka activity_main.xml, disini kita akan mendesain aplikasi yang akan kita buat.
   


3. Tambahkan sebuah Button. Caranya ketikkan source berikut pada activity_main.xml.
   [sourcecode language="xml"]
   <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"
   tools:context=".HitungBangun" >
   
   <Button
   android:id="@+id/btnBangunDatar"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentLeft="true"
   android:layout_alignParentTop="true"
   android:text="Bangun Datar"
   tools:ignore="HardcodedText" />
   
   </RelativeLayout>
   [/sourcecode]


4. Buka MainActivity.java pada folder src dan ketikkan source berikut pada class tersebut.
   [sourcecode language="java"]
   Button buttonBangunDatar;
   CharSequence jenisBangunDatar[]={"Segitiga","Persegi"};
   Context context=this;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   
   buttonBangunDatar=(Button)findViewById(R.id.btnBangunDatar);
   
   buttonBangunDatar.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View arg0) {
   // TODO Auto-generated method stub
   dialogBangunDatar();
   }
   });
   }
   [/sourcecode]
   

   dialogBangunDatar() merupakan sebuah method yang menampung sebuah AlertDialog yang menampilkan pilihan persegi atau segitiga.

   
   

   Berikut isi dari method dialogBangunDatar(). Untuk source yang diberi warna kuning kosongi terlebih dahulu.

   
   

   

   
   


5. Ketika kita memilih Persegi atau Segitiga maka akan muncul sebuah AlertDialog dimana kita harus memberikan sebuah inputan untuk melakukan perhitungan. Sebenarnya AlertDialog ini adalah sebuah Custom Dialog dimana kita harus terlebih dahulu membuat layout baru untuk menempatkannya pada AlertDialog tersebut. Berhubung disini ada 2 pilihan yaitu Persegi dan Segitiga, maka kita harus membuat 2 layout baru. Caranya pilih folder res -> layout. Klik kanan folder layout -> New Android XML File.
   
   

   Kemudian akan muncul form berikut. Isikan sesuai gambar dibawah.

   
   

   Layout untuk Persegi

   
   
   

   Layout untuk Segitiga

   
   
   

   Klik Finish.

   
   

   Buka layout_persegi.xml dan tambahkan kode berikut.

   
   
   [sourcecode language="xml"]
   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout 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:orientation="vertical" >
   
   <EditText
   android:id="@+id/txtSisi"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:ems="10"
   android:hint="Sisi"
   android:inputType="numberDecimal"
   tools:ignore="HardcodedText" >
   
   <requestFocus />
   </EditText>
   
   </LinearLayout>
   [/sourcecode]
   

   Untuk layout_segitiga.xml tambahkan kode berikut.

   
   
   [sourcecode language="xml"]
   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout 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:orientation="vertical" >
   
   <EditText
   android:id="@+id/txtAlas"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:ems="10"
   android:hint="Alas"
   android:inputType="numberDecimal"
   tools:ignore="HardcodedText" >
   
   <requestFocus />
   </EditText>
   
   <EditText
   android:id="@+id/txtTinggi"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:ems="10"
   android:hint="Tinggi"
   android:inputType="numberDecimal"
   tools:ignore="HardcodedText" />
   
   </LinearLayout>
   [/sourcecode]


6. Selanjutnya Buat sebuah class baru untuk menampung aksi-aksi dari dialog yang telah kita buat. Dalam hal ini kita berinama Rumus.java.
   

   Method untuk perhitungan Persegi.

   
   
   [sourcecode language="java"]
   public static void hitungSegitiga(final Context context, LayoutInflater inflater){
   
   AlertDialog.Builder builder=new AlertDialog.Builder(context);
   
   final View viewSegitiga=inflater.inflate(R.layout.layout_segitiga, null);
   
   builder.setTitle("Segitiga");
   builder.setView(viewSegitiga);
   
   builder.setPositiveButton("Luas", new DialogInterface.OnClickListener() {
   
   @Override
   public void onClick(DialogInterface dialog, int which) {
   // TODO Auto-generated method stub
   EditText alas=(EditText)viewSegitiga.findViewById(R.id.txtAlas);
   EditText tinggi=(EditText)viewSegitiga.findViewById(R.id.txtTinggi);
   
   double a=Double.parseDouble(alas.getText().toString());
   double t=Double.parseDouble(tinggi.getText().toString());
   
   double luas=a*t/2;
   
   Rumus.hasil("Luas", luas, context);
   }
   });
   
   builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
   
   @Override
   public void onClick(DialogInterface arg0, int arg1) {
   // TODO Auto-generated method stub
   arg0.cancel();
   }
   });
   
   AlertDialog alertDialog=builder.create();
   alertDialog.show();
   }
   [/sourcecode]
   

   Method untuk perhitungan Segitiga

   
   
   [sourcecode language="java"]
   public static void hitungPersegi(final Context context, LayoutInflater inflater){
   
   AlertDialog.Builder builder=new AlertDialog.Builder(context);
   
   final View viewPersegi=inflater.inflate(R.layout.layout_persegi, null);
   
   builder.setTitle("Persegi");
   builder.setView(viewPersegi);
   builder.setPositiveButton("Luas", new DialogInterface.OnClickListener() {
   
   @Override
   public void onClick(DialogInterface arg0, int arg1) {
   // TODO Auto-generated method stub
   EditText sisi=(EditText)viewPersegi.findViewById(R.id.txtSisi);
   
   double s=Double.parseDouble(sisi.getText().toString());
   
   double luas=s*s;
   Rumus.hasil("Luas Persegi", luas, context);
   }
   });
   
   builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
   
   @Override
   public void onClick(DialogInterface arg0, int arg1) {
   // TODO Auto-generated method stub
   arg0.cancel();
   }
   });
   
   builder.setNeutralButton("Keliling", new DialogInterface.OnClickListener() {
   
   @Override
   public void onClick(DialogInterface arg0, int arg1) {
   // TODO Auto-generated method stub
   EditText sisi=(EditText)viewPersegi.findViewById(R.id.txtSisi);
   
   double s=Double.parseDouble(sisi.getText().toString());
   
   double keliling=s*4;
   Rumus.hasil("Keliling Persegi", keliling, context);
   }
   });
   
   AlertDialog alertDialog=builder.create();
   alertDialog.show();
   }
   [/sourcecode]
   

   Sekarang pada MainActivity.java tambahkan kode berwarna kuning tersebut pada method onClick().

   
   
   

   Method untuk menampilkan hasil perhitungan.

   
   
   [sourcecode language="java"]
   public static void hasil(String title,double hasil,Context context){
   AlertDialog.Builder builder=new AlertDialog.Builder(context);
   builder.setTitle(title);
   builder.setMessage(hasil+"");
   builder.setNeutralButton("Oke", new DialogInterface.OnClickListener() {
   
   @Override
   public void onClick(DialogInterface dialog, int which) {
   // TODO Auto-generated method stub
   dialog.cancel();
   }
   }).create().show();
   }
   [/sourcecode]

download project latihannya disini.

Sayounara...