Widget dan Layouting pada Android

Beberapa hari yang lalu saya mengikuti praktikum kuliah Mobile Computing, ternyata membahas salah satunya adalah tentang Widget dan Layouting pada Android. Berikut ilmu yang saya dapat:

Berikut XML yang saya buat:

<?xml
version=“1.0”
encoding=“utf-8”?>

<LinearLayout
xmlns:android=http://schemas.android.com/apk/res/android&#8221;

android:orientation=“vertical”

android:layout_width=“fill_parent”

android:layout_height=“fill_parent”

>

<TextView
android:layout_width=“wrap_content”
android:text=“©2011 Ilse”
android:layout_height=“wrap_content”
android:id=“@+id/textView5”></TextView>

<LinearLayout
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:id=“@+id/linearLayout1”>

<TextView
android:layout_width=“wrap_content”
android:text=“Nama: “
android:layout_height=“wrap_content”
android:id=“@+id/tvNama”></TextView>

<EditText
android:layout_width=“match_parent”
android:id=“@+id/etNama”
android:layout_height=“wrap_content”
android:text=“”></EditText>

</LinearLayout>

<ScrollView
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:id=“@+id/scrollView1”>

<TableLayout
android:id=“@+id/tableLayout1”
android:layout_width=“match_parent”
android:layout_height=“match_parent”>

<TextView
android:layout_width=“wrap_content”
android:text=“Proyek: “
android:layout_height=“wrap_content”
android:id=“@+id/textView2”
android:textStyle=“bold”></TextView>

<CheckBox
android:layout_width=“wrap_content”
android:id=“@+id/cbProyek1”
android:text=“Proyek 1”
android:layout_height=“wrap_content”></CheckBox>

<CheckBox
android:layout_width=“wrap_content”
android:id=“@+id/cbProyek2”
android:text=“Proyek 2”
android:layout_height=“wrap_content”></CheckBox>

<CheckBox
android:id=“@+id/cbProyek3”
android:text=“Proyek 3”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”></CheckBox>

<TextView
android:text=“Golongan:”
android:layout_width=“wrap_content”
android:id=“@+id/textView3”
android:textStyle=“bold”
android:layout_height=“wrap_content”></TextView>

<RadioGroup
android:id=“@+id/rgGolongan”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”>

<RadioButton
android:id=“@+id/rbGolongan1”
android:text=“Golongan 1”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”></RadioButton>

<RadioButton
android:id=“@+id/rbGolongan2”
android:text=“Golongan 2”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”></RadioButton>

<RadioButton
android:id=“@+id/rbGolongan3”
android:text=“Golongan 3”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”></RadioButton>

</RadioGroup>

<Button
android:layout_width=“wrap_content”
android:id=“@+id/btnHitung”
android:layout_height=“wrap_content”
android:text=“Hitung Gaji”></Button>

<HorizontalScrollView
android:layout_width=“wrap_content”
android:id=“@+id/horizontalScrollView1”
android:layout_height=“wrap_content”>

<LinearLayout
android:layout_height=“match_parent”
android:orientation=“horizontal”
android:id=“@+id/linearLayout2”
android:layout_width=“match_parent”>

<TextView
android:text=“Gaji = 0”
android:layout_width=“wrap_content”
android:id=“@+id/tvGaji”
android:textSize=“10pt”
android:layout_height=“wrap_content”></TextView>

</LinearLayout>

</HorizontalScrollView>

</TableLayout>

</ScrollView>

</LinearLayout>

Hasilnya seperti berikut:

Dan bisa discroll ke bawah:

Mari kita telaah sekarang, pertama-tama kita lihat bagian yang ada TextView tvNama dan EditText etNama. Saya masukkan ke dalam sebuah Linear Layout supaya bisa dibuat satu baris dan berdampingan.

Lalu bagian setelah itu saya masukkan ke sebuah ScrollView supaya bisa discroll ke bawah tanpa mempengaruhi tvNama dan etNama. Untuk konten-konten yang berada dalam ScrollView ini perlu dimasukkan juga ke sebuah layout, defaultnya kita akan diberi LinearLayout, tapi saya ganti ke TableLayout supaya lebih memadai untuk scroll vertikal yang berbaris-baris.

Berikutnya kita masuk ke bagian CheckBox, pemasangan dan pemanggilan CheckBox adalah sederhana. Kita beri nama dengan id yang berbeda-beda, nanti kita panggil dengan cara misalnya seperti berikut:

CheckBox cbProyek1=(CheckBox) findViewById(R.id.cbProyek1);

CheckBox cbProyek2=(CheckBox) findViewById(R.id.cbProyek2);

CheckBox cbProyek3=(CheckBox) findViewById(R.id.cbProyek3);

if(cbProyek1.isChecked()){

gaji+=1000000;

};

if(cbProyek2.isChecked()){

gaji+=2000000;

};

if(cbProyek3.isChecked()){

gaji+=3000000;

};

Berikutnya kita masuk ke bagian RadioGroup dan RadioButton. Beberapa RadioButton yang berkaitan (misalnya dalam kasus ini rbGolongan1, rbGolongan2, dan rbGolongan3) harus dimasukkan ke dalam sebuah RadioGroup (misalnya dalam kasus ini rgGolongan). Contoh pemanggilannya nanti seperti berikut:

int gol=rgGolongan.getCheckedRadioButtonId();

if(cbProyek1.isChecked()||cbProyek2.isChecked()||cbProyek3.isChecked()){

if(gol==R.id.rbGolongan1){

gaji+=500000;

} else
if(gol==R.id.rbGolongan2){

gaji+=750000;

} else
if(gol==R.id.rbGolongan3){

gaji+=1000000;

};

};

Berikutnya kita masuk ke bagian Button btnHitung, tidak ada yang istimewa dari bagian ini.

Lalu kita masuk ke bagian HorizontalScrollView, sama seperti ScrollView, hanya saja yang ini scrollnya horizontal. Maka dari itu saya menggunakan LinearLayout yang merupakan defaultnya dalam mengakomodasi widget di dalam HorizontalScrollView. Saya menggunakan HorizontalScrollView dalam menampilkan tvGaji supaya jika misalnya ada yang nilai gajinya tidak cukup untuk ditampilkan di layar, dapat discroll secara horizontal. J


We need your comment here. Please leave it below.

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: