DROID DRAW

Pengantar DroidDraw

DroidDraw adalah tools desain aplikasi android yang bersifat free dan dapat di-download di http://www.droiddraw.org. Dengan tools ini, kita dapat dengan mudah mendesain tampilan android.

Tampilan awal DroidDraw

Berikut kita akan coba desain aplikasi menggunakan DroidDraw.

Aplikasi Converter

Pada bagian ini kita akan membuat aplikasi converter nilai mata uang dollar menjadi nilai mata uang rupiah, dimana kita akan mendesain dua buah inputan dan satu buah button untuk proses converter. Langkah-langkahnya adalah sebagai berikut.

Buka DroidDraw dan jadikan root layout adalah Relative Layout seperti gambar berikut ini.

Kemudian pilih Layouts Tab,

drag dan drop LinearLayout ke atas tengah layar sehingga menghasilkan gambar seperti berikut:

Double click LinearLayout dan jadikan nilai propertisnya menjadi width “200px” dan height “130px”, setelah itu click apply.

Pilih Tab Widget, Drag dan Drob 2 buah TextView dan 2 buah EditText serta 2 buah radio button sehingga menghasilkan seperti gambar berikut:

Tampilan Linear Layout

Drag dan Drop satu buah button dan penempatannya pada RelativeLatout sehingga menghasilkan seperti gambar berikut:

Double click TextView pertama dan jadikan textnya menjadi “Dollar” dalam tulisan bold begitu juga TextView kedua jadikan text-nya “Rupiah”. Jadikan properties EditText pertama menjadi id “@+id/dollars” dan text-nya kosong serta widthnya “100px”. Kemudian EditText kedua menjadi @+id/rupiah dan textnya kosong serta widthnya “100px”. Edit RadioButton pertama menjadi id @+id/rtod dan text-nya “Dollar to Rupiah” dan RadioButton kedua menjadi id @+id/rtod dan text-nya “Rupiah to Dollar”. Dan edit button  menjadi “@+id/convert” dan text-nya Conversi. Sehingga menghasilkan gambar seperti berikut:

Click tombol grate untuk mendapatkan layout tampilannya dalam coding xml, sehingga coding xml kita adalah seperti berikut: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+id/widget27" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" >  <LinearLayout android:id="@+id/widget28" android:layout_width="200px" android:layout_height="219px" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_centerVertical="true" android:layout_centerHorizontal="true" >  <TextView android:id="@+id/widget30" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Dollar" android:textStyle="bold" >  </TextView> <EditText android:id="@+id/dollar" android:layout_width="100px" android:layout_height="wrap_content" android:textSize="18sp" >  </EditText> <TextView android:id="@+id/widget32" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Rupiah" android:textStyle="bold" >  </TextView> <EditText android:id="@+id/rupiah" android:layout_width="100px" android:layout_height="wrap_content" android:textSize="18sp" >  </EditText> <RadioButton android:id="@+id/dtor" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Dollar to Rupiah" >  </RadioButton> <RadioButton android:id="@+id/rtod" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Rupiah to Dollar" >  </RadioButton> </LinearLayout>

<Button

android:id="@+id/convert"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Conversi"

android:layout_below="@+id/widget28"

android:layout_alignRight="@+id/widget28"

> 

</Button>

</RelativeLayout>

Buatlah project baru seperti ketentuan berikut:

Project Name                  : webkit2

            Build Target                     : Android 4.2.2

            Aplication name               : webkit2

Package name                : com.immobulus.webkit2

Activity                             : webkit2

Min SDK                          : 9

Buat main.xml dari project tersebut dengan isi dari file xml yang kita generate dari DroidDraw tersebut. Jadikan isi file conver.java menjadi seperti berikut:

conver.java

package com.immobulus.converter; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.RadioButton; import android.widget.TextView; public class converter extends Activity implements OnClickListener {        TextView dollars;        TextView rupiah;     RadioButton dtor;     RadioButton rtod;        Button convert;               /** Called when the activity is first created. */     @Override     public void onCreate(Bundle icicle) {         super.onCreate(icicle);         setContentView(R.layout.main);                 dollars = (TextView)this.findViewById(R.id.dollar);         rupiah = (TextView)this.findViewById(R.id.rupiah);                 dtor = (RadioButton)this.findViewById(R.id.dtor);         dtor.setChecked(true);         rtod = (RadioButton)this.findViewById(R.id.rtod);                 convert = (Button)this.findViewById(R.id.convert);         convert.setOnClickListener(this);     }        public void onClick(View v) {               if (dtor.isChecked()) {                      convertDollarsToRupiah();               }               if (rtod.isChecked()) {                      convertRupiahToDollars();               }        }               protected void convertDollarsToRupiah() {               double val = Double.parseDouble(dollars.getText().toString());               // in a real app, we'd get this off the 'net               rupiah.setText(Double.toString(val*9000));        }               protected void convertRupiahToDollars() {               double val = Double.parseDouble(rupiah.getText().toString());               // in a real app, we'd get this off the 'net               dollars.setText(Double.toString(val/9000));        } } Jalankan project dan masukkan nilai di isian dollars dan click conversi sehingga akan menghasilkan seperti gambar berikut:

Sumber: PEMROGRAMAN APLIKASI MOBILE SMARTPHONE DAN TABLET PC BERBASIS ANDROID. oleh : Nazruddin Safaat H