UI Controls dengan Widget TextView, EditText dan Button

Presentasi berjudul: "UI Controls dengan Widget TextView, EditText dan Button"— Transcript presentasi:

1 UI Controls dengan Widget TextView, EditText dan Button
Mobile Programming UI Controls dengan Widget TextView, EditText dan Button

2 Capaian Pembelajaran Memahami Widget TextView
Mampu membuat UI Control TextView pada activity layout (.xml) Mampu membuat event handling untuk UI Control TextView Memahami Widget EditText Mampu membuat UI Control EditText pada activity layout (.xml) Mampu membuat event handling untuk UI Control EditText Memahami Widget Button Mampu membuat UI Control Button pada activity layout (.xml) Mampu membuat event handling untuk UI Control Button

3 Widget Untuk membuat widget pada activity layout (.xml):
<TextView android:attribute-widget="nilai_atribut" android:attribute-widget="nilai_atribut" … … … /> Contoh: <TextView android:text="Sign-in" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentStart="true" />

4 Attributes Berikut adalah beberapa attribut yang secara umum sering di-setting pada Widget UI Controls: Nama Attribute Deskripsi android:id ID yang digunakan untuk mengidentifikasi UI Control secara unique. android:text Teks yang akan ditampilkan. android:textColor Warna teks Diisi dengan format: “#rgb” android:hint Teks bantuan yang akan ditampilkan jika teks pada input kosong. android:layout_width Ukuran lebar layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_height Ukuran tinggi layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_gravity Menentukan bagaimana posisi layout UI Control terhadap main layout (induknya). (spt: left, right, top, bottom, center_horizontal, center_vertical, dst).

5 Widget Langkah yang harus dilakukan untuk menggunakan widget activity class (.java) yang sudah dibuat pada activity layout (.xml): import class widget yang ingin digunakan: android.widget.nama-widget; Buat object di dalam method onCreate() pada class: nama-widget nama-object = (nama-widget) findViewById(R.id.id-ui-pada-layout) Setelah itu kita dapat menggunakan method yang dimiliki widget tersebut, dengan cara: nama-object.nama-method(); Contoh, misal: activity_main.xml berisi: Contoh: MainActivity.java 1 .. .. <TextView android:text="Sign-in" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentStart="true" /> </RelativeLayout> import android.widget.TextView; . . . protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TextView judul=(TextView) findViewById(R.id.lblJudul); judul.setText(“Form Login"); 2 3

6 TextView Widget

7 TextView Berikut atribut TextView yang umum di-setting: Nama Attribute
Deskripsi android:id ID yang digunakan untuk mengidentifikasi UI Control secara unique. android:text Teks yang akan ditampilkan. android:textColor Warna teks Diisi dengan format: “#rgb” android:layout_width Ukuran lebar layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_height Ukuran tinggi layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_gravity Menentukan bagaimana posisi layout UI Control terhadap main layout (induknya). (spt: left, right, top, bottom, center_horizontal, center_vertical, dst). android:textSize Ukuran teks dalam satuan sp (scaled pixels). Contoh: 15sp android:textStyle Style teks : 0 – normal , 1 – bold, 2 – italic .

8 Membuat TextView pada activity layout (
Membuat TextView pada activity layout (.xml) dan Menggunakan TextView pada Activity Class (.java) <TextView android:text="Sign-in" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity=“left" android:textsize=“24sp“ android:textstyle="normal|bold" /> Code pada activity_main.xml Code pada MainActivity.java import android.widget.TextView; . . . protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TextView judul=(TextView) findViewById(R.id.lblJudul); judul.setText(“Form Login");

9 EditText Widget

10 EditText Berikut atribut EditText yang umum di-setting: Nama Attribute
Deskripsi android:id ID yang digunakan untuk mengidentifikasi UI Control secara unique. android:text Teks yang akan ditampilkan. android:inputType Menentukan jenis input (text, number, date, text Address, ) android:layout_width Ukuran lebar layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_height Ukuran tinggi layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_gravity Menentukan bagaimana posisi layout UI Control terhadap main layout (induknya). (spt: left, right, top, bottom, center_horizontal, center_vertical, dst). android:width Ukuran lebar EditText dalam satuan dp (device pixels). Contoh: 15dp android:hint Teks yang akan ditampilkan kalau EditText kosong.

11 Membuat EditText pada activity layout (
Membuat EditText pada activity layout (.xml) dan Menggunakan EditText pada Activity Class (.java) <EditText android:text=“Augury El Rayeb" android:inputType="text Address" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="left" android:width="320dp" android:hint=" atau user id" /> Code pada activity_main.xml Code pada MainActivity.java import android.widget.EditText; . . . protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText userid=(EditText) findViewById(R.id.txtUserId); String pengguna = userid.getText().toString();

12 Button Widget

13 Button Berikut atribut Button yang umum di-setting: Nama Attribute
Deskripsi android:id ID yang digunakan untuk mengidentifikasi UI Control secara unique. android:text Teks yang akan ditampilkan. android:layout_width Ukuran lebar layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_height Ukuran tinggi layout dari UI Control (wrap_content, wrap_parent, nilai lebar) android:layout_gravity Menentukan bagaimana posisi layout UI Control terhadap main layout (induknya). (spt: left, right, top, bottom, center_horizontal, center_vertical, dst). android:width Ukuran lebar EditText dalam satuan dp (device pixels). Contoh: 15dp

14 Membuat Button pada activity layout (
Membuat Button pada activity layout (.xml) dan Menggunakan Button pada Activity Class (.java) <Button android:text=“HELLO SIF" android:layout_width="wrap_content" android:layout_height="wrap_content" android:width="320dp" /> Code pada activity_main.xml <TextView android:text=“Output" android:layout_width="wrap_content" android:layout_height="wrap_content" /> Code pada MainActivity.java import android.widget.Button; . . . protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button halo=(Button) findViewById(R.id.btnHalo); halo.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { TextView keluaran2 = (TextView) findViewById(R.id.lblOutput); keluaran2.setText(masukan.getText()); } });

15 Event Handler

16 Event Handlers Merupakan method yang digunakan untuk menangani event yang terjadi pada object (Widget UI Control). Terdapat banyak event handler pada aplikasi android, diantaranya: onClick() onLongClick() onKey() onFocusChange() onTouch() … dsb.

17 Event Handlers Terdapat 3 teknik (cara) untuk membuat event handler:
Anonymous inner class Activity Implements Listener Interface Activity class melakukan implements terhadap Listener interface Registration Using Layout file activity_main.xml Menggunakan Layout file (activity_main.xml) untuk menspesifikasikan event handler secara langsung (hanya untuk onClick( ))

18 Event Handler Teknik Anonymous Inner Class

19 Event Handlers (Teknik Anonymous inner class)
Langkah yang harus dilakukan untuk menggunakan event handler dari suatu object (widget UI Control): Pastikan object sudah dibuat pada class, Lakukan hal berikut pada activity class (.java): Buat method eventListener untuk object tersebut Di dalam method eventListener tersebut, lakukan override method yang akan menangani (handle) jika event tersebut terjadi. Buat instruksi untuk method override tersebut. Code pada MainActivity.java . . . protected void onCreate(Bundle savedInstanceState) { final EditText masukan = (EditText) findViewById(R.id.txtInput); masukan.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { TextView keluaran = (TextView) findViewById(R.id.lblOutput); keluaran.setText(masukan.getText()); return false; } }); 1 2 3 Tips: Untuk kemudahan dalam membuat methode override ini (di android studio), alt+ins  Override Methods  pilih method yang ingin di-override

20 Event Handlers, Contoh Code pada activity_main.xml
<EditText android:text=“Input" .. . /> <TextView android:text=“Output 1" <Button android:text=“BACA INPUT" .. . /> <TextView android:text=“Output 2" Code pada activity_main.xml . . . protected void onCreate(Bundle savedInstanceState) { final EditText masukan = (EditText) findViewById(R.id.txtInput); Button tombolBaca = (Button) findViewById(R.id.btnBaca); masukan.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { TextView keluaran = (TextView) findViewById(R.id.lblOutput); keluaran.setText(masukan.getText()); return false; } }); tombolBaca.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { TextView keluaran2 = (TextView) findViewById(R.id.lblOutput2); keluaran2.setText(masukan.getText()); Code pada MainActivity.java

21 Event Handler Teknik Activity Implements Listener Interface

22 Event Handlers (Teknik Activity Implements Listener Interface)
Langkah yang harus dilakukan:): Implements semua event listener yang akan digunakan (gunakan koma ( , ) sebagai pemisah antar event listener) Buat object untuk UI Control yang akan menggunakan event di dalam method onCreate, Panggil method setOn event listener melalui object yang menggunakannya. Buat override method untuk event yang akan digunakan, dan tulis instruksi yang diperlukan di dalam method override tersebut 1 Code pada MainActivity.java public class MainActivity extends AppCompatActivity implements View.OnClickListener, View.OnKeyListener { @Override protected void onCreate(Bundle savedInstanceState) { Button tombolBaca = (Button) findViewById(R.id.btnBaca); tombolBaca.setOnClickListener(this); } @Override public void onClick(View v) { TextView keluaran2 = (TextView) findViewById(R.id.lblOutput2); EditText masukan = (EditText) findViewById(R.id.txtInput); keluaran2.setText(masukan.getText()); 2 Tips: Untuk kemudahan dalam membuat methode override ini (di android studio), alt+ins  Override Methods  pilih method yang ingin di-override 4 3

23 Event Handlers, Contoh: Activity Implements Listener Interface
<EditText android:text=“Input"/> <TextView android:text=“Output 1"/> <Button android:text=“BACA INPUT"/> <TextView android:text=“Output 2“ /> Code pada activity_main.xml . . . public class MainActivity extends AppCompatActivity implements View.OnClickListener, View.OnKeyListener { @Override protected void onCreate(Bundle savedInstanceState) { EditText masukan = (EditText) findViewById(R.id.txtInput); Button tombolBaca = (Button) findViewById(R.id.btnBaca); masukan.setOnKeyListener(this); tombolBaca.setOnClickListener(this); } @Override public boolean onKey(View v, int keyCode, KeyEvent event) { TextView keluaran = (TextView) findViewById(R.id.lblOutput); EditText masukan = (EditText) findViewById(R.id.txtInput); keluaran.setText(masukan.getText()); return false; public void onClick(View v) { TextView keluaran2 = (TextView) findViewById(R.id.lblOutput2); keluaran2.setText(masukan.getText()); Code pada MainActivity.java

24 Event Handler Teknik Registration Using Layout file activity_main.xml

25 Event Handlers (Teknik Registration Using Layout file activity_main
Event Handlers (Teknik Registration Using Layout file activity_main.xml) Langkah yang harus dilakukan: Pada layout (.xml), tambahkan atribut android:onClick=“nama_method” terhadap UI yang ingin dibuat control event-nya Pada class (.java), import android.view.View; Pada class (.java), tambahkan method dengan nama seperti yang ditulis atribut android:onClick Tuliskan instruksi yang diperlukan di dalam method tersebut <Button android:text=“BACA INPUT“ android:onClick=“bacaInput“ /> 1 Code pada activity_main.xml Code pada MainActivity.java import android.view.View; public class MainActivity extends AppCompatActivity implements View.OnClickListener, View.OnKeyListener { public void bacaInput(View v) { TextView keluaran2 = (TextView) findViewById(R.id.lblOutput2); EditText masukan = (EditText) findViewById(R.id.txtInput); keluaran2.setText(masukan.getText()); } 2 3 4

26 Tips Membuat method override:
Untuk kemudahan dalam membuat method override ini (di android studio); alt+ins  Override Methods  pilih method yang ingin di-override

27 Terima Kasih

28 Referensi Android Tutorial: Simply Easy Learning by tutorialspoint.com
TheNewBoston YouTube Playlist: Android App Development for Beginners Playlist. tutorialspoint.com - Android User Interface Control