Praktikum ANDROID

!

ANDROID

FOR

BEGINNER MODUL 2 ![ANDROID WIDGET]

!!!!!SUDARYATNO yatnosudar@gmail.com | @dodulz | facebook : yatno.sudar

Page � of �1 11

Praktikum ANDROIDANDROID 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 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

Widget Funsi

Button! Sebagai tombol, sering digunakan untuk form

EditText input teks, sering digunakan untuk input data

TextView Digunakan untuk menampilkan tulisan

Page � of �2 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" />

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 � of �3 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(); } }); }}

Praktikum ANDROID

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 � of �4 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"/>

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(); }}

Praktikum ANDROID! Untuk mendapatkan hasil inputan gunakan method getText() dan untuk mendeklarasikan text gunakan method setText(). Pada code diatas EditText di dek la ras ikan a tau d ihubungkan dengan code inpu t_ tex t = (Ed i 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 � of �5 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 � of �6 11

Praktikum ANDROID

Page � of �7 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>

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 � of �8 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); }}

Praktikum ANDROIDSelanjutnnya 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 � of �9 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" />

Praktikum ANDROID

Page � of �10 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 � of �11 11