Dokumen tersebut membahas tentang widget di Android, termasuk penjelasan dan contoh kode untuk button, edittext, dan textview. Diberikan pula contoh kode XML dan Java untuk menggunakan widget-widget tersebut dalam aplikasi Android. Termasuk juga praktikum membuat form sederhana menggunakan widget-widget tersebut dan memberikan tugas untuk membuat form pendaftaran.

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

2. Praktikum ANDROID
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 Funsi
Button! Sebagai tombol, sering digunakan untuk form
EditText input teks, sering digunakan untuk input data
TextView 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
berikut hasilnya
Page "2 of "11
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_orange_light"
android:text="Tekan Button Ini"
android:textColor="@android:color/holo_purple" />

3. Praktikum ANDROID
!
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 :!
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 :!
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.
!
Page "3 of "11
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
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();
}
});
}
}

4. Praktikum ANDROID
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.!
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.!
Page "4 of "11
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/editText1"
android:layout_below="@+id/editText1"
android:layout_marginTop="20dp"
android:ems="10"/>
}
}

5. Praktikum ANDROID
! 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 = (Edi tTex t )
findViewById(R.id.editText1);. Untuk mendapatkan value dari dari EditText input_text dapat
menggunakan method getText(). !
String text = input_text.getText().toString();
Page "5 of "11

6. Praktikum ANDROID
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.!
!
Page "6 of "11

7. Praktikum ANDROID
Page "7 of "11
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
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_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button1"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:text="Nama" /> !
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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_width="match_parent"
android:layout_height="wrap_content"
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_height="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_height="wrap_content"
android:layout_below="@+id/textView3"
android:layout_centerHorizontal="true"
android:layout_marginTop="22dp"
android:text="-"
android:textAppearance="?android:attr/textAppearanceLarge" /> !
</RelativeLayout>

8. Praktikum ANDROID
!
!
! 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);!
!
Page "8 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);
}
}

9. Praktikum ANDROID
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 :!
Dan ganti code berikut pada button dengan id button1 code diatas merupakan properti
pada widget android. Tujuannya agar warna pada text dan background pada masing-masing
widget berubah.!
!!
Page "9 of "11
<TextView
android:id="@+id/hasil_nama"
android:layout_width="wrap_content"
android:layout_height="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"
/>
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
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"
/>

10. Praktikum ANDROID
Page "10 of "11

11. Praktikum ANDROID
!
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.
Page 1"1 of 1"1