WORKSHOP USER INTERFACE

DISUSUN OLEH : WATIK ADIDAYA

Mobile Programming [STT-NF]

Page 1

MEMBUAT LAYOUT

Untuk membuat UI Layout untuk activity kita, kita dapat menggunakan 2 cara
1. membuat view object dari kode program
a. Menulis kode berikut pada file MainActivity.java

b. Run dan hasilnya akan seperti dibawah ini :

2. Membuat dengan kode XML

a. Tuliskan kode ini pada file activity_main.xml :

Mobile Programming [STT-NF]

Page 2

b. Modifikasi file MainActivity.java seperti gambar dibawah :

c. Run dan hasilnya akan seperti gambar dibawah ini :

Mobile Programming [STT-NF]

Page 3

LINIER LAYOUT
1. Layout Horizontal
1.1 Buat project android baru beri nama dengan Linier Layout Demo
1.2 Buat layout _horizontal.xml dibawah folder res/layout/ seperti gambar dibawah :

1.3 gunakan layout_horizontal.xml sebagai layout dari MainActivity.java :

1.4 Run dan hasilnya akan seperti gambar dibawah ini :

Mobile Programming [STT-NF]

Page 4

2. Layout Horizontal
2.1 Copy layout_horizontal.xml ke file layout_vertical.xml, lakukan modifikasi kode seperti
gambar dibawah ini :

Mobile Programming [STT-NF]

Page 5

2.2 gunakan layout_vertical.xml sebagai layout MainActivity :

2.3 Run dan hasilnya akan seperti gambar dibawah ini :

Mobile Programming [STT-NF]

Page 6

3. Modifikasi Ketinggian (Height)

3.1 Buatlah form_layout.xml, kode nya seperti gambar dibawah ini :

Mobile Programming [STT-NF]

Page 7

3.2 Gunakan form_layout.xml sebagai layout untuk MainActivity :

3.3 Run dan hasilnya akan seperti dibawah ini :

Mobile Programming [STT-NF]

Page 8

RELATIVE LAYOUT
1. Buat project baru dengan nama Relative Layout Demo
2. Buat file relative_layout.xml dan tulis kode seperti gambar berikut :

3. Buat relative_layout.xml sebagai layout untuk MainActivity.java :

Mobile Programming [STT-NF]

Page 9

4. Run dan hasilnya akan seperti gambar dibawah ini :

LIST VIEW
1. Static ListView item dari xml
1.1 Buat project android baru dengan nama Demo List
1.2 Buat file list_layout.xml, dan tulis kode seperti gambar berikut :

Mobile Programming [STT-NF]

Page 10

1.3 Tambahkan String array pada res//string.xml :

1.4 Gunakan list_layout.xml sebagai layout untuk MainActivity.java :

Mobile Programming [STT-NF]

Page 11

1.5 Run dan hasilnya akan seperti berikut :

Mobile Programming [STT-NF]

Page 12

2. Static ListView menggunakan array adapter :

2.1 Buat activity baru dengan nama ListArrayActivity.java dan set sebagai main activity,
lalu modifikasi method onCreate() :

2.2 Buat layout listarray_layout.xml seperti berikut :

Mobile Programming [STT-NF]

Page 13

2.3 Set AndroidManifest.xml :

2.4 Run dan hasilnya akan seperti berikut :

Mobile Programming [STT-NF]

Page 14

GRIDVIEW
1. Modifikasi activity_main.xml :

2. Tambahkan gambar ke dalam folder drawable (contoh : andro1.png, andro2.png, andro3.png)

3. Lalu buat class ImageAdapter.java :

Mobile Programming [STT-NF]

Page 15

4. Set adapter pada MainActivity.java, lalu ubah method onCreate() seperti berikut :

Mobile Programming [STT-NF]

Page 16

5. Run dan hasilnya akan seperti berikut :

Mobile Programming [STT-NF]

Page 17