Android

Programming
(Layouts & Widgets)
Fitri Wibowo
fitri.wibowo@icloud.com

D3 Teknik Informatika
Politeknik Negeri Pontianak
Topics
• Introduction to layouts & widgets
• How to work with layouts
• How to work with widgets

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 2

Introduction to layouts & widgets

• A summary of layouts
• A summary of widgets
• The View hierarchy

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 3

A summary of layouts
Layout Deskripsi
RelativeLayout Memposisikan komponen komponen widget relatif antara satu dengan yang lain.

LinearLayout Memposisikan komponen-komponen widget dalam bentuk vertical atau horizontal.

TableLayout Memposisikan komponen-komponen widget dalam bentuk baris dan kolom (tabel)

FrameLayout Memposisikan komponen widget diatas (bertumpuk) dengan komponen widget

lain.
GridLayout Memposisikan komponen-komponen widget dalam bentuk grid. Diperkenalkan
mulai Android 4.0 (API level 14)
AbsoluteLayout Layout ini sudah usang mulai Android 1.5 (API level 3)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 4

A summary of widgets
Widget Deskripsi
TextView Dikenal juga dengan label. Widget ini digunakan untuk menampilkan text.
EditText Kependekan dari Editable text. Digunakan untuk memberikan input, serperti nama, password,
email dan lain sebagainya.
Button Digunakan untuk melakukan action tertentu ketika user meng-klik widget button
CheckBox Memungkinkan user untuk memilih satu atau lebih pilihan
RadioButton Memungkinkan user untuk memilih satu item dari beberapa pilihan
Spinner Disebut juga dropdown list, memungkinkan user untuk memilih dari sebuah list
ProgressBar Indikator visual dari suatu proses / operasi.

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 5

A summary of widgets (lanjutan)
Widget Deskripsi
SeekBar Memilih nilai dengan menggeser batang penanda pada widget.
RatingBar Menampilkan bintang untuk pilihan rating
ImageView Menampilkan gambar
ImageButton Layaknya button tetapi menggunakan gambar bukan text label
DatePicker Untuk memilih tanggal
TimePicker Untuk memilih waktu
CalendarView Untuk memilih tanggal

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 6

Introduction to layouts & widgets

• Hierarki dari kelas View:

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 7

How to work with layouts
• How to use a linear layout
• How to use a table layout
• How to use a frame layout
• How to use nest layout
• How to provide a landscape layout

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 8

How to use a linear layout
• An example of a linear layout usage with vertical orientation and two
button:

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 9

How to use a linear layout (lanjutan)
• The XML for the linear layout:

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 10

How to use a linear layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 11

How to use a linear layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 12

How to use a linear layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 13

How to use a table layout
• When to use? If you need to create a user interface that displays
control in a grid, as shown below:

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 14

How to use a table layout (lanjutan)
• When to use? If you need to create a user interface that displays
control in a grid, as shown below:

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 15

How to use a table layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 16

How to use a table layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 17

How to use a table layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 18

Table layout vs. Relative layout
• Kelebihan table layout dibanding relative layout:
• Atribut id hanya diperlukan untuk widget yang perlu diakses dari kode Java.
• Tidak perlu menambahkan atribut posisi relatif suatu widget terhadap widget
lain.
• Tidak perlu menggunakan banyak atribut untuk setiap widget.
• Kelebihan relative layout:
• Memberikan kontrol yang lebih banyak untuk mengatur posisi dan alignment
pada widget.
• Relatif lebih cepat dibandingkan table layout.

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 19

How to use a frame layout

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 20

How to use a frame layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 21

How to use a frame layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 22

How to use a nest layout

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 23

How to use a nest layout (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 24

How to provide a landscape layout
• AndroidManifest.xml -> android:screenOrientation
• value: portrait / landscape
• example:
• This forces the activity to display only in portrait orientation even if the user rotates the
device to attempt to change to landscape orientation.

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 25

How to work with widgets
• How to use editable text views
• How to use check boxes
• How to use radio buttons
• How to use spinner
• How to seek bars
• How to display images
• How to show and hide widgets
• How to add scroll bars
• How to display web content

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 26

How to use editable text views

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 27

How to use editable text views (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 28

How to use editable text views (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 29

How to use editable text views (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 30

How to use editable text views (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 31

How to use check boxes

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 32

How to use check boxes (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 33

How to use radio buttons

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 34

How to use radio buttons (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 35

How to use radio buttons (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 36

How to use spinners

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 37

How to use spinners (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 38

How to use spinners (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 39

How to use spinners (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 40

How to use seek bars

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 41

How to use seek bars (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 42

How to display images

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 43

How to display images (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 44

How to display images (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 45

How to show and hide widgets

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 46

How to show and hide widgets (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 47

How to add scroll bars

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 48

How to add scroll bars (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 49

How to display web content

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 50

How to display web content (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 51

How to display web content (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 52

How to display web content (lanjutan)

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 53

End

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 54

References
• Murach, Joel. Murach’s Android Programming 2nd Edition.

V.06/03/16 Fitri Wibowo - POLNEP - Pemrograman 4 55