Slide IST205 10 Mobile Device Programming Android Studio 3 Widget TextView EditText Button Event Handler

(1)

Mobile Programming

UI Controls dengan Widget

TextView,

(2)

Augury El Rayeb, S.Kom., MMSI. Mobile Device Programming Technology (Android Studio) | IST205

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

(3)

Widget

• Untuk membuat widget pada activity layout

(.xml):

<TextView

android:text="Sign-in"

android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:id="@+id/lblTitle" />

<TextView

android:attribute-widget="nilai_atribut" android:attribute-widget="nilai_atribut"

… … … /> <TextView

android:attribute-widget="nilai_atribut" android:attribute-widget="nilai_atribut"

…

… />

(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,

(5)

Widget

• Langkah yang harus dilakukan untuk menggunakan

widget activity class (.java) yang sudah dibuat pada

activity layout (.xml):

1. import class widget yang ingin digunakan:

android.widget.

nama-widget

;

2. Buat object di dalam method onCreate() pada class:

nama-widget

nama-object

= (nama-widget) findViewById(R.id.

id-ui-pada-layout

)

3. Setelah itu kita dapat menggunakan method yang dimiliki

widget tersebut, dengan cara:

nama-object

.nama-method();

.. ..

<TextView

android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:id="@+id/lblJudul" />

.. ..

</RelativeLayout>

Contoh, misal: activity_main.xml berisi:

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");

. . .

Contoh: MainActivity.java

1

2

(6)

(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

(8)

Membuat TextView pada activity layout

(.xml) dan Menggunakan TextView pada

Activity Class (.java)

<TextView

android:id="@+id/lblJudul"

android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity=“left"

android:textsize=“24sp“

android:textstyle="normal|bold"

/>

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");

. . . . . .

Code pada MainActivity.java

(9)

(10)

EditText

• Berikut atribut EditText yang umum di-setting:

Nama Attribute

Deskripsi

android:id

android:text

android:inputType

Menentukan jenis input (text, number, date, textEmailAddress, . . . )

android:layout_width

android:layout_height

android:layout_gravity

android:width

Ukuran lebar EditText dalam satuan dp (device pixels). Contoh: 15dp

(11)

Membuat EditText pada activity layout (.xml)

dan Menggunakan EditText pada Activity

Class (.java)

import android.widget.EditText;

. . . . . .

. . .

EditText userid=(EditText) findViewById(R.id.txtUserId);

String pengguna = userid.getText().toString();

. . . . . .

Code pada activity_main.xml <EditText

android:id="@+id/txtUserId"

android:text=“Augury El Rayeb"

android:inputType="textEmailAddress"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="left"

android:width="320dp"

android:hint="email atau user id"

(12)

(13)

Button

• Berikut atribut Button yang umum di-setting:

Nama Attribute

Deskripsi

android:id

android:text

android:layout_width

android:layout_height

android:layout_gravity

(14)

Membuat Button pada activity layout (.xml)

dan Menggunakan Button pada Activity

Class (.java)

import android.widget.Button;

. . .

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

}

}); . . .

Code pada activity_main.xml <Button

android:id="@+id/btnHalo"

android:text=“HELLO SIF"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:width="320dp"

/>

<TextView

android:id="@+id/lblOutput"

android:text=“Output"

android:layout_width="wrap_content" android:layout_height="wrap_content"

(15)

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

(17)

Event Handlers

• _{Terdapat 3 teknik (cara) untuk membuat event}

handler:

1. Anonymous inner class

2. Activity Implements Listener Interface

Activity class melakukan implements terhadap

Listener interface

3. Registration Using Layout file

activity_main.xml

(18)

Event Handler

(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):

1. Buat

method eventListener

untuk object tersebut

2. Di dalam method eventListener tersebut, lakukan

override

method

yang akan menangani (handle) jika event tersebut terjadi.

3. Buat instruksi untuk method override tersebut.

. . .

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),

(20)

Event Handlers, Contoh

. . .

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() { @Override

<EditText

android:id="@+id/txtInput" android:text=“Input"

.. . />

<TextView

android:id="@+id/lblOutput" android:text=“Output 1" .. .

/>

<Button

android:id="@+id/btnBaca" android:text=“BACA INPUT" .. .

/>

<TextView

android:id="@+id/lblOutput2" android:text=“Output 2"

.. . />

(21)

Event Handler

(22)

Event Handlers

(Teknik

Activity Implements Listener Interface

)

• Langkah yang harus dilakukan:):

1. Implements semua event listener yang akan digunakan (gunakan koma ( , ) sebagai pemisah antar event listener)

2. Buat object untuk UI Control yang akan menggunakan event di dalam method onCreate,

3. Panggil method setOn event listener melalui object yang menggunakannya.

4. Buat override method untuk event yang akan digunakan, dan tulis instruksi yang diperlukan di dalam method override tersebut

. . .

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

TextView keluaran2 = (TextView) findViewById(R.id.lblOutput2); EditText masukan = (EditText) findViewById(R.id.txtInput); keluaran2.setText(masukan.getText());

} }

1

2

3

Tips:

Untuk kemudahan dalam membuat methode override ini (di android studio),

alt+ins  Override Methods  pilih

method yang ingin di-override

(23)

Event Handlers,

Contoh: Activity Implements Listener Interface

. . .

@Override

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

@Override

} }

<EditText

android:id="@+id/txtInput" android:text=“Input"/> <TextView

android:id="@+id/lblOutput" android:text=“Output 1"/>

<Button

android:id="@+id/btnBaca" android:text=“BACA INPUT"/> <TextView

android:id="@+id/lblOutput2" android:text=“Output 2“ />

(24)

Event Handler

(25)

<Button

android:id="@+id/btnBaca"

android:text=“BACA INPUT“

android:onClick=“bacaInput“

/>

Event Handlers

(Teknik Registration Using Layout file activity_main.xml)

• Langkah yang harus dilakukan:

1. Pada layout (.xml), tambahkan atribut android:onClick=“nama_method” terhadap UI yang ingin dibuat control event-nya

2. Pada class (.java), import android.view.View;

3. Pada class (.java), tambahkan method dengan nama seperti yang ditulis atribut android:onClick

4. Tuliskan instruksi yang diperlukan di dalam method tersebut

. . .

import android.view.View;

public void bacaInput(View v) {

} }

1

2

3

4

(26)

Tips

• Membuat method override

:

Untuk kemudahan dalam membuat

method override ini (di android studio);

(27)

(28)

Referensi

• Android Tutorial: Simply Easy Learning

by tutorialspoint.com

• TheNewBoston YouTube Playlist: Android

App Development for Beginners Playlist.

https://

www.youtube.com/watch?v=NMDPxN8FgXM&list=PL6gx4Cwl9DGBsvRxJJOzG4r4k_zLKrnxl&index=9