BAGIAN

ANDROID WIDGET

Konsep Widget
Android widget sudah kita implementasikan sedikit pada bagian activity, pada
bagian Android widget ini akan kita jelaskan lebih detail mengenai komponenkomponen yang terdapat dalam Android widget. Paket widget pada dasarnya merupakan
visualisasi dari elemen user intergace (UI) yang digunakan pada layar aplikasi Android
dimana kita dapat merancang sendiri sesuai kebutuhan kita.
Widget didalam android ditampilkan dengan konsep View. Dimana aplikasi
android pada umumnya menggunakan widget sebagai Layout XML. Untuk
mengimplementasikan widget, selain file java kita juga membutuhkan tambahan dua
file. Berikut ini adalah file-file yang umumnya kita butuhkan apabila kita membuat
widget :
File Java
Berupa file java dimana merupakan file yang mengimplementasikan aksi dari
widget. Jika anda mendefinisikan suatu widget beserta posisinya dilayar yang
didefinisikan dari file XML , kita harus melakukan coding di file java dimana
kita dapat

mengambil semua nilai atribut dari tata letak file XML yang

didefinisikan.
File XML
Sebuah file XML yang berada di res/values/ yang mendefinisikan komponen
elemen-elemen XML yang digunakan untuk inisialisasi widget serta atribut
yang mendukungnya (file yang kita kenal dengan main.xml pada bab bagianbagian sebelumnya).
60
Android Widget

 Layout XML [optional]

File ini tidak harus ada, file XML berada di dalam res/layout/ yang
menggambarkan atau penambahan keterangan pada layout widget anda.
Sebenarnya ini kita dapat dilakukan di file java kita (file ini dikenal dengan
string.xml pada bab bagian-bagian sebelumnya, dimana fungsi string.xml itu
bisa dihandle oleh file javanya).
Tabel 5.1. Jenis-jenis (Classes) android widgets
AbsListView

CursorAdapter

AbsListView.LayoutParams

CursorTreeAdapter

AbsoluteLayout

DatePicker

AbsSeekBar

DialerFilter

AbsSpinner

DigitalClock

AdapterView<T extends Adapter>

EditText

AdapterView.AdapterContextMenuInfo

ExpandableListView

AlphabetIndexer

ExpandableListView.ExpandableListContextMe
nuInfo

AnalogClock

Filter

ArrayAdapter<T>

Filter.FilterResults

AutoCompleteTextView

FrameLayout

BaseAdapter

FrameLayout.LayoutParams

BaseExpandableListAdapter

Gallery

Button

Gallery.LayoutParams

CheckBox

GridView

CheckedTextView

HeaderViewListAdapter

Chronometer

HorizontalScrollView

CompoundButton

ImageButton

61
Android Widget

ImageSwitcher

SeekBar

ImageView

SimpleAdapter

LinearLayout

SimpleCursorAdapter

LinearLayout.LayoutParams

SimpleCursorTreeAdapter

ListView

SimpleExpandableListAdapter

ListView.FixedViewInfo

SlidingDrawer

MediaController

Spinner

MultiAutoCompleteTextView

TabHost

MultiAutoCompleteTextView.CommaTok
enizer

TabHost.TabSpec

OverScroller

TableLayout

PopupWindow

TableLayout.LayoutParams

ProgressBar

TableRow

QuickContactBadge

TableRow.LayoutParams

RadioButton

TabWidget

RadioGroup.LayoutParams

TextSwitcher

RatingBar

TextView

RelativeLayout

TextView.SavedState

RelativeLayout.LayoutParams

TimePicker

RemoteViews

Toast

ResourceCursorAdapter

ToggleButton

ResourceCursorTreeAdapter

TwoLineListItem

Scroller

VideoView

ScrollView

ViewAnimator

Widget TextView
62
Android Widget

Menampilkan text kepada layar dan memiliki optional bisa dilakukan edit, tetapi secara
default TextView tidak dapat diedit, untuk dapat melakukan edit harus menggunakan
subclass yang berfungsi untuk menampilkan isi TextView. Buatlah project android
dengan ketentuan seperti berikut :
Project Name

: TextView

Buitl Target

: Android 2.3

Application name

: textview

Package name

: com.wilis.textview

Activity

: textview

Min SDK

:9

main.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tulisan"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>

textview.java
package com.wilis.textview;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class textview extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView t=(TextView)findViewById(R.id.tulisan);
t.setText("Ini adalah tulisan dengan widget TextView");
}

63
Android Widget

Diperlukan libraries android.widget.TextView karena kita mendefenisikan komponen

yang berupa widget TextView, apabila anda banyak menggunakan komponen widget
anda tidak perlu melakukan import semuanya cukup dengan perintah :
import android.widget.*;

dengan perintah itu akan membuat otomatis semua komponen dari widget yang tersedia
bisa dilakukan pemanggilan.
Perhatikan cara pemanggilan id komponen yang sudah didefenisikan didalam main.xml
dengan menggunakan findViewId(R.id.tulisan) dimana ini bisa diproses karena
sudah dideklarasikan dengan setContentView(R.Layout.main).
Apabila anda jalankan akan menghasilkan seperti gambar berikut :

Gambar 6.1. Aplikasi TextView

Aplikasi TextView diatas sebenarnya bisa anda lakukan tanpa membutuhkan import
android.widget yaitu dengan cara menampilkan text langsung di coding xml nya

seperti berikut :
main.xml (ubah main.xml menjadi seperti berikut).
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text= "Ini adalah tulisan dengan widget TextView"
/>

textview.java
64
Android Widget

package com.wilis.textview;
import android.app.Activity;
import android.os.Bundle;
public class textview extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Widget EditText
EditText adalah kostumisasi TextView dimana menjadi TextView yang dapat
mengkonfigurasi dirinya sendiri sehingga dapat diedit. Buatlah project android dengan
ketentuan seperti berikut :
Project Name

: EditText

Buitl Target

: Android 2.3

Application name

: edittext

Package name

: com.wilis.edittext

Activity

: edittext

Min SDK

:9

main.xml
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tampil"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:singleLine="false"
/>

Komponent berupa EditText yang dikenal dengan variabel tampil dan memiliki sifat
boleh lebih dari beberapa baris (singleLine=false).
edittext.java
package com.wilis.edittext;

65
Android Widget

import android.app.Activity;
import android.os.Bundle;
import android.widget.EditText;
public class edittext extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
EditText f=(EditText)findViewById(R.id.tampil);
f.setText("Ini adalah tampilan EditText di Android 2.3 " +
" Anda bisa memanggil fungsi EditText setelah anda" +
" import libraries android.widget.EditText, Tampilan " +
" EditText menjadi beberada baris karena " +
" android:singleline=false");
}
}

Apabila anda jalankan akan menghasilkan seperti gambar berikut :

Gambar 6.2. Aplikasi EditText

Perhatikan cara pemanggilan id komponent yang sudah didefinisikan didalam main.xml
dengan menggunakan findViewId(R.id.tampil) dimana ini bisa diproses karena
sudah dideklarasikan dengan setContentView(R.Layout.main);
Aplikasi EditText dengan coding xml tanpa import android.widget.*;
main.xlm
<?xml version="1.0" encoding="utf-8"?>

66
Android Widget

<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tampil"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:singleLine="false"
android:text="Ini adalah tampilan EditText di Android 2.3 Anda bisa
melakukan tanpa anda import libraries android.widget.EditText yaitu
melalui coding xml, Tampilan EditText menjadi beberada baris karena
android:singleline=false"
/>

Sehingga coding edittext.java hanya seperti berikut ini

edittext.java
package com.wilis.edittext;
import android.app.Activity;
import android.os.Bundle;
public class edittext extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Widget RadioButton/RadioGroup
Pada umumnya RadioButton digunakan bersama-sama dengan RadioGroup, didalam
satu RadioGroup terdapat beberapa RadioButton. Dan didalam satu RadioGroup user
hanya dapat melakukan satu check/pemilihan RadioButton. Buatlah project android
dengan ketentuan seperti berikut :
Project Name

: Radio

Buitl Target

: Android 2.3

Application name

: radio

Package name

: com.wilis.radio

Activity

: radio

Min SDK

:9

67
Android Widget

main.xml
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RadioButton android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radio Button 1" />
<RadioButton android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radio Button 2" />
<RadioButton android:id="@+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radio Button 3" />
</RadioGroup>

radio.java
package com.wilis.radio;
import android.app.Activity;
import android.os.Bundle;
public class radio extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Pada deklarasi main.xml kita temukan dalam satu RadioGroup terdapat tiga buah
RadioButton. Apabila dijalankan akan menghasilkan tampilan seperti berikut :
68
Android Widget

Gambar 6.3. Aplikasi RadioButton

Widget ImageView/ImageButton
ImageView adalah widget yang menampilkan gambar seperti icon. ImageView dapat
memuat gambar dari berbagai sumber (resource atau content providers), sementara
ImageButton adalah widget yang menampilkan tombol yang berisi gambar (bukan teks)
yang bisa ditekan atau di klik oleh pengguna. Secara default, sebuah ImageButton
hampir sama dengan button biasa. Buatlah project android dengan ketentuan seperti
berikut :
Project Name

: Image1

Buitl Target

: Android 2.3

Application name

: image

Package name

: com.wilis.image

Activity

: image

Min SDK

:9

main.xml
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
/>

69
Android Widget

image.java
package com.wilis.image;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
public class image extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView satu = new ImageView(this);
satu.setImageResource(R.drawable.logo);
setContentView(satu);
}

Akan menghasilkan seperti gambar berikut :

Gambar 6.4. Aplikasi Widgets ImageView

Kemudian ubah coding ImageView menjadi ImageButton seperti berikut dan lihat
perbedaan hasilnya dengan click gambar dari hasil keduanya :
main.xml
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/logo2"

70
Android Widget

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"

/>

image.java
package com.wilis.image;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageButton;
public class image extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

ImageButton dua = new ImageButton(this);

dua.setImageResource(R.drawable.logo2);
setContentView(dua);

Akan menghasilkan seperti gambar berikut :

Gambar 6.5. Aplikasi Widgets ImageButton

Berikut ini akan kita coba gabungkan tampilan dua gambar dalam satu layar tanpa
menggunakan libraries androd.widgets.* (coding melalui xml).
main.xlm
71
Android Widget

<?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"
>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo"
/>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo2"
/>
</LinearLayout>

image.java
package com.wilis.image;
import android.app.Activity;
import android.os.Bundle;
public class image extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

Akan menghasilkan seperti gambar berikut :

72
Android Widget

Gambar 6.6. Aplikasi Widgets Image dengan XML

Bekerja dengan Kumpulan Widgets

Kumpulan Widgets yang memiliki struktur tersendiri-sendiri biasanya disebut dengan
contrainers. Jika kita bekerja dalam sebuah tampilan dimana terdapat beberapa widget
kita harus menentukan layout yang digunakan. Seperti kebanyakan GUI yang memiliki
layout management untuk menampilkan containers, seperti layout BoxLayout di
Java/Swing, Android juga memiliki beberapa layout management yaitu sebagai berikut :
Linear
Penggunaannya mirip dengan model box dari Java/Swing, yaitu menampilkan
widgets atau containers dalam posisi baris atau colom, satu persatu. Konfigurasi
LinearLayout mempunyai 5 contents yaitu : Orientation, Fill Model, Weight,
Gravity dan Padding.
1. Orientation
Orientation mengindikasikan layout ditampilkan berdasarkan baris atau
kolom, sintaksnya adalah :
android.orientation=value

Valuenya horizontal berdasarkan baris atau vertikal berdasarkan

kolom.
73
Android Widget

2. Fill Model
Fill Model adalah bentuk tampilan element/widgets terhadap space yang
tersedia. terdiri dari tiga pilihan yaitu

Spesific dimension, seperti 125px untuk mengisi widgets tampilan

di 125pixel.

wrap_content, widgets akan mengisi posisi dengan konsep natural

space.

fill_parent, widgets akan mengisi posisi yang tersedia.

3. Weight
Weight mengatur settingan android.layout_width (untuk baris) dan
android.layout_height (untuk kolom).
4. Gravity
Gravity Secara default pada tampilan dengan LinearLayout adalah Left
and top aligned. Jika kita menginginkan tampilan yang berbeda kita bisa
mengatur

gravity

sesuai

left,center_horizontal,

kebutuhan.

Nilai-nilai

right

for

gravity

adalah

left-aligned,

centered, dan right-aligned.

5. Padding
Padding

memiliki

empat

nilai

standard

yaitu

paddingLeft,

paddingRight,paddingTop,dan paddingBottom. Berikut gambar

yang menjelas posisi padding dari sebuat widgets.

74
Android Widget

Gambar 6.7. Padding Values

Berikut adalah contoh yang menerapkan konsep LinearLayout diatas. Buatlah
project android dengan ketentuan seperti berikut :
Project Name

: Linear

Buitl Target

: Android 2.3

Application name : linear

Package name

: com.wilis.linear

Activity

: linear

Min SDK

:9

main.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"
>
<RadioGroup android:id="@+id/orientation"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton
android:id="@+id/horizontal"
android:text="horizontal" />
<RadioButton
android:id="@+id/vertical"
android:text="vertical" />

75
Android Widget

</RadioGroup>
<RadioGroup android:id="@+id/gravity"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton
android:id="@+id/left"
android:text="left" />
<RadioButton
android:id="@+id/center"
android:text="center" />
<RadioButton
android:id="@+id/right"
android:text="right" />
</RadioGroup>
</LinearLayout>

linear.java
package com.wilis.linear;
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Gravity;
android.widget.LinearLayout;
android.widget.RadioGroup;

public class linear extends Activity

implements RadioGroup.OnCheckedChangeListener {
RadioGroup orientation;
RadioGroup gravity;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
orientation=(RadioGroup)findViewById(R.id.orientation);
orientation.setOnCheckedChangeListener(this);
gravity=(RadioGroup)findViewById(R.id.gravity);
gravity.setOnCheckedChangeListener(this);
}
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.horizontal:
orientation.setOrientation(LinearLayout.HORIZONTAL);
break;

76
Android Widget

case R.id.vertical:
orientation.setOrientation(LinearLayout.VERTICAL);
break;
case R.id.left:
gravity.setGravity(Gravity.LEFT);
break;
case R.id.center:
gravity.setGravity(Gravity.CENTER_HORIZONTAL);
break;
case R.id.right:
gravity.setGravity(Gravity.RIGHT);
break;
}

Ketika pertama kali dijalankan akan menghasilkan seperti gambar berikut :

Gambar 6.8. Aplikasi LinearLayout1

Coba anda click horizontal dan pilih center akan menjadi seperti gambar berikut :

Gambar 6.9. Aplikasi LinearLayout2

Tampilan apabila click vertikal dan right
77
Android Widget

Gambar 6.10. Aplikasi LinearLayout3

Relative
Relative atau lebih tepatnya RelativeLayout adalah layout dimana jika kita
membutuhkan penempatan Widget A dibawah kiri dari Widget B atau dibawah
sebelah kanan, dan penempatan lainnya.
RelativeLayout standartnya mempunyai dua layout yaitu :
1. Relative to Container
Terdiri dari beberapa posision yaitu :
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_alignParentLeft
android:layout_alignParentHorizontal
android:layout_centerHorizontal
android:layout_centerVertical
android:layout_centerInParent
2. Relative to Widget lainnya
Terdiri dari beberapa posision yaitu :
android:layout_above
android:layout_below
android:layout_toLeftOf
78
Android Widget

 android:layout_toRightOf
Berikut ini akan kita terapkan konsep dari RelativeLayout. Buatlah project android
dengan ketentuan seperti berikut :
Project Name

: Relative

Buitl Target

: Android 2.3

Application name : relative

Package name

: com.wilis.relative

Activity

: relative

Min SDK

:9

main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px">
<TextView android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama:"
android:paddingTop="15px"/>
<EditText
android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/label"
android:layout_alignBaseline="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignRight="@id/entry"
android:text="OK" />
<Button
android:id="@+id/cancel"

79
Android Widget

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>

relative.java
package com.wilis.relative;
import android.app.Activity;
import android.os.Bundle;
public class relative extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Apabila dijalankan akan menghasilkan gambar seperti berikut :

Gambar 6.11. Aplikasi RelativeLayout

Tabula
Tabula atau yang lebih kita kenal dengan layout table di HTML, penerapannya
seperti aplikasi dibawah ini. Buatlah project android dengan ketentuan seperti
berikut :
Project Name

: Tabula

Buitl Target

: Android 2.3

80
Android Widget

Application name : tabula

Package name

: com.wilis.tabula

Activity

: tabula

Min SDK

:9

main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="Nama :" />
<EditText android:id="@+id/entry"
android:layout_span="3"/>
</TableRow>
<View
android:layout_height="2px"
android:background="#0000FF" />
<TableRow>
<Button android:id="@+id/cancel"
android:layout_column="2"
android:text="Cancel" />
<Button android:id="@+id/ok"
android:text="OK" />
</TableRow>
</TableLayout>

tabula.java
package com.wilis.tabula;
import android.app.Activity;
import android.os.Bundle;
public class tabula extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

81
Android Widget

Akan menghasilkan seperti gambar berikut :

Gambar 6.12. Aplikasi TableLayout

Scrollwork
Scrollwork adalah membuat layout yang bisa dilakukan scroll baik scroll naik
maupun scroll turun. Buatlah project android dengan ketentuan seperti berikut :
Project Name

: Scroll

Buitl Target

: Android 2.3

Application name : scroll

Package name

: com.wilis.scroll

Activity

: scroll

Min SDK

:9

main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0">
<TableRow>
<View
android:layout_height="80px"
android:background="#000000"/>
<TextView android:text="Baris ke-1"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>

82
Android Widget

<View

android:layout_height="80px"
android:background="#440000" />
<TextView android:text="Baris ke-2"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#884400" />
<TextView android:text="Baris ke-3"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View

android:layout_height="80px"
android:background="#aa8844" />
<TextView android:text="Baris ke-4"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffaa88" />
<TextView android:text="Baris ke-5"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffffaa" />
<TextView android:text="Baris ke-6"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffffff" />
<TextView android:text="Baris ke-7"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View

83
Android Widget

android:layout_height="80px"
android:background="#ffffaa" />
<TextView android:text="Baris ke-8"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffffff" />
<TextView android:text="Baris ke-9"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
<TableRow>
<View
android:layout_height="80px"
android:background="#ffffaa" />
<TextView android:text="Baris ke-10"
android:paddingLeft="4px"
android:layout_gravity="center_vertical" />
</TableRow>
</TableLayout>
</ScrollView>

scroll.java
package com.wilis.scroll;
import android.app.Activity;
import android.os.Bundle;
public class scroll extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Akan menghasilkan tampilan seperti berikut :

84
Android Widget

Gambar 6.13. Aplikasi Scroll

ListView
Tentunya anda sudah sering mendengar apa yang dimaksud dengan ListView, ListView
di android juga memiliki fungsi yang sama dengan ListView di bahasa pemrograman
yang lain. Berikut ini adalah contoh penerapan ListView pada android. Buatlah project
android dengan ketentuan seperti berikut :
Project Name

: Listview

Buitl Target

: Android 2.3

Application name : listview

Package name

: com.wilis.listview

Activity

: listview

Min SDK

:9

listview.java
package com.wilis.listview;
import
import
import
import
import
import

android.os.Bundle;
android.app.ListActivity;
android.view.View;
android.widget.ArrayAdapter;
android.widget.ListView;
android.widget.TextView;

public class listview extends ListActivity {

TextView selection;

85
Android Widget

String[] items={"Aceh", "Sumatera Utara", "Sumatera Barat","Riau",

"Jambi","Sumatera Selatan", "Bengkulu", "Lampung", "Bangka Belitung",
"Kepulauan Riau","Jakarta", "Jawa Barat", "Jawa Tengah", "Yogyakarta",
"Jawa Timur","Banten", "Bali", "Nusa Tenggara Barat",
"Nusa Tenggara Timur", "Kalimantan Barat","Kalimantan Tengah",
"Kalimantan Selatan", "Kalimantan Timur", "Sulawesi Utara",
"Sulawesi Tengah","Sulawesi Selatan","Sulawesi Tenggara","Gorontalo",
"Sulawesi Barat","Maluku","Maluku Utara","Papua Barat","Papua"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,items));
}

selection=(TextView)findViewById(R.id.selection);

public void onListItemClick(ListView parent, View v, int position,long

id) {
selection.setText(items[position]);
}
}

main.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" >
<TextView
android:id="@+id/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"
/>
</LinearLayout>

Apabila dijalankan akan menghasilkan seperti gambar berikut :

86
Android Widget

Gambar 6.14. Aplikasi ListView

Spinner/ComboList
Widget ini hampir mirip dengan ListView, hanya perbedaannya ListViewnya berasalah
dari satu combo atau yang dikenal dengan spinner, kalau anda yang terbiasa di
programan visual basic mengenal namanya combo list, berikut kita lihat penerapan
spinner. Buatlah project android dengan ketentuan seperti berikut :
Project Name

: Spinner

Buitl Target

: Android 2.3

Application name : spinner

Package name

: com.wilis.spinner

Activity

: spinner

Min SDK

:9

main.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"
>
<TextView
android:id="@+id/selection"

87
Android Widget

android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<Spinner android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
/>
</LinearLayout>

spinner.java
package com.wilis.spinner;
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.AdapterView;
android.widget.ArrayAdapter;
android.widget.Spinner;
android.widget.TextView;

public class spinner extends Activity

implements AdapterView.OnItemSelectedListener {
TextView selection;
String[] items={"Aceh", "Sumatera Utara", "Sumatera Barat", "Riau",
"Jambi","Sumatera Selatan", "Bengkulu", "Lampung", "Bangka Belitung",
"Kepulauan Riau","Jakarta", "Jawa Barat", "Jawa Tengah", "Yogyakarta",
"Jawa Timur","Banten", "Bali", "Nusa Tenggara Barat", "Nusa Tenggara
Timur", "Kalimantan Barat","Kalimantan Tengah", Kalimantan Selatan",
"Kalimantan Timur", "Sulawesi Utara", "Sulawesi Tengah","Sulawesi
Selatan","Sulawesi Tenggara","Gorontalo","Sulawesi
Barat","Maluku","Maluku Utara","Papua Barat","Papua"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
selection=(TextView)findViewById(R.id.selection);
Spinner spin=(Spinner)findViewById(R.id.spinner);
spin.setOnItemSelectedListener(this);
ArrayAdapter<String> aa=new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item,items);
aa.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
spin.setAdapter(aa);

88
Android Widget

}
public void onItemSelected(AdapterView<?> parent,
View v, int position, long id) {
selection.setText(items[position]);
}
public void onNothingSelected(AdapterView<?> parent) {
selection.setText("");
}
}

Hasil tampilan pertama kali dijalankan adalah sebagai berikut :

Gambar 6.15. Aplikasi Spinner1

Setelah dilakukan pemilihan misalnya jawa barat akan menghasilkan gambar seperti
berikut :

Gambar 6.16. Aplikasi Spinner2

89
Android Widget

InputType
Inputtype adalah untuk mengontrol inputan terhadap widgets sehingga inputan sesuai
dengan struktur yang diharapkan. Pada android terdiri dari beberapa classes inputan
yaitu :

Text (defult inputan)

Number

Phone

Datetime

Date

Time

Berikut akan kita terapkan inputType dalam contoh aplikasi android dibawah ini.
Buatlah project android dengan ketentuan seperti berikut :
Project Name

: InputType

Buitl Target

: Android 2.3

Application name : inputtype

Package name

: com.wilis.inputtype

Activity

: inputtype

Min SDK

:9

main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
>
<TableRow>
<TextView
android:text="Email:"
/>
<EditText
/>
</TableRow>
<TableRow>

90
Android Widget

<TextView
android:text="Nama:"
/>
<EditText
android:inputType="text|textEmailAddress"
/>
</TableRow>
<TableRow>
<TextView
android:text="Umur:"
/>
<EditText
android:inputType="number|numberSigned|numberDecimal"
/>
</TableRow>
<TableRow>
<TextView
android:text="Tanggal Lahir:"
/>
<EditText
android:inputType="date"
/>
</TableRow>
<TableRow>
<TextView
android:text="Alamat:"
/>
<EditText
android:inputType="text|textMultiLine|
textAutoCorrect"
android:minLines="3"
android:gravity="top"
/>
</TableRow>
</TableLayout>

Pada coding xml diatas dapat kita lihat beberapa inputType sebagai berikut :

1. Email : tidak memiliki input type artinya isiannya bebas.

2. Nama : inputType

text|textEmailAddress

berarti memiliki

inputan yang berupa text.

3. Umur : inputType

number|numberSigned|numberDecimal berarti

inputannya hanya berupa angka.

91
Android Widget

4. Tanggal Lahir : inputType date berarti harus berupa format tanggal

seperti 04-06-1982.

5. Alamat: inputType text|textMultiLine|textAutoCorrect"

berarti inputannya berupa text dengan mengizinkan lebih dari satu barus.
inputtype.java
package com.wilis.inputtype;
import android.app.Activity;
import android.os.Bundle;
public class inputtype extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Running aplikasi tersebut dan perhatikan konsistensi inputannya apakah sesuai dengan
formula yang kita rancang, salah satu bentuk inputan pada aplikasi diatas adalah seperti
berikut :

Gambar 6.17. Aplikasi inputType

92
Android Widget

Ubah main.xml diatas untuk dapat melakukan ScrollView sehingga prosedur

penginputan lebih bagus.
TypeFace
TypeFace yang dalam android ditulis dengan typeFace adalah untuk mendefenisikan
jenis huruf yang anda mau tampilkan, tentunya jenis huruf di android tidak sebanyak
jenis huruf seperti di operating sistem seperti windows/linux. Berikut typeFace yang
tersedia di android
1. typeFace=sans
2. typeFace=serif
3. typeFace=monospace
4. typeFace custom (untuk font yang kita include source file tffnya)
program dibawah ini adalah contoh penerapan jenis typeFace diatas. Buatlah project
android dengan ketentuan seperti berikut :
Project Name

: typeFace

Buitl Target

: Android 2.3

Application name : typeface

Package name

: com.wilis.typeface

Activity

: typeface

Min SDK

:9

main.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:text="sans:"
android:layout_marginRight="4px"
android:textSize="20sp"

93
Android Widget

/>
<TextView
android:id="@+id/sans"
android:text="Nazruddin Safaat H."
android:typeface="sans"
android:textSize="20sp"
/>
</TableRow>
<TableRow>
<TextView
android:text="serif:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/serif"
android:text="Nazruddin Safaat H."
android:typeface="serif"
android:textSize="20sp"
/>
</TableRow>
<TableRow>
<TextView
android:text="monospace:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/monospace"
android:text="N. Safaat H."
android:typeface="monospace"
android:textSize="20sp"
/>
</TableRow>
<TableRow>
<TextView
android:text="Custom:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/custom"
android:text="N. Safaat H."
android:textSize="20sp"
/>
</TableRow>
</TableLayout>

typeface.java
package com.wilis.typeface;

94
Android Widget

import
import
import
import

android.app.Activity;
android.graphics.Typeface;
android.os.Bundle;
android.widget.TextView;

public class typeface extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView tv=(TextView)findViewById(R.id.custom);
Typeface
face=Typeface.createFromAsset(getAssets(),"fonts/mistral.ttf");
tv.setTypeface(face);
}
}

Penjelasan costum huruf, didefenisikan tulisan yang akan kita berikan fontFace custom
adalah berikut ini :
<TextView

android:text="Custom:"
android:layout_marginRight="4px"
android:textSize="20sp"
/>
<TextView
android:id="@+id/custom"
android:text="N. Safaat H."
android:textSize="20sp"
/>

Dimana isi dari variabel custom akan dijadikan huruf mistral, pastikan huruf mistral
sudah ada di folder asset/fonts seperti view project dibawah ini.

Gambar 6.18. Project view typeFace

95
Android Widget

Kemudian coding java yang untuk memanggil dan menjadikan font mistral adalah
sebagai berikut :
TextView tv=(TextView)findViewById(R.id.custom);
Typeface face=Typeface.createFromAsset(getAssets(),
"fonts/mistral.ttf");
tv.setTypeface(face);

tentu coding tersebut membutuhkan libraries yang diwakili dengan perintah

import android.graphics.Typeface;

Tampilan program typeFace tersebut adalah sebagai berikut :

Gambar 6.19. Aplikasi typeFace.

Messages Box
Messages box yang di kenal di android terbagi dua jenis yaitu :

Toasts
Adalah message/pesan yang muncul dalam waktu sebentar dan kemudian hilang
tanpa mempunyai user interaction dengan pengguna, biasa ini merupakan fokus
dari activity yang active.

Alert
Adalah Dialog box atau message yang mempunyai user interaction dengan user,
biasa terdiri dari 3 bagian yaitu
setMessage() berisi tulisan pesan/message
setTitle() / setIcon(), konfigurasi title/icon dari dialog box
setPositiveButton(),setNeutralButton(),setNegativeButton(), berisi
posisi serta metode clicknya.

96
Android Widget

Berikut adalah penerapannya, Buatlah project android dengan ketentuan seperti berikut :
Project Name

: Messagebox

Buitl Target

: Android 2.3

Application name : messagebox

Package name

: com.wilis.messagebox

Activity

: messagebox

Min SDK

:9

main.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/alert"
android:text="MessageBox/Alert"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/toast"
android:text="Message Toasts"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

messagebox.java
package com.wilis.messagebox;
import
import
import
import
import
import
import

android.app.Activity;
android.app.AlertDialog;
android.content.DialogInterface;
android.widget.Button;
android.widget.Toast;
android.os.Bundle;
android.view.View;

public class messagebox extends Activity implements

View.OnClickListener {
Button alert;
Button toast;

97
Android Widget

/** Called when the activity is first created. */

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);

alert=(Button)findViewById(R.id.alert);
alert.setOnClickListener(this);
toast=(Button)findViewById(R.id.toast);
toast.setOnClickListener(this);

public void onClick(View view) {

if (view==alert) {
new AlertDialog.Builder(this)
.setTitle("Message title")
.setMessage("Ini adalah bagian setMessage")
.setNeutralButton("Close", new
DialogInterface.OnClickListener() {

public void onClick(DialogInterface dlg, int sumthin) {

}
})
.show();
}
else {
Toast
.makeText(this, "Hai..Message toast", Toast.LENGTH_SHORT)
.show();
}

Perhatikan, bahwa untuk menampilkan message box kita memerlukan libraries berikut
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.widget.Toast;

Aplikasi dijalankan akan menghasilkan seperti gambar berikut :

98
Android Widget

Gambar 6.20. Aplikasi message box

Keterangan gambar.
Gambar sebelah kanan adalah apabila di click button yang bertuliskan Messagebox/alert
sementara gambar sebelah kanan apabila di click button Message Toast.

Program Stuff
Pada program ini kita akan rancang sebuah program android yang sudah
mengkombinasikan widget yang biasa digunakan. Buatlah project android dengan
ketentuan seperti berikut :
Project Name

: FormStuff

Buitl Target

: Android 2.3

Application name : formstuff

Package name

: com.wilis.formstuff

Activity

: formstuff

Min SDK

:9

Desain layout seperti gambar berikut:

99
Android Widget

Gambar 6.21. Desain program stuff.

jadikan coding xml adalah seperti berikut :

main.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/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="@drawable/android_button" />

<EditText
android:id="@+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<CheckBox android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="check it out" />
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/radio_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Red" />
<RadioButton android:id="@+id/radio_blue"

100
Android Widget

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Blue" />
</RadioGroup>
<ToggleButton android:id="@+id/togglebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Vibrate on"
android:textOff="Vibrate off"/>
<RatingBar android:id="@+id/ratingbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1.0"/>
</LinearLayout>

formstuff.java
package com.wilis.formstuff;
import
import
import
import
import
import
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.KeyEvent;
android.view.View;
android.view.View.OnClickListener;
android.view.View.OnKeyListener;
android.widget.Button;
android.widget.CheckBox;
android.widget.EditText;
android.widget.RadioButton;
android.widget.RatingBar;
android.widget.Toast;
android.widget.ToggleButton;
android.widget.RatingBar.OnRatingBarChangeListener;

public class formstuff extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

101
Android Widget

final RadioButton radio_red = (RadioButton)

findViewById(R.id.radio_red);
final RadioButton radio_blue = (RadioButton)
findViewById(R.id.radio_blue);
radio_red.setOnClickListener(radio_listener);
radio_blue.setOnClickListener(radio_listener);
final Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
Toast.makeText(formstuff.this, "Beep Bop",
Toast.LENGTH_SHORT).show();
}
});
final EditText edittext = (EditText)
findViewById(R.id.edittext);
edittext.setOnKeyListener(new OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
// If the event is a key-down event on the "enter"
button
if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
(keyCode == KeyEvent.KEYCODE_ENTER)) {
// Perform action on key press
Toast.makeText(formstuff.this, edittext.getText(),
Toast.LENGTH_SHORT).show();
return true;
}
return false;
}
});
final CheckBox checkbox = (CheckBox)
findViewById(R.id.checkbox);
checkbox.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks, depending on whether it's
now checked
if (((CheckBox) v).isChecked()) {
Toast.makeText(formstuff.this, "Selected",
Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(formstuff.this, "Not selected",
Toast.LENGTH_SHORT).show();
}
}
});

102
Android Widget

final ToggleButton togglebutton = (ToggleButton)

findViewById(R.id.togglebutton);
togglebutton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
if (togglebutton.isChecked()) {
Toast.makeText(formstuff.this, "Checked",
Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(formstuff.this, "Not checked",
Toast.LENGTH_SHORT).show();
}
}
});
final RatingBar ratingbar = (RatingBar)
findViewById(R.id.ratingbar);
ratingbar.setOnRatingBarChangeListener(new
OnRatingBarChangeListener() {
public void onRatingChanged(RatingBar ratingBar, float
rating, boolean fromUser) {
Toast.makeText(formstuff.this, "New Rating: " + rating,
Toast.LENGTH_SHORT).show();
}
});
}
private OnClickListener radio_listener = new OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
RadioButton rb = (RadioButton) v;
Toast.makeText(formstuff.this, rb.getText(),
Toast.LENGTH_SHORT).show();
}
};
}

Jalankan aplikasi, dan setiap anda melaukan action terhadap widget akan dimunculkan
pesan dalam bentuk widget.toast yang berisi actian adalah seperti contoh gambar berikut
pesan toast ketika checlisk click.

103
Android Widget

Gambar 6.22. Program stuff.

104
Android Widget