Bagian 4: Widget Dasar

Lanjutan tutorial bagian 3

Update: Des 2015, update sesuai android studio.

Pada modul sebelumnya kita telah menggunakan input box, button dan label. Komponen user interface  ini disebut widget. Beberapa widget dasar yang akan dibahas adalah:  TextView, Button, Image, EditText, CheckBox, RadioButton, ListView. Semua merupakan turunan dari kelas View, sehingga sering juga disebut View. Untuk widget yang menerima input, disebut juga input control. (kadang memang membingungkan untuk urusaan penamaan di Android ini)

Setiap widget memiliki property atau atribut yang mengatur bagaimana widget itu ditampilkan, seperti tinggi dan lebar widget. Property ini dapat diset melalui xml layout, property editor atau melalui app. Beberapa widget memiliki beberapa event yang ter-trigger berdasarkan aksi dari pengguna, misalnya event click pada button.

Detil property dan event untuk setiap widget dapat dilihat di: http://developer.android.com/reference/android/widget/package-summary.html  (scroll sedikit ke bawah, di bagian classes)

Text View

TextView digunakan untuk menampilkan label teks. View ini sudah kita gunakan  Beberapa contoh property dari TextView adalah android:textSize untuk mengatur ukuran, android:textStyle untuk mengatur apakah font bold atau italic, android:textColor dsb.

Coba masuk activity_main.xml, klik kaca pembesar untuk zoom lalu   klik textview yang ada di form, perhatikan property editor  di bagian kanan (gambar bawah)

widget_property

 

Property dapat diedit melalui property editor. Coba edit property text color dan text size sebagai berikut (gambar bawah) dan perhatikan efeknya:

textview_properties

 

Catatan:pada atribut textSize, direkomendasikan menggunakan ukuran sp. sp merupakan singkatan  dari scaled-pixel yang memperhitungkan kepadatan resolusi dan juga preferensi ukuran font dari pengguna.

Selain melalui property editor,  property juga dapat diedit langsung melalui xml. Pindah dari mode design graphical layout ke text xml (gambar bawah)

ganti_mode
Lihat XML untuk textview dan tambahkan android:textStyle = “bold” (code bawah)

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Hello World!"
 android:textColor="#ff0000"
 android:textSize="40sp"
 android:textStyle="bold" >

Perhatikan hasilnya.

Sekarang kita coba mengganti property melalui code.  Melalui property editor, ganti id textview menjadi tvHalo. Lalu masuk ke MainActivity.java, tambahkan code berikut di bagian onCreate, tekan Alt-Enter untuk menambahkan impor yang dibutuhkan.


	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		//ambil textview dan set property-nya
		TextView tvHalo = (TextView) findViewById(R.id.tvHalo);
		tvHalo.setTextColor(Color.GREEN);
	}

Jalankan program dan lihat hasilnya (warna teks menjadi hijau).

Button

Button merupakan turunan dari TextView sehingga yang berlaku di textView juga berlaku di button. Tambahan property yang penting adalah onClick.  Pembahasan tentang button sudah ada di tutorial sebelumnya.

ImageButton dan ImageView

ImageButton adalah turunan dari button, gunakan widget ini jika Anda ingin menggunakan image sebagai pengganti tulisan pada button. Sedangkan ImageView dapat digunakan untuk menampilkan image.

Berbeda dengan program pada desktop, app di Android dapat berjalan di device dengan berbagai resolusi.  Oleh karena itu, kita perlu menyiapkan image untuk berbagai kategori resolusi. Hal ini untuk mencegah gambar yang digunakan terlihat pecah atau terlalu kecil pada device dengan resolusi berbeda. Ada lima jenis resolusi: mdpi untuk medium (160dpi) , hdpi untuk high density (240dpi) dan xhdpi untuk ekstra high density (320dpi).  xxhdpi untuk resolusi 480dpi dan xxxhdpi untuk 640.

 

4_4

Image yang akan ditampilkan dalam button diletakkan di direktori /res/drawable sesuai dengan resolusinya. res merupakan singkatan dari “resource”,  file-file yang berada di dalam direktori /res disebut dengan project resources.

Catatan: di dalam direktori res juga ada direktori mipmap, direktori ini khusus untuk menyimpan icon app.

Catatan: Icon gratis dapat didownload di: https://design.google.com/icons/   Tinggal pilih ukuran yang kita inginkan (dalam dp) maka langsung disiapkan untuk hdpi sampai xxxhdpi.  Setelah didonwload dan diekstrak, letakan di direktori [project]/app/src/main/res seperti ini:

direktori_res

Misalnya kita akan menambah button dan image view. Di window palette, pilih Image View” dan drag ke form. PIlih property src, lalu tekan button disebelahnya. Pilih tab Project, lalu cari direktori Drawable (gambar bawah) dan pilih salah satu drawable.

property_src_imageview

Hasilnya akan seperti ini

imageview
Untuk menambahkan image bersama-sama dengan teks pada button, dapat digunakan komponen button (bukan ImageButton) lalu set atribut drawableLeft dengan image yang diinginkan. 

Coba tambah button, ke mode text dan isi property drawableLeft di dalam elemen <button> seperti berikut:

android:drawableLeft="@drawable/abc_btn_check_to_on_mtrl_000"

Hasilnya akan seperti ini:

button_dgn_image

Coba ganti drawableLeft dengan drawableRight, drawableTop atau drawableButtom.

EditText

EditText digunakan untuk menerima input dari pengguna.  Pada palette telah disediakan berbagai jenis EditText, silahkan dicoba satu persatu dan perhatikan property setiap widget .

text_fields

CheckBox

User dapat memilih lebih dari satu pilihan dengan checkbox.

Coba tambahkan dua checkboxs. Double klik pada checkbox lalu isi id dan text

setidtext_checkbox2

Satu bertuliskan “Java” dengan id cbJava , dan yang kedua PHP” dengan id cbPHP
4_13

Tambahkan Button dan TextView di form untuk menampilkan hasil pilihan user. Sehingga tampilannya akan seperti ini. Beri nama id textview dengan  tvHasil.

contoh_checkbox

 

Jangan lupa set atribut onClick button dengan method “klikHasil”, yang implementasinya sebagai berikut. Perhatikan penggunaan isChecked untuk mengambil nilai apakah user meng-check pilihan:

public void klikHasil(View v) {
		//ambil komponen
		TextView tvHasil = (TextView) findViewById(R.id.tvHasil);
		CheckBox cbJava = (CheckBox) findViewById(R.id.cbJava);
		CheckBox cbPHP = (CheckBox) findViewById(R.id.cbPHP);

		//proses checkbox yang dicheck user
		String s = "";
		if (cbJava.isChecked())  {
			s = s+ " java dicheck ";
		}
		if (cbPHP.isChecked())  {
			s = s+ " PHP dicheck ";
		}

		//tampilkan di textview
		tvHasil.setText(s);

	}

Hasilnya akan sepertin ini:

4_16

Latihan CheckBox:

Buat soal berikut yang penggunanya dapat memilih lebih dari  satu:

4_21Jawaban yang benar adalah “Bandung” dan “Banjarmasin”.  Setiap jawaban benar bernilai 10, tetapi setiap jawaban yang salah akan dikurangi 5.  Jadi jika pengguna menjawab “Bandung”, “Bogor”  dan “Banjarmasin”  dan maka pengguna mendapat nilai 20 – 5 = 15.  Tampilkan nilai ini.

Catatan: input dari  method setText adalah teks, sehingga nilai integer harus dikonversi terlebih dulu menjadi teks. Gunakan Integer.toString(intNilai).

RadioButton

Pada radioButton, hanya satu pilihan yang boleh aktif (mutual exclusive) di dalam satu group yang disebut radioGroup.   Modifikasi program checkbox diatas, tambahkan radio group (bukan radiobutton) yang ada di bagian Container.  Baru kemudian tambahkan radio button.

Hasilnya:

4_18

Tambahkan button dan textview, lalu gunakan property untuk mengedit sehingga hasilnya seperti berikut.

4_19

Sekarang kita perlu set id setiap widget. Ganti id RadioGroup dengan rgJenKel,  radiobutton dengan rbPria dan rbWanita dan id TextView dengan tvHasilRadio.  Tambahkan property onClick pada button  dengan nama klikHasilRadio.

Catatan: atribut android:orientation pada RadioGroup dapat diisi “horizontal” agar radio button tersusun secara mendatar

Jangan lupa save, lalu masuk ke MainActivity.java. Code saat tombol diklik adalah sebagai berikut. Perhatikan pengunaan getCheckRadioButtonId yang mengambil idRadio yang dipilih oleh pengguna:


public void klikHasilRadio(View v) {
		TextView tvHasilRadio = (TextView) findViewById(R.id.tvHasilRadio);
		RadioGroup rgJenKel = (RadioGroup) findViewById(R.id.rgJenKel);

		//ambil pilihan user
		int idPil = rgJenKel.getCheckedRadioButtonId();

		//isi string
		String s;
		if (idPil==R.id.rbPria) {
			s = "Pilihan: Pria";
		} else if (idPil==R.id.rbWanita){
			s = "Pilihan: Wanita";
		} else {
			s = "Tidak ada yg dipilih";
		}

		//isi textview
		tvHasilRadio.setText(s);

	}

Hasilnya akan seperti ini jika button di tap:

4_20

Latihan radiogroup:

Buat soal berikut yang penggunanya hanya dapat memilih tepat satu:

4_22

Jawaban yang benar adalah “Kendari”.  Jika pengguna memilih pilihan yang benar akan mendapat nilai 10, sedangkan jika menjawab salah maka akan mendapat nilai -2

Berlanjut ke tutorial bagian 5: ListView

Daftar isi lengkap semua tutorial

3 comments on “Bagian 4: Widget Dasar

  1. mas..pada sesi latihan tersebut saya tidak mampu membuat jawban..apalgi pas Integer.toString(intNilai). nggak tau gimana cara gunaiinya..
    mohon pencerahanya…
    atau bikin dong mas…jawabanya..
    makasih mas..

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.