MODUL PRAKTIKUM REKAYASA APLIKASI …lab.ilkom.unila.ac.id/modul/semester genap/S1 Ilmu...

MODUL PRAKTIKUM REKAYASA APLIKASI BERGERAK

OLEH

ASISTEN REKAYASA APLIKASI BERGERAK

S1 ILMU KOMPUTER

JURUSAN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS LAMPUNG

2017

1

Pengenalan Android dan Installasi

IDEAndroid Studio

Tujuan Instruksional :

Pokok bahasan ini menjelaskan tentangpengenalan system operasi android dan

installasi IDE

Kompetensi yang Diharapkan :

1. Mahasiswa mampu memahami apa itu OS Android

2. Mahasiswa mampu melakukan installasi IDE Android Studio.

Waktu Pertemuan : 120 menit

2

Apa itu Android?

Installasi IDE Android Studio

- Instalasi Java Development Kit (JDK)

Download melalui URL :

http://www.oracle.com/technetwork/java/javase/downloads/index.html

- Download Androd Studio

Download melalui URL :

http://developer.android.com/sdk/index.html

Android merupakan sistem operasi yang dikembangkan untuk perangkat

mobile berbasis Linux. Pada awalnya sistem operasi ini dikembangkan oleh

Android Inc. Yang kemudian dibeli oleh Google pada tahun 2005.

Dalam usaha mengembangkan Android, pada tahun 2007 dibentuklah Open

Handset Alliance (OHA), sebuah konsorsium dari beberapa perusahaan,

yaitu Texas Instruments, Broadcom Corporation, Google, HTC, Intel, LG,

Marvell Technology Group, Motorola, Nvidia, Qualcomm, Samsung

Electronics, Sprint Nextel, dan T-Mobile dengan tujuan untuk

mengembangkan standar terbuka untuk perangkat mobile. Pada taanggal 9

Desember 2008, ia diumumkan bahwa 14 anggota baru akan bergabung

Proyek Android, termasuk PacketVideo, ARM Holdings, Atheros

Communications, Asustek Computer Inc, Garmin Ltd, Softbank, Sony

Ericsson, Toshiba Corp dan Vodafone Group Plc

3

Setelah selesai men-download, cari file Android Studio instalasi executable

(bernama android-studio-bundle- <version> .exe) di jendela Windows Explorer dan klik dua

kali untuk memulai proses instalasi, klik tombol Yes pada dialog User Account Control jika

muncul - klik pada tombol 'Next'.

Klik tombol 'Next' ketika layar berikutnya (ditampilkan di bawah) akan muncul.

4

Layar berikutnya (ditampilkan di bawah) adalah perjanjian lisensi. Jika Anda setuju untuk itu,

klik pada tombol "I Agree".

Layar berikutnya (ditampilkan di bawah) adalah pengaturan konfigurasi di mana semua jalur

instalasi yang akan ditampilkan. Mengubahnya jika Anda inginkan dan klik tombol 'Next'

untuk melanjutkan.

5

Layar berikutnya adalah untuk menciptakan sebuah shourcuts pada start menu - biarkan saja

pengaturan ini default dan klik pada tombol 'Install'.

Instalasi yang sebenarnya dari Android Studio akan mulai - dan tunggu proses instalasi

hingga Completed.

6

Setelah instalasi telah selesai, maka layar seperti di bawah akan muncul. Klik tombol 'Next'.

Setelah itu masuk kehalaman Finish. Centang Start Android Studio jika kalian ingin memulai

membuka Android Studio untuk pertama kali - Klik tombol Finish.

7

Pertama kali Android Studio diluncurkan setelah diinstal, dialog akan muncul menyediakan

opsi untuk mengimpor pengaturan dari versi Android Studio sebelumnya. Jika Anda memiliki

pengaturan dari versi sebelumnya dan ingin mengimpor mereka ke dalam instalasi terbaru,

pilih opsi yang sesuai dan lokasi. Atau, menunjukkan bahwa Anda tidak perlu mengimpor

pengaturan sebelumnya.

Jika kalian baru pertama kali menginstal Android Studio sebelumnya. Pilih "I do not have a

previous version of Android Studio or I do not want to import my settings" dan klik

tombol OK untuk melanjutkan.

Dan Anda akan diarahkan kehalaman berikutnya untuk mendownload dan menginstall

komponen Android SDK Tools. Pastikan komputer Anda terhubung dengan

internet. Tunggulah proses download dan menginstall Android SDK tools hingga selesai.

8

Pengenalan IDE dan Pembuatan

Aplikasi Pertama


Pokok bahasan ini dilakukan untuk mengenalkan praktikan tentang IDE dan

membimbing dalam pembuatan aplikasi android dasar.


Mahasiswa diharapkan dapat memahami tentang IDE dan dapat membuat aplikasi

pertama di android.


9

1. IDE

IDE merupakan singkatan dari Integrated Development Environment yang merupakan

Lembar Kerja Terpadu untuk pengembangan program. Adapun kegunaan IDE tersebut

adalah:

1. Menulis Naskah Program

2. Mengkompilasi Program(Compile)

3. Melakukan Pengujian Program(Debugging)

4. Mengaitkan Object dan Library ke Program(Linking)

5. Menjalankan Program(Running)

Eclipse adalah IDE yg paling populer untuk pengembangan Android, karena memiliki

Android plug-in yg tersedia untuk memfasilitasi pengembangan android. Eclipse juga

mendapat dukungan langsung dari Google untuk menjadi IDE pengembangan aplikasi

Android (adanya penambahan plug-in untuk eclipse untuk membuat project android di

mana source software langsung dari situs resminya Google). IDE lainnya adalah Netbeans,

Android Studio, Basic4Android, dan masih banyak lagi.

Aplikasi android dapat dikembangkan pada OS berikut:

- Windows XP Vista/7/8/10

- Mac OS X (Mac OS X 10.4.8 atau lebih baru)

- Linux

2. Membuat Aplikasi Pertama di Android

A. Alat dan Bahan:

1. Komputer dengan sistem operasi minimal Windows XP

2. Program aplikasi Eclipse atau Android Studio

3. Modul Praktikum Rekayasa Aplikasi Bergerak

10

B. Langkah

1. Buka Aplikasi Eclipse

Maka akan muncul Workspace Launcher untuk menentukan folder yang digunakan

untukmenyimpan project-project Eclipse nantinya, simpan pada folder :

Ketik : home/”npm_anda” → OK

2. Lalu buat project baru :

Click File → New → Android Application Project

3. Masukkan Nama Aplikasi, Nama Project, dan Nama Package Aplikasi yang akan

dibuat

11

4. Mengkonfigurasi Project yang akan dibuat

5. Mengkonfigurasi Icon yang akan digunakan untuk Aplikasi

6. Membuat Activity pada Project : - Pilih Blank Activity

12

7. Masukkan Nama untuk Activity utama yang akan dibuat, Setelah itu Click Finish

8. Aplikasi Android Baru telah dibuat

13

MainActivity.java → Digunakan untuk proses pada aplikasi

Activity_main.xml → Membuat tampilan antarmuka (Graphical User Interface)

9

. Membuka Android pada VirtualBox

- Buka VirtualBox → Jalankan Android

14

-

L

i

h

a

t

A

l

a

m

at IP dari Android VirtualBox untuk dihubungkan dengan eclipse

- Android Pada VirtualBox

10. Menghubungkan PC/Computer dengan Android VirtualBox

- Buka Terminal/CommandPrompt

15

- Ketik adb connect <<IP address dari Android VirtualBox>>

- default : adb connect 192.168.56.101

11. Menjalankan Aplikasi

- Klik Kanan Pada Project (NewProject)

- Klik Run As → Android Application

-Pilih Device (Nama Android VirtualBox)

16

-Android VirtualBox Menjalankan Aplikasi

17

Pengenalan Macam – macam Widget

Android


Pokok bahasan ini menjelaskan tentang pengenalan widget-widget yang ada di

android.


1. Mahasiswa mampu memahami widget-widget yang ada di android.

2. Mahasiswa mampu membuat aplikasi sederhana menggunakan widget-widget yang

ada.


18

� TextView

Sebuah TextView menampilkan teks ke pengguna. Sebuah TextView adalah editor teks

lengkap, namun kelas dasar dikonfigurasi untuk tidak mengizinkan pengeditan seperti

EditText.

Contoh:

� EditText

EditText seperti TextView yang memiliki kemampuan untuk di edit.

Contoh:

<TextView android:id="@+id/text_id" android:layout_width="wrap_content" android:layout_height="wrap_content" android:capitalize="characters" android:text="@string/hello_world"/>

<EditText android:id="@+id/edittext" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignLeft="@+id/button" android:layout_below="@+id/textView1" android:layout_marginTop="61dp" android:ems="10" android:text="@string/enter_text"android:inputType="text"/>

19

� Button

Tombol yang dapat ditekan, atau diklik, oleh pengguna untuk melakukan suatu tindakan.

Contoh:

� ImageButton

Tombol yang menampilkan gambar yang memiliki fungsi yang sama dengan Button.

Contoh:

� CheckBox

Merupakan kotak yang dapat di on dan off kan oleh pengguna.

<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_below="@+id/edittext3" android:layout_marginTop="35dp" android:text="@string/click_button"/>

<ImageButton android:id="@+id/imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignRight="@+id/textView1" android:layout_below="@+id/textView1" android:layout_marginRight="35dp" android:layout_marginTop="32dp" android:contentDescription= "@string/android_launcher_image" android:src="@drawable/ic_launcher"/>

20

Contoh:

� RadioButton

Seperti CheckBox namun berbentuk lingkaran dan hanya bisa di pilih salah satu dari

beberapa pilihan.

Contoh:

<CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_below="@+id/textView1" android:layout_marginTop="88dp" android:text="@string/check_one"/>

<RadioButton android:id="@+id/radio0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="@string/website_radio0"/>

21

T U G A S!

Buatlah Aplikasi sederhana berdasarkan widget-widget yang sudah di

pelajari.

22

Pengenalan Macam-macam Layout

pada Android


Pokok bahasan ini menjelaskan tentang pengenalan layout yang ada di android.


1. Mahasiswa mampu memahami layout yang ada di android.

2. Mahasiswa mampu membuat aplikasi sederhana menggunakan layout yang ada.


23

File .xml dapat dibuat dengan 2 cara :

Atau

Ada 3 macam layout(dari 6 macam) yang secara luas digunakan. Layout-layout tersebut

adalah :

1. Linear Layout

Adalah jenis layout yang mengatur child element (contoh : TextView, Button, CheckBox,

dll) ke dalam suatu baris horizontal ataupun vertikal. Untuk mengatur direction dari Linear

Layout ini sendiri bisa mengedit pada atribut android:orientation.

Untuk lebih jelasnya sebagai contoh:

Misal kita mempunyai suatu text view dengan nama TextView1 dan TextView2

Ketika kita menuliskan kode XML nya kita tulis berurutan TextView1 ditulis pertama dan

TextView2 setelahnya. Jika kita menggunakan android:orientation="vertical" maka

TextView1 akan berada di atas karena ditulis pertama dan TextView2 berada di bawah

TextView1 karena ditulis kedua.

Sedangkan jika kita menggunakan android:orientation="horizontal" maka TextView 1

akan berada di sebelah kiri dan TextView2 akan berada di sebelah kanan.

Layout sendiri memiliki suatu atribut "weight" yang mempengaruhi size atau besar dari

element child yang ada di dalamnya terhadap layar dari suatu device.

Buka Eclipse kamu

Create File -> New -> Android Application Project

Klik kanan di folder res/layout -> New -> Android

XML File

Buat .txt di folder res/layout

Rename file .txt menjadi .xml

24

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<LinearLayoutxmlns: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:orientation="vertical" tools:context=".MainActivity">

<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello_world"/>

<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/click" />

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world"/>

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/click" />

</LinearLayout>

</LinearLayout>

Tampilan yang terjadi setelah kode di eksekusi

25

2. Relative Layout

Relative Layout memiliki karakteristik menempatkan view secara relatif. Posisi dari setiap

view bergantung kepada view yang lain. Mudahnya adalah, programmer memiliki

kebebasan untuk menempatkan view yang diinginkan. Penempatan satu view dapat berupa

di sisi kanan, kiri, atas, ataupun bawah dari view lain. Jika tidak di tetapkan di sisi mana

view akan berada, maka dapat terjadi penumpukan antara satu view dengan view yang

lain.

1

2

3

4

5

6

7

8

9

<RelativeLayoutxmlns: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

26

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" android:layout_alignParentLeft="true" android:id="@+id/tv1" />

<Button android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="@string/click" android:layout_toRightOf="@id/tv1" />

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/click2" android:layout_alignParentBottom="true" /> </RelativeLayout>


27


pada Android

3. Table Layout

Table Layout memiliki karakteristik yang mirip dengan pembuatan layout di HTML. Jika

anda familiar dengan pemprograman web berjenis html, <table> dan <TableLayout />

adalah 2 hal yang hampir sama. TableLayout mengatur tampilan berdasarkan kolom dan

baris. Dan jangan lupa untuk selalu menambahkan tag <TableRow /> jika ingin membuat

baris baru dalam layout.

1

2

3

4

5

6

7

8

9

1

0

1

1

1

2

1

3

1

4

1

5

1

6

1

7

1

8

1

9

2

0

2

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff"

android:shrinkColumns="*" android:stretchColumns="*" >

<TableRow android:layout_height="wrap_content" android:layout_width="match_parent" > <TextView android:layout_width="match_parent"android:layout_height="wrap_content"

android:textSize="18sp"android:text="@string/hello_world" android:layout_span="3" android:padding="18dip"android:background="#b0b0b0" android:textColor="#000"/> </TableRow>

<TableRow android:id="@+id/tableRow1" android:layout_height="wrap_content" android:layout_width="match_parent"> <TextView android:id="@+id/tv1"android:text="@string/hello_world" android:layout_weight="1"android:background="#dcdcdc" android:textColor="#000000" android:padding="20dip"android:gravity="center"/> <Button android:id="@+id/but1"android:text="@string/click" android:layout_weight="1"android:background="#d3d3d3" android:textColor="#000000" android:padding="20dip"android:gravity="center"/>

28

1

2

2

2

3

2

4

2

5

2

6

2

7

2

8

2

9

3

0

3

1

3

2

3

3

3

4

3

5

3

6

3

7

3

8

</TableRow>

</TableLayout>


29

4. GridView

GridView merupakan serangkaian item-item atau daftar yang tersusun secara vertikal

dan horizontal yang dapat ditampilkan secara keseluruhan seperti bentuk kotak. Adapun

contoh nya seperti Kalender yang anda pakai. Nah didalam GridView ini diisi

menggunakan Array ataupun Query Database, sama layaknya dengan ListView. GridView

ini banyak dipakai saat kita membuat sebuah project dengan daftar seperti kotak-kotak.

Pasti anda tahu bagaimana bentuknya. Pada Tutorial kali ini kita akan membuat sebuah

masih mengenai daftar bulan dalam bentuk GridView.

Buatlah komponen GridView. GridView terdapat dalam Container. Untuk membuatnya

dapat dilakukan dengan “Drag and Drop” dari komponen yang tersedia atau langsung

menuliskan script XML.Untuk script XML dapat dituliskan seperti berikut.

30

01

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

02

xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"

03

android:layout_height="match_parent"android:paddingLeft="@dimen/activity_horizontal_margin"

04

android:paddingRight="@dimen/activity_horizontal_margin"

05

android:paddingTop="@dimen/activity_vertical_margin"

06

android:paddingBottom="@dimen/activity_vertical_margin"tools:context=".MainActivity">

07

08 <TextView

09 android:id="@+id/txtJudul"

10 android:layout_width="wrap_content"

11 android:layout_height="wrap_content"

12 android:text="Daftar Bulan"

13 android:textSize="30sp"/>

14

15 <GridView

16 android:id="@+id/gridView1"

17 android:layout_width="fill_parent"

18 android:layout_height="fill_parent"

19 android:layout_alignParentRight="true"

20 android:layout_below="@+id/txtJudul"

21 android:layout_marginTop="50dp"

22 android:columnWidth="100dp"

23 android:horizontalSpacing="20dp"

24 android:numColumns="auto_fit"

25 android:stretchMode="columnWidth"

26 android:verticalSpacing="40dp">

27 </GridView>

28

29 </RelativeLayout>

Langkah 4 : Bukalah MainActivity.java lalu edit seperti berikut ini

01 package com.androidnajwa.gridview;

02

03 import android.app.Activity;

04 import android.os.Bundle;

05 import android.widget.ArrayAdapter;

06 import android.widget.GridView;

07

08 publicclass MainActivity extends Activity {

31

09 private String[] bulan = {"Januari","Februari","Maret",

10 "April","Mei","Juni","Juli",

11 "Agustus","September","Oktober",

12 "Nopember","Desember"};

13

14 private GridView grid1;

15

16 private ArrayAdapter<String> adapter;

17

18 @Override

19 protected void onCreate(Bundle savedInstanceState) {

20 super.onCreate(savedInstanceState);

21 setContentView(R.layout.activity_main);

22

23 grid1 = (GridView) findViewById(R.id.gridView1);

24

25 //membuat adapter agar item bulan menempel pada gridview

26 adapter = new ArrayAdapter<String>(MainActivity.this,

27 android.R.layout.simple_list_item_1,

28 bulan);

29 //menerapkan adapter pada objek grid1

30 grid1.setAdapter(adapter);

31

32 //penggunaan listenernya mirip dengan listener pada listview

33 }

34

35 }

Sampai tahap disini sudah selesai. Sekarang lakukan testing, dengan cara

menekan Shift+F10.

33


pada Android

5. TabLayout

TabLayout adalah salah satu elemen utama dan paling sering digunakan sebagai menu

navigasi pada aplikasi Android. Biasanya TabLayout dikombinasikan dengan Fragment,

Fragment tersebut akan berganti sesuai dengan menu Tab yang diklik. Namun kali ini kita

hanya akan membahas tentang implementasi TabLayout-nya saja, tidak sampai ke bagian

TabLayout dan Fragment. Lain kali saja kita bahas soal itu

Membuat Material TabLayout menggunakan Android Support Library

Sebelum kita memulai belajar untuk membuat TabLayout pada Android, ada beberapa

pre-requisites yang sebaiknya kalian pelajari terlebih dahulu :

Pre-requisites

• Mengenal Android Material Design

• Membuat Project Hello World dengan Android Studio

• Membuat Color Resources untuk Material Design Theme

Setelah membuat project baru pada Android Studio, kalian harus mengimpor beberapa

dependencies seperti berikut :

1

2

3

4

5

6

dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:design:22.2.0' compile 'com.android.support:support-v4:22.2.0' }

Kemudian, yang perlu kita buat pertama-tama adalah sebuah layout xml yang mempunyai

elemen TabLayout di dalamnya, contohnya seperti layout activity_tab.xml di bawah ini :

01

02

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coor_Layout"

34

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/ic_bg_tab">



<android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_below="@id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/twoh_primary" android:scrollbars="horizontal" app:tabGravity="center" app:tabMode="scrollable"/>



</RelativeLayout>

Berikutnya, pada file Activity di java kita bisa memanggil elemen TabLayout pada xml

dengan cara seperti saat kita memanggil elemen layout lainnya :

0

1

0

2

0

3

0

4

0

5

0

6

0

7

0

8

0

9

1

0

1

1

1

2

1

packageid.web.twoh.coolandroiddesign;

importandroid.os.Bundle; importandroid.support.design.widget.TabLayout; importandroid.support.v7.app.ActionBar; importandroid.support.v7.app.AppCompatActivity; importandroid.support.v7.widget.Toolbar;

/** * Created by Hafizh Herdi on 8/3/2015 www.twoh.co */ publicclassTabLayoutActivity extendsAppCompatActivity{

privateTabLayout tabLayout;

@Override protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab);

// rest of code

tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER); tabLayout.addTab(tabLayout.newTab().setText("Home")); tabLayout.addTab(tabLayout.newTab().setText("Profile")); tabLayout.addTab(tabLayout.newTab().setText("Settings")); tabLayout.addTab(tabLayout.newTab().setText("More")); tabLayout.addTab(tabLayout.newTab().setText("About"));

35

3

1

4

1

5

1

6

1

7

1

8

1

9

2

0

2

1

2

2

2

3

2

4

2

5

2

6

2

7

2

8

2

9

3

0

3

1

3

2

3

3

3

4

3

5

3

6

3

7

3

tabLayout.addTab(tabLayout.newTab().setText("Help")); tabLayout.addTab(tabLayout.newTab().setText("Friends"));

tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() { @Override publicvoidonTabSelected(TabLayout.Tab tab) { tab.getPosition(); tab.getText(); }

@Override publicvoidonTabUnselected(TabLayout.Tab tab) {

}

@Override publicvoidonTabReselected(TabLayout.Tab tab) {

} }); } // rest of code }

36

8

3

9

4

0

4

1

Pada kode di atas kita bisa lihat betapa mudahnya untuk menambahkan tab baru pada

TabLayout, hanya dengan memanggil fungsi addTab() dan kemudian membuat tab baru

dengan memanggil fungsi newTab() pada TabLayout. Hal ini memungkinkan kita untuk

menambahkan tab baru secara programmatically, ataupun saat aplikasi berjalan.

Kemudian untuk mendeteksi saat suatu tab diselect (diklik) kita bisa mengeset

onTabSelectedListener() yang akan memberikan callback ketika suatu tab diklik. Kita bisa

mengetahui tab mana yang diklik dengan memanggil tab.getPosition() untuk

mendapatkan posisi tab mana yang diklik atau tab.getText() untuk mendapatkan text title dari

tab yang terpilih tersebut. Dari situ kita bisa menentukan mana fragment atau layout yang

akan ditampilkan berdasarkan tab yang kita pilih.

Sedangkan untuk element TabLayout pada xml ada beberapa atribut tambahan yang bisa kita

set, seperti

app:tabGravity="center" app:tabMode="scrollable"

tabGravity berfungsi untuk mengeset tata letak posisi dari TabLayout tersebut, dengan

memberikan value center maka kita mengeset posisi TabLayout tersebut rata tengah.

Kemudian tabMode berfungsi untuk mengatur apakah TabLayout tersebut fixed

atau scrollable, apabila kita memilih scrollable maka apabila jumlah tab membuat ukuran tab

melebihi lebar layar maka tab akan bisa discroll secara horizontal. Fixed akan membuat

ukuran tab selalu sesuai layar berapapun jumlah tab yang ada pada TabLayout.

Demo

Ketika dijalankan, maka inilah hasil dari TabLayout yang telah kita buat :

37

7. ListView

ListView dikatakan sederhana atau komplek ditentukan oleh kompleksitas item dari

ListView tersebut. Jika masing-masing item dari ListView menampilkan sebuah kata atau

kalimat saja, maka ListView tersebut sederhana. Jika masing-masing item dari ListView

memiliki isi yang komplek seperti item dari sebuah status jejaring sosial dimana pada

masing-masing item memiliki foto profil, nama, waktu, status dan komentar, maka

ListView tersebut adalah ListView komplek. Pembuatan ListView komplek dilakukan

dengan Custom ListView.

38

Untuk membuat ListView sederhana, kita buat terlebih dahulu file layout.xml pada folder

layout. Copy-paste code di bawah ini pada file tersebut.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:id="@+id/id_list" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>

Kemudian kita buat class MainActivity (class ini biasanya sudah dibuat otomatis pada

project). Hapus isi class tersebut kemudian copy-paste code di bawah ini pada class

tersebut.

import android.os.Bundle; import android.app.Activity; import android.widget.ArrayAdapter; import android.widget.ListView; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout); String[] arrName = {"Samsung","Sony","Apple","LG","Motorola", "HTC","Acer","Lenovo","Oppo","Nokia","BlackBerry","Huawei", "ZTE","Meizu","HP","Asus","Panasonic"}; ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, arrName); ListView listView = (ListView) findViewById(R.id.id_list); listView.setAdapter(adapter); } }

Array String[] arrName merupakan kumpulan data String yang akan ditampilkan pada

ListView. Array ini dimasukkan ke dalam object dari ArrayAdapter yang bernama adapter.

Adapter ini merupakan adapter sederhana yang hanya menampilkan sebuah TextView

pada item ListView. Code ListView listView = (ListView) findViewById(R.id.

id_list); membuat object dari class ListView dengan menginisiasi object tersebut

39

dengan ListView yang kita buat pada file layout.xml. Jalankan project, maka ListView

tampil seperti berikut ini.

40

Event Handling


Pokok bahasan ini menjelaskan tentang bagaimana mengatur perintah pada saat event.

Misal saat clik, drag dll


Mahasiswa diharapkan dapat membuat aplikasi android yang telah menggunakan

event handling


41

1. Buat projek baru dengan nama myaplication, lalu

2. Buat file MainActivity.java

1. package com.example.myapplication;

2.

3. publicclassMainActivityextendsActionBarActivity{

4. privateProgressDialog progress;

5. Button b1,b2;

6.

7. @Override

8. protectedvoid onCreate(Bundle savedInstanceState){

9. super.onCreate(savedInstanceState);

10. setContentView(R.layout.activity_main);

11. progress =newProgressDialog(this);

12.

13. b1=(Button)findViewById(R.id.button);

14. b2=(Button)findViewById(R.id.button2);

15. b1.setOnClickListener(newView.OnClickListener(){

16. @Override

17. publicvoid onClick(View v){

18. TextView txtView =(TextView) findViewById(R.id.textView);

19. txtView.setTextSize(25);

20. }

21. });

22.

23. b2.setOnClickListener(newView.OnClickListener(){

24. @Override

25. publicvoid onClick(View v){

26. TextView txtView =(TextView) findViewById(R.id.textView);

27. txtView.setTextSize(55);

28. }

29. });

30. }

31.

32. @Override

33. publicboolean onCreateOptionsMenu(Menu menu){

34. // Inflate the menu; this adds items to the action bar if it is present.

35. getMenuInflater().inflate(R.menu.menu_main, menu);

36. returntrue;

37. }

38.

39. @Override

40. publicboolean onOptionsItemSelected(MenuItem item){

41. // Handle action bar item clicks here. The action bar will

42. // automatically handle clicks on the Home/Up button, so long

43. // as you specify a parent activity in AndroidManifest.xml.

44.

45. int id = item.getItemId();

46.

47. //noinspection SimplifiableIfStatement

48. if(id == R.id.action_settings){

49. returntrue;

50. }

51. returnsuper.onOptionsItemSelected(item);

52. }

53. }

42

3. Buat file res/layout/activity_main.xml

<RelativeLayoutxmlns: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"



tools:context=".MainActivity">

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Event Handling "

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:textSize="30dp"/>

<TextView




android:text="Tutorials point "

android:textColor="#ff87ff09"

android:textSize="30dp"

android:layout_above="@+id/imageButton"


android:layout_marginBottom="40dp"/>

<ImageButton



android:id="@+id/imageButton"

43

android:src="@drawable/abc"

android:layout_centerVertical="true"

android:layout_centerHorizontal="true"/>

<Button



android:text="Small font"

android:id="@+id/button"

android:layout_below="@+id/imageButton"

android:layout_centerHorizontal="true"/>

<Button



android:text="Large Font"

android:id="@+id/button2"

android:layout_below="@+id/button"

android:layout_alignRight="@+id/button"

android:layout_alignEnd="@+id/button"/>

<TextView



android:text="Hello World!"

android:id="@+id/textView"

android:layout_below="@+id/button2"


android:textSize="25dp"/>

</RelativeLayout>

4. Buat file res/values/strings.xml

44

<?xml version="1.0" encoding="utf-8"?>

<resources>

<stringname="app_name">myapplication</string>

<stringname="action_settings">Settings</string>

</resources>

5. Buat fileAndroidManifest.xml


<manifestxmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.myapplication"

android:versionCode="1"

android:versionName="1.0">

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="22"/>

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme">

<activity

android:name="com.example.myapplication.MainActivity"

android:label="@string/app_name">

<intent-filter>

<actionandroid:name="android.intent.action.MAIN"/>

<categoryandroid:name="android.intent.category.LAUNCHER"/>

</intent-filter>

</activity>

45

</application>

</manifest>

46

Intent dan Activity


Pokok bahasan ini menjelaskan tentang bagaimana membuat sebuah aplikasi yang ada

di android yang bisa berpindah dari satu halaman ke halaman lain, atau biasa disebut

dengan intent.


Mahasiswa diharapkan dapat memahami bagaimana membuat sebuah aplikasi android

yang tidak hanya menggunakan satu halaman saja, tetapi aplikasi yang bisa berpindah

dari satu halaman ke halaman lainnya.


47

1. Buka Aplikasi Eclipse, kemudian buat sebuah proyek baru. Setelah itu tambahkan layout

baru dengan nama second_main.xml, dan juga tambahkan clas java baru dengan nama

SecondActivity.java . Jadi nantinya kita akan bekerja di keempat class yaitu,

activity_main.xml, second_activity.xml, MainActiviy.java, SecondActivity.java. Ataupun

seperti pada gambar.

48

2. Buka class activity_main.xml dan tambahkan baris program berikut

3. Selanjutnya buka class second_main.xml dan tambahkan baris program berikut

49

4. Setelah itu buka class MainActivity.java dan tambahkan baris program berikut

50

5. Setelah itu buka class SecondActivity.java dan tambahkan baris program berikut

Adapun outputnya yaitu :

51

Tugas!

Membuat Sebuah Program Android yang bisa berpindah halaman.

52

Parameter Intent

A. Parameter Intent


Menjelaskan tentang bagaimana menghubungkan dua Activity di Android dengan halaman

lain dengan membawa beberapa pesan(parameter) yang nantinya akan disimpan dalam Intent.

Kompetisi Yang Diharapkan :

Mahasiswa mampu memahami bagaimana membuat sebuah aplikasi android yang tidak

hanya menggunakan satu halaman saja, tetapi aplikasi yang bisa berpindah dari satu halaman

ke halaman lain dengan membawa beberapa pesan(parameter) yang nantinya akan disimpan

dalam intent.

Waktu Pertemuan : 120 Menit.

53

Buka Aplikasi Eclipse, kemudian buat sebuah proyek baru. Setelah itu tambahkan layout baru

dengan nama activity2.xml, dan juga tambahan class java baru dengan nama Activity.java.

Jadi nanti kita akan bekerja di keempat class yaitu : activity_main.xml, MainActivity.java,

activity2.xml dan Activity2.java.

1. Berikut ini isi dari class Activity_main.xml

2. Berikut ini isi codingan dari class java : MainActivity.java

54

3. Berikut ini isi codingan dari class java : Activity2.java

4. Berikut ini isi codingan dari class xml : Activity2.xml

55

Berikut ini adalah tampilan dari running APK :

56

Custom Intent


Menjelaskan tentang bagaimana menghubungkan dua Activity di Android dengan

halaman lain dengan membawa beberapa pesan(parameter) yang nantinya akan

diterima oleh aplikasi lain.

Kompetisi Yang Diharapkan :

Mahasiswa mampu memahami bagaimana membuat sebuah aplikasi android yang

tidak hanya menggunakan satu halaman saja, tetapi aplikasi yang bisa berpindah dari

satu halaman ke halaman lain dengan membawa beberapa pesan(parameter) yang

nantinya akan diterima oleh aplikasi lain.

Waktu Pertemuan : 120 Menit.

57

Buka Aplikasi Eclipse, kemudian buat sebuah proyek baru. Tidak ada penambahan layout

baru. Jadi nanti kita akan bekerja di dua class yaitu : activity_main.xml dan

MainActivity.java.

1. Berikut ini isi codingan dari xml : activity_main.xml

58

2. Berikut ini isi codingan dari java : MainActivity.java

Berikut ini hasil running APK :

59

Android ListView


Pokok bahasan ini akan dipelajari cara untuk membuat lisview, yaitu view yang

mengelompokan beberapa item dna menampilkan secara vertical dan dapat di scroll.


1. Mahasiswa mampu memahami proses proses pembuatan listview.

2. Mahasiswa mampu mengimplementasikan listview pada aplikasi yang lebih

advance.


60

Langkah 1 – Membuat Project

Buat sebuah project android baru dengan nama project ListDisplay dan

packagecom.example.ListDisplay

Langkah 2 -ListDisplay.java

Berikut merupakan isi konten main activity

filesrc/com.example.ListDisplay/ListDisplay.java yang telah dimodifikasi :

package com.example.ListDisplay;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.ArrayAdapter;

import android.widget.ListView;

publicclassListDisplayextendsActivity{

// Array of strings...

String[] mobileArray

={"Android","IPhone","WindowsMobile","Blackberry","WebOS","Ubuntu","Windows7"

,"Max OS X"};

@Override

protectedvoid onCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ArrayAdapter adapter =newArrayAdapter<String>(this,

R.layout.activity_listview, mobileArray);

ListView listView =(ListView)findViewById(R.id.mobile_list);

listView.setAdapter(adapter);

}

}

61


Berikut merupakan isi konten fileres/layout/activity_main.xml :


Berikut merupakan isi konten fileres/values/strings.xmlyang ditambahkan dua konstanta

baru:


Berikut merupakan isi konten fileres/layout/activity_listview.xml :




<TextViewxmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/label"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="10dip"

android:textSize="16dip"

android:textStyle="bold">

</TextView>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android

"




android:orientation="vertical"

tools:context=".ListActivity">

<ListView

android:id="@+id/mobile_list"


android:layout_height="wrap_content">

</ListView>

</LinearLayout>


<resources>

<stringname="app_name">ListDisplay</string>

<stringname="action_settings">Settings</string>

</resources>

62

Langkah 5 –Running

Jalankan aplikasi yang dibuat dan pahami tiap fungsi-fungsinya dna bagaimana proses

tersebut berjalan.

63

Tugas !

Buat aplikasi sederhana dengan tema masing-masing untuk setiap

praktikan dan implementasikan listview yang telah dipelajari hari ini.

64

Pembuatan Aplikasi Music Player


Pokok bahasan ini menjelaskan tentang pembuatan aplikasi Music Player pada

Android.


Mahasiswa diharapkan dapat membuat aplikasi Music Player pada Android dengan

menambahkan dan mengedit sesuai keinginan mahasiswa sendiri.


65

Main Activity.java

package com.example.musicplayer;

import java.util.concurrent.TimeUnit;

import android.media.MediaPlayer;

import android.os.Bundle;

import android.os.Handler;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.widget.ImageButton;

import android.widget.SeekBar;

import android.widget.TextView;

import android.widget.Toast;

publicclass MainActivity extends Activity {

public TextView songName,startTimeField,endTimeField;

private MediaPlayer mediaPlayer;

privatedoublestartTime = 0;

privatedoublefinalTime = 0;

private Handler myHandler = new Handler();

privateintforwardTime = 5000;

privateintbackwardTime = 5000;

private SeekBar seekbar;

private ImageButton playButton,pauseButton;

publicstaticintoneTimeOnly = 0;

@Override

protectedvoid onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

66

mediaPlayer = MediaPlayer.create(this, R.raw.alones);

seekbar.setClickable(false);

pauseButton.setEnabled(false);

}

publicvoid play(View view){

Toast.makeText(getApplicationContext(), "Playing sound",

Toast.LENGTH_SHORT).show();

mediaPlayer.start();

finalTime = mediaPlayer.getDuration();

startTime = mediaPlayer.getCurrentPosition();

if(oneTimeOnly == 0){

seekbar.setMax((int) finalTime);

oneTimeOnly = 1;

}

endTimeField.setText(String.format("%d min, %d sec",

TimeUnit.MILLISECONDS.toMinutes((long) finalTime),

TimeUnit.MILLISECONDS.toSeconds((long) finalTime) -

TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.

toMinutes((long) finalTime)))

);

startTimeField.setText(String.format("%d min, %d sec",

TimeUnit.MILLISECONDS.toMinutes((long) startTime),

TimeUnit.MILLISECONDS.toSeconds((long) startTime) -


toMinutes((long) startTime)))

);

67

seekbar.setProgress((int)startTime);

myHandler.postDelayed(UpdateSongTime,100);

pauseButton.setEnabled(true);

playButton.setEnabled(false);

}

private Runnable UpdateSongTime = new Runnable() {

publicvoid run() {

startTime = mediaPlayer.getCurrentPosition();

startTimeField.setText(String.format("%d min, %d sec",

TimeUnit.MILLISECONDS.toMinutes((long) startTime),

TimeUnit.MILLISECONDS.toSeconds((long) startTime) -


toMinutes((long) startTime)))

);

seekbar.setProgress((int)startTime);

myHandler.postDelayed(this, 100);

}

};

publicvoid pause(View view){

Toast.makeText(getApplicationContext(), "Pausing sound",


mediaPlayer.pause();

pauseButton.setEnabled(false);

playButton.setEnabled(true);

}

publicvoid forward(View view){

int temp = (int)startTime;

if((temp+forwardTime)<=finalTime){

68

startTime = startTime + forwardTime;

mediaPlayer.seekTo((int) startTime);

}

else{

Toast.makeText(getApplicationContext(),

"Cannot jump forward 5 seconds",


}

}

publicvoid rewind(View view){

int temp = (int)startTime;

if((temp-backwardTime)>0){

startTime = startTime - backwardTime;

mediaPlayer.seekTo((int) startTime);

}

else{

Toast.makeText(getApplicationContext(),

"Cannot jump backward 5 seconds",


}

}

@Override

publicboolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

returntrue;

}

69

activity_main.xml

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"




android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"



tools:context=".MainActivity">

<ImageButton

android:id="@+id/imageButton1"



android:layout_marginTop="285dp"

android:layout_marginLeft="80dp"

android:onClick="play"

android:src="@android:drawable/ic_media_play"/>

<ImageButton






android:onClick="pause"

android:src="@android:drawable/ic_media_pause"/>

70

<ImageButton






android:onClick="forward"

android:src="@android:drawable/ic_media_ff"/>

<ImageButton






android:onClick="rewind"

android:src="@android:drawable/ic_media_rew"/>

<SeekBar

android:id="@+id/seekBar1"



android:layout_marginTop="235dp"/>

<TextView






android:text="@string/inital_Time"

android:textAppearance="?android:attr/textAppearanceSmall"/>

71

<TextView






android:text="@string/inital_Time"

android:textAppearance="?android:attr/textAppearanceSmall"/>

<TextView





android:text="Now Playing : "

android:textAppearance="?android:attr/textAppearanceMedium"/>

<TextView





android:layout_marginLeft="130dp"/>

<ImageView

android:id="@+id/imageView1"

android:layout_width="170dp"

android:layout_height="170dp"



android:src="@drawable/music"/>

72

MusicPlayer Manifest

<?xmlversion="1.0"encoding="utf-8"?>

<manifestxmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.musicplayer"

android:versionCode="1"

android:versionName="1.0">

<uses-sdk

android:minSdkVersion="16"

android:targetSdkVersion="16"/>

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme">

<activity

android:name=".MainActivity"

android:label="@string/app_name">

<intent-filter>

<actionandroid:name="android.intent.action.MAIN"/>

<categoryandroid:name="android.intent.category.LAUNCHER"/>

</intent-filter>

</activity>

</application>

</manifest>

73

Running program :

74

JSON Parsing


Pokok bahasan ini menjelaskan tentang ekstraksi data JSON dari internet


Mahasiswa diharapkan dapat memahami dan mengimplementasikan proses ekstarksi

data JSON dari internet.


75

1. Buatlah class HttpUtils dengan kode berikut

76

2. Tambahkan kode berikut pada activity_main.xml

77

3. Tambahkan kode berikut pada MainActivity.java

6. Tambahkan permission berikut pada android manifest

<uses-permission android:name="android.permission.INTERNET" />

78

Tugas!

Buatlah JSON anda sendiri menggunakan hostingan gratis kemudian

buatlah aplikasi android nya.

79

Drag and Drop


Pokok bahasan ini menjelaskan tentang Fungsi Drag and Drop pada Android


Mahasiswa diharapkan dapat mengerti penemparan dan cara menggunakan fungsi

drag and drop yang sudah dijelaskan.


80

1. Menggunakan drag and drop in Android

Untuk menggunakan drag and drop maka dibutuhkan android version 4.0

2. Allowing a view to be dragged

Untuk menggunakan menyeret pandangan Anda mendaftar OnTouchListener atau

LongClickListener pada tampilan yang dapat diseret.

startDrag metode View yang memulai operasi drag. Dalam metode ini Anda juga

menentukan data yang akan diteruskan ke target penurunan melalui sebuah contoh dari

ClipData.

Anda juga lolos ke metode startDrag contoh DragShadowBuilder. Objek ini menentukan

gambar yang digunakan untuk operasi drag. Misalnya Anda dapat lulus dalam pandangan

langsung, yang menunjukkan gambar dari pandangan selama operasi drag.

Setup operasi drag ini dalam pendengar sentuhan ditunjukkan dalam contoh berikut.

3. Defining drop target

81

Pandangan yang dapat target penurunan mendapatkan contoh dari OnDragListener

ditugaskan. Dalam penurunan pendengar ini Anda menerima panggilan punggung dalam

kasus hambatan yang telah ditetapkan dan peristiwa penurunan terkait.

*DragEvent.ACTION_DRAG_STARTED *DragEvent.ACTION_DRAG_ENTERED *

DragEvent.ACTION_DRAG_EXITED *DragEvent.ACTION_DROP *

DragEvent.ACTION_DRAG_ENDED

Sebuah tampilan dengan OnDragListener yang digunakan sebagai zona degradasi,

mendapat OnDragListener diberikan melalui setOnDragListener tersebut.

3. Exercise: Drag and drop

82

3.1 Create XML Drawables

In this exercise you are using XML drawables.

In this part you create several XML drawables in the res/drawable folder.

Create the following shape.xml file in this folder.

3.2 Activity and layout

Also create the following shape_droptarget.xml file.

83

Change the layout of your activity to the following code.

84

Change your activity class to the following code.

86

Hasil Tampilan :

MODUL PRAKTIKUM REKAYASA APLIKASI …lab.ilkom.unila.ac.id/modul/semester genap/S1 Ilmu...

Documents

Transcript of MODUL PRAKTIKUM REKAYASA APLIKASI …lab.ilkom.unila.ac.id/modul/semester genap/S1 Ilmu...