Create UI (User Interface) using DroidDraw
Setelah tahu tentang sejarah dan basic foundationnya Android, sekarang kita akan mencoba untuk bermain - main dengan User Interface (UI). Kita buat contoh yang sederhana dulu, yaitu cara menampilkan macam - macam basic widget yang tersedia di Android.
Ada 2 cara untuk menampilkan widget, yaitu anda bisa langsung mendefinisikannya di file XML yang terletak di res / folder layout, atau untuk para pemula Android menyediakan media yang memudahkan dalam design UI (User Interface) Android. Media ini bernama DroidDraw yang bisa anda dapatkan di http://www.droiddraw.org/ .DroidDraw ini juga tersedia untuk Linux, Ubuntu, dan Mac
Perhatikan gambar diatas, disisi kiri kita dapat melihat sebuah persegi panjang seperti phone screen. Disini adalah tempat dimana kita akan "menggambar " user interface. Diatas screen tersebut, terdapat 2 nilai :
1. Root Layout
Disini kita dapat mengatur bentuk layout yang kita inginkan. Anda Linear Layout, Absolute Layout, Relative Layout, Table Layout dan Scroll View
2. Screen Size
Disini kita dapat memilih ukuran screen atau layar yang kita inginkan, seolah - olah ada banyak jenis ponsel dengan ukuran yang berbeda.
Disisi kanan, ada berbagai jenis tab seperti :
- Widget
- Layouts
- Properties
- Strings
- Colors
- Arrays
- Support
1. Widget Tag
Di tab ini kita akan menemukan sebagian besar dari basic widget yang dapat digunakan dalam pembuatan aplikasi seperti Text View, Edit Text, Button, Radio Button, CheckBox, dll.
Untuk menggunakannya, cukup drag salah satu widget kemudian drop ke sisi kiri layar. Widget ini akan ditempatkan sesuai dengan "Root Layout" yang kita gunakan. Sebagai contoh, jika kita menggunakan "Linear Layout" maka semua widget akan ditempatkan di sisi atas layar. Disisi lain, jika kita menggunakan "Relative Layout" kita bisa bebas menempatkan widget dimanapun yang inginkan.
2. Layout Tag
Tag ini sederhana. Kita memiliki layouts (container) dan kita dapat menempatkannya di dalam layar. Dengan cara ini Layout juga dapat menyimpan Layout lain di dalamnya sehingga kita dapat membuat struktur yang lebih kompleks
3. Properties Tag
Ketika kita drag widget ke layar, maka secara otomatis properties akan terisi dengan properti widget tadi. Disini kita dapat melihat dan mengedit parameter disetiap widget. Yang lebih intuitif, kita hanya perlu mengubah nilai - nilai dalam inputBox. Anda bisa bermain - main dengan nilai yang ada di properties ini untuk mengatur widget di layar. Jika inging melihat hasilnya anda cukup menekan tombol Apply
4. String Tag
Dalam tag ini kita dapat menambahkan String dalam user interface yang kita buat
Disisi
kanan bawah, kita dapat melihat kotak output. Disini kita dapat
menghasilkan kode yang setara dengan kode XML dengan cara men-generate
nya (klik Generate di toolbar kiri atas)
Jadi dengan
DroidDraw anda cukup drag and drop widget ke layar dan
kemudian bisa di generate (klik Generate di toolbar kiri atas) maka di
kotak output akan menghasilkan kode yang setara dengan file.xml .
Kemudian copy kode hasil generate ke file.xml. Nama default file xml
ini adalah main.xml, namun anda bisa mengubahnya sesuai dengan nama
aplikasi yang anda buat. Misalnya kita beri nama widget.xml
widget.xml
|
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >
<Button android:id="@+id/btnSave" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Save" />
<ImageButton android:id="@+id/btnImg1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/icon" />
<Button android:id="@+id/btnOpen" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Open" />
<ToggleButton android:id="@+id/toggle1" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout> |
Kode diatas selama runtime akan me-load user interface XML dalam onCreate() event handler di kelas Activity, dengan menggunakan method setContentView()
|
package android.LinearLayout; import android.app.Activity; import
android.os.Bundle; public class LinearLayout extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.widget); } } |
Setelah di Run, hasilnya akan tampak seperti screenshot dibawah ini
Nah, sangat mudah sekali bukan cara menampilkan basic widget Android dengan menggunakan DroidDraw..
*Selamat mencoba*
_netoya_
Posted at 09:38AM Apr 22, 2010 by nety ozora in General | Comments[0]