ANDROID FOR BEGINNER MODUL 2

ANDROID FOR BEGINNER MODUL 2 [ANDROID WIDGET] SUDARYATNO yatnosudar@gmail.com @dodulz facebook : yatno.sudar 1 of 11

ANDROID WIDGET Widget adalah komponen view android yang digunakan untuk memudahkan end user menggunakan aplikasi. Contoh dari widget yaitu, Button, EditText, TextView dan lain-lain. Widget mempunyai properti pasti yaitu lebar dan tinggi. Setiap widget mempunnyai action sendiri-sendiri, sesuai dengan fungsinnya. Berikut ini widget yang sering digunakan Widget Button EditText TextView Funsi Sebagai tombol, sering digunakan untuk form input teks, sering digunakan untuk input data Digunakan untuk menampilkan tulisan WIDGET PROPERTI Widget properti adalah properti yang digunakan untuk memodifikasi widget android sesuai dengan keinginan. Widget dipasang di masing-masing layout android. Setiap layout bisa mempunyai banyak widget. contoh dari properti widget sebagai berikut <Button android:id="@+id/button1" android:background="@android:color/holo_orange_light" android:text="tekan Button Ini" android:textcolor="@android:color/holo_purple" /> berikut hasilnya 2 of 11

BUTTON WIDGET Button digunakan sebagai tombol dalam sebuah form atau dalam bentuk lain. Button memiliki properti widget tetap yaitu layout_width, layout_height, dan id. Berikut ini adalah XML dari button : <Button android:id="@+id/button1" android:layout_width="wrap_content" android:text="button" /> Pada android Java anda dapat memberi action untuk widget tersebut. Seblum memberikan action anda harus memberikan deklarasi dulu agar java android dapat mengenali button tersebut. Contoh sebagia berikut : public class MainActivity extends Activity { private Button button; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); button = (Button) findviewbyid(r.id.button1); button.setonclicklistener(new OnClickListener() { @Override public void onclick(view v) { Toast.makeText(MainActivity.this, "Hallo Android", Toast.LENGTH_LONG).show(); ); perhatikan script java diatas : private Button button; => digunakan untuk membuat object button button = (Button) findviewbyid(r.id.button1); => digunakan untuk menghubungkan antara java dan XML button dengan id button1 button.setonclicklistener => digunakan untuk member action pada android ketika tombol ditekan. 3 of 11

public class MainActivity extends Activity { private EditText input_text; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); input_text = (EditText) findviewbyid(r.id.edittext1); public void _onclick(view view){ String text = input_text.gettext().tostring(); Toast.makeText(MainActivity.this,text, Toast.LENGTH_LONG).show(); TEXTVIEW WIDGET TextView widget digunakan untuk menampilkan tulisan. TextView Widget memiliki properti tetap yaitu layout_width, layout_height, dan id. <EditText android:id="@+id/edittext2" android:layout_alignleft="@+id/edittext1" android:layout_below="@+id/edittext1" android:layout_margintop="20dp" android:ems="10"/> code diatas digunakan untuk membuat TextView. Pada java kita dapat menambahkan action. TextView juga dapat kita sisipi listener seperti button. EDITTEXT WIDGET EditText widget digunakan untuk input data. EditText widget memiliki properti tetap yaitu layout_width, layout_height, dan id. EditText memiliki beberapa tipe diantarannya adalah number, password,email, nomor telfon, dan lain-lain. code diatas digunakan untuk membuat EditText. Pada java kita dapat mengambil input atau menambahkan action listener. 4 of 11

Untuk mendapatkan hasil inputan gunakan method gettext() dan untuk mendeklarasikan text gunakan method settext(). Pada code diatas EditText di deklarasikan atau dihubungkan dengan code input_text = ( E d i t Te x t ) findviewbyid(r.id.edittext1);. Untuk mendapatkan value dari dari EditText input_text dapat menggunakan method gettext(). String text = input_text.gettext().tostring(); 5 of 11

Praktikum 1. Buat project Android 2. Buat tampilan berikut menggunakan drag and drop. 3. Tampilan diatas terdiri dari 1. TextEdit dengan text Nama 2. EditText 3. Button 4. TexView dengan text Selamat Datang 5. TextView dengan text - 4. Berikut code XML dari form diatas. 6 of 11

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context=".mainactivity" > <TextView android:id="@+id/textview1" android:layout_alignleft="@+id/button1" android:layout_alignparenttop="true" android:layout_margintop="16dp" android:text="nama" /> <EditText android:id="@+id/edittext1" android:layout_alignleft="@+id/textview1" android:layout_below="@+id/textview1" android:layout_margintop="15dp" android:ems="10" android:inputtype="textpersonname" > <requestfocus /> </EditText> <Button android:id="@+id/button1" android:layout_below="@+id/edittext1" android:layout_centerhorizontal="true" android:layout_margintop="28dp" android:text="button" /> <TextView android:id="@+id/textview3" android:layout_width="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:text="selamat Datang " android:textappearance="?android:attr/textappearancemedium" /> <TextView android:id="@+id/hasil_nama" android:layout_width="wrap_content" android:layout_below="@+id/textview3" android:layout_centerhorizontal="true" android:layout_margintop="22dp" android:text="-" android:textappearance="?android:attr/textappearancelarge" /> </RelativeLayout> 7 of 11

public class MainActivity extends Activity { private EditText name; private Button button; private TextView textview; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); name=(edittext) findviewbyid(r.id.edittext1); button=(button) findviewbyid(r.id.button1); textview=(textview) findviewbyid(r.id.hasil_nama); button.setonclicklistener(new OnClickListener() { @Override public void onclick(view v) { hiddenkeyboard(v); String name_input = name.gettext().tostring(); textview.settext(name_input); ); private void hiddenkeyboard(view v) { InputMethodManager keyboard = (InputMethodManager) getsystemservice(context.input_method_service); keyboard.hidesoftinputfromwindow(v.getwindowtoken(), 0); Code diatas digunakan untuk mendapatkan nilai dari EditText dengan id edittext1. Setelah didapat hasilnnya dengan menggunakan method gettext() pada EditText name seperti code berikut String name_input = name.gettext().tostring();. TextView textview akan di set dengan nilai yang diambil dari name_input dengan method settext pada code berikut textview.settext(name_input); 8 of 11

Selanjutnnya coba untuk merubah warna TextView dan warna Button dengan warna kesukaan anda. Dengan cara merubah properti pada TextView dan Button pada XML. Sekarang ganti code XML TextView dengan id hasil_nama seperti berikut : <TextView android:id="@+id/hasil_nama" android:layout_width="wrap_content" android:layout_below="@+id/textview3" android:layout_centerhorizontal="true" android:layout_margintop="22dp" android:text="-" android:textappearance="?android:attr/textappearancelarge" android:textcolor="#ecf0f1" android:background="#d35400" /> Dan ganti code berikut pada button dengan id button1 code diatas merupakan properti pada widget android. Tujuannya agar warna pada text dan background pada masingmasing widget berubah. <Button android:id="@+id/button1" android:layout_height="50dp" android:layout_below="@+id/edittext1" android:layout_centerhorizontal="true" android:layout_margintop="28dp" android:text="tekan DISINI" android:textcolor="#ecf0f1" android:background="#2980b9" /> 9 of 11

10 of 11

TUGAS 1. Buatlah form pendaftaran mengguakan widget TextView, EditText, dan Button. 2. Isi form terdiri dari 1. Nama (inputtype:textpersonname), 2. Emai (inputtype:textemailaddress), 3. Nomor Telfon (inputtype:phone), 4. Button dengan Text Submit 3. Modifikasi Form tersebut dengan textcolor dan Background dengan warna sesuai kreasi Anda. 4. Dan berikan action pada Button dengan method setonclicklistener 5. Tampilkan menggunakan TextView. 11 of 11