Create UI using XML : Basic View
Android User Interface dibagi menjadi Views dan ViewGroups. Views
adalah sebuah widget yang bisa ditampilan di layar. Contoh widget ini
adalah button, label, kotak teks, dll. Sedangkan ViewGroup adalah
sebuah Layout untuk mengatur tata letak View. Untuk implementasi View dan layout ini ada 2 cara, yaitu dengan drag and drop widget menggunakan DroidDraw kemudian di generate menjadi file.xml (url blog sebelumnya) atau dengan cara langsung mendefinisikan nama - nama widget yang akan digunakan dalam file main.xml. Nah, pembuatan aplikasi sederhana kita selanjutnya akan langsung menggunakan file dalam main.xml
VIEWS
View adalah single object
atau object tunggal dalam user interface. View ini ditempatkan di
dalam Layout untuk membuat aplikasi Android dari yang paling
sederhana sampai aplikasi yang paling kompleks. Ada
berbagai macam common Views yang digunakan dalam pembangunan
Android. Berikut ini yang termasuk kategori View :
Basic View
List View
ProgressBar View
Picker View
Analog Clock and Digital Clock View
Display Image View
Menu and Dialog
Basic View
Di bagian ini, kita akan
mempelajari Basic Views di Android yang memungkinkan Anda untuk
menampilkan informasi teks serta melakukan beberapa pilihan dasar.
Secara khusus, Anda akan belajar tentang macam ? macam View
berikut:
TextView
AutoCompleteTextView
Edit Text
Button
ImageButton
CheckBox
Tooggle Button
RadioButton
1. Text View
Bila Anda membuat sebuah proyek Android baru, Eclipse selalu membuat
file main.xml (terletak di res / folder layout) yang mengandung unsur
<TextView>
<?xml version="1.0" encoding="utf-8"?> |
TextView digunakan untuk
menampilkan teks ke pengguna. Ini adalah View yang paling dasar yang
pasti ada di saat anda mengembangkan aplikasi Android. Jika anda
ingin mengedit teks yang ditampilkan, anda harus menggunakan subclass
dari TextView yaitu EditText, yang dibahas dalam bagian berikutnya.
2. AutoCompleteTextView
AutoCompleteTextView mirip dengan
EditText (karena sebenarnya AutoCompleteTextView subclass dari
EditText). Perbedaannya adalah AutoCompleteText bisa menunjukkan
list yang tersedia secara otomatis ketika pengguna sedang mengetik.
Buat autotext.xml di res / layout dengan widget AutoCompleteTextView
|
<?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" > <AutoCompleteTextView android:id="@+id/txtprogkeahlian" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> |
Buat
kelas java baru di folder src dengan nama CompleteText, dan buat kode
seperti dibawah ini
|
package android.text; import android.app.Activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView;
public class CompleteText extends Activity { String[] programKeahlian = { "Rekayasa Perangkat Lunak", "Teknik Komputer Jaringan", "Multimedia", "Teknik Elektro", "Teknik Pembangkit Listrik", "Otomotif Sepeda Motor", "Otomotif Mobil", "Teknik Las", "Teknik Permesinan", "Manajemen Niaga", "Tata Busana", "Tata Boga", "Perhotelan" };
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.autotext);
// mengambil list item dari programKeahlian ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, programKeahlian);
AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.txtprogkeahlian); textView.setThreshold(3); textView.setAdapter(adapter); } } |
Perhatikan bahwa list itemnya diperoleh dari obyek ArrayAdapter. Method setThreshold () menentukan jumlah jumlah minimum karakter pengguna harus mengetik sebelum saran item muncul sebagai menu drop-down.
Tambahkan sebuah kode di kelas Activity untuk memanggil kelas CompleteText tadi
|
package android.text; import android.app.Activity; import android.content.Intent; import android.os.Bundle; public class AutoCompleteTextView extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.autotext);
// memanggil kelas CompleteText startActivity(new Intent(this, CompleteText.class)); } } |
3.
Edit Text, Button, ImageButton, Tooggle Button,
RadioButton, CheckBox,
Selain TextView, anda akan sering menemui beberapa kontrol
dasar lain seperti RadioButton Button, ImageButton, EditText, kotak
centang, ToggleButton dan RadioGroup.
* EditText
sebuah subclass dari
TextView yang berfungsi untuk mengedit text.
* Button
merupakan sebuah widget
tombol-tombol
* ImageButton
mirip dengan View Button
* ToggleButton
Lampu indikator akan menyala
ketika Button ditekan
*CheckBox
adalah elemen antarmuka pengguna
grafis (widget) yang memungkinkan pengguna untuk membuat beberapa
pilihan dari sejumlah pilihan
*
RadioGroup dan RadioButton
RadioButton adalah widget yang
memungkinkan pengguna untuk memilih hanya salah satu set opsi-opsi
yang sudah ditetapkan. Sebuah RadioGroup digunakan untuk grup
bersama satu atau lebih RadioButton, sehingga hanya satu
RadioButton yang akan di check oleh RadioGroup.
Untuk menampilkan widget - widget diatas, isi file xml dengan kode dibawah ini
basic.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" /> <Button android:id="@+id/btnOpen" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Open" /> <ImageButton android:id="@+id/btnImg1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/icon" /> <EditText android:id="@+id/txtName" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <CheckBox android:id="@+id/chkAutosave" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Autosave" /> <CheckBox android:id="@+id/star" style="?android:attr/starStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<RadioGroup android:id="@+id/rdbGp1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <RadioButton android:id="@+id/rdb1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Option 1" /> <RadioButton android:id="@+id/rdb2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Option 2" /> </RadioGroup>
<ToggleButton android:id="@+id/toggle1" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout> |
panggil basic.xml tadi di kelas Activity dengan kode dibawah ini
|
package android.basic; import android.app.Activity; import android.os.Bundle; public class UserInterface extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // memanggil file xml setContentView(R.layout.basic); } } |
Untuk cara membuat aplikasi menggunakan macam - macam view lainya akan saya bahas di materi selanjutnya..
_netoya_
Posted at 05:57PM Apr 24, 2010 by nety ozora in General | Comments[0]