Praktikum ANDROID
!
ANDROID FOR BEGINNER MODUL 2 ! [ANDROID WIDGET]
! ! ! ! !
SUDARYATNO
[email protected] | @dodulz | facebook : yatno.sudar
Page 1 of 11
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 <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" />
berikut hasilnya
Page 2 of 11
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 :! <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="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.
!
Page 3 of 11
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.! <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"/>
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
Praktikum ANDROID !
Untuk mendapatkan hasil inputan gunakan method getText() dan untuk
mendeklarasikan text gunakan method setText(). Pada code diatas EditText di d e k l a r a s i k a n a t a u d i h u b u n g k a n d e n g a n c o d e i n p u t _ t e x t = ( 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();
Page 5 of 11
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
Praktikum ANDROID
!
!
!
!
!
<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 /> <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" />
Page 7 of 11
Praktikum ANDROID !
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);! !
Page 8 of 11
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 masingmasing widget berubah.! <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" />
! !
Page 9 of 11
Praktikum ANDROID
Page 10 of 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 11 of 11
