MODUL PRAKTIKUM REKAYASA APLIKASI BERGERAK OLEH ASISTEN REKAYASA APLIKASI BERGERAK

(1)

MODUL PRAKTIKUM REKAYASA APLIKASI BERGERAK

OLEH

ASISTEN REKAYASA APLIKASI BERGERAK

S1 ILMU KOMPUTER JURUSAN ILMU KOMPUTER

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS LAMPUNG

(2)

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.

(3)

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

(4)

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'.

(5)

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.

(6)

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.

(7)

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.

(8)

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.

(9)

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.

(10)

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

(11)

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

(12)

11 4. Mengkonfigurasi Project yang akan dibuat

5. Mengkonfigurasi Icon yang akan digunakan untuk Aplikasi

(13)

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

(14)

13 MainActivity.java → Digunakan untuk proses pada aplikasi

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

9

. Membuka Android pada VirtualBox

(15)

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

(16)

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

(17)

16 -Android VirtualBox Menjalankan Aplikasi

(18)

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.

(19)

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"

(20)

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.

(21)

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"/>

(22)

21

T U G A S

!

Buatlah Aplikasi sederhana berdasarkan widget-widget yang sudah di pelajari.

(23)

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.

(24)

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

(25)

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>

(26)

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

(27)

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>

(28)

27

Pengenalan Macam-macam Layout

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="wra p_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"/>

(29)

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>

(30)

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.

(31)

30 0

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

0 2

xmlns:tools="http://schemas.android.com/tools"android:layout_width=" match_parent" 0 3 android:layout_height="match_parent"android:paddingLeft="@dimen/activity_horizontal_margin" 0 4 android:paddingRight="@dimen/activity_horizontal_margin" 0 5 android:paddingTop="@dimen/activity_vertical_margin" 0 6 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

(32)

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)

(34)

33

Pengenalan Macam-macam Layout

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"

(35)

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

(36)

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.OnTabSelectedList ener() { @Override publicvoidonTabSelected(TabLayout.Tab tab) { tab.getPosition(); tab.getText(); } @Override publicvoidonTabUnselected(TabLayout.Tab tab) { } @Override publicvoidonTabReselected(TabLayout.Tab tab) { } }); } // rest of code }

(37)

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

(38)

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.

(39)

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

(40)

39 dengan ListView yang kita buat pada file layout.xml. Jalankan project, maka ListView tampil seperti berikut ini.

(41)

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

(42)

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

(43)

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" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_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:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Tutorials point "

android:textColor="#ff87ff09" android:textSize="30dp" android:layout_above="@+id/imageButton" android:layout_centerHorizontal="true" android:layout_marginBottom="40dp"/> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageButton"

(44)

43 android:src="@drawable/abc" android:layout_centerVertical="true" android:layout_centerHorizontal="true"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Small font"

android:id="@+id/button" android:layout_below="@+id/imageButton" android:layout_centerHorizontal="true"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"

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:layout_width="wrap_content" android:layout_height="wrap_content"

android:text="Hello World!"

android:id="@+id/textView"

android:layout_below="@+id/button2"

android:layout_centerHorizontal="true"

android:textSize="25dp"/>

</RelativeLayout>

(45)

44

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

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

(46)

45 </application>

(47)

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.

(48)

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.

(49)

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

(50)

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

(51)

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

(52)

51

Tugas!

(53)

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.

(54)

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

(55)

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

(56)

55 Berikut ini adalah tampilan dari running APK :

(57)

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.

(58)

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.

(59)

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

(60)

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.

(61)

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

} }

(62)

61 Langkah 3 -ListDisplay.java

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 " xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".ListActivity"> <ListView android:id="@+id/mobile_list" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout>

<stringname="app_name">ListDisplay</string> <stringname="action_settings">Settings</string> </resources>

(63)

62 Langkah 5 –Running

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

(64)

63

Tugas !

Buat aplikasi sederhana dengan tema masing-masing untuk setiap praktikan dan implementasikan listview yang telah dipelajari hari ini.

(65)

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.

(66)

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

(67)

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) - TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS. toMinutes((long) startTime)))

(68)

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) - TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS. toMinutes((long) startTime))) ); seekbar.setProgress((int)startTime); myHandler.postDelayed(this, 100); } };

publicvoid pause(View view){

Toast.makeText(getApplicationContext(), "Pausing sound", Toast.LENGTH_SHORT).show();

mediaPlayer.pause();

pauseButton.setEnabled(false); playButton.setEnabled(true); }

publicvoid forward(View view){ int temp = (int)startTime;

(69)

68 startTime = startTime + forwardTime;

mediaPlayer.seekTo((int) startTime); }

else{

Toast.makeText(getApplicationContext(), "Cannot jump forward 5 seconds",

Toast.LENGTH_SHORT).show(); }

}

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

Toast.LENGTH_SHORT).show(); }

}

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

(70)

69 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" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <ImageButton android:id="@+id/imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="285dp" android:layout_marginLeft="80dp" android:onClick="play" android:src="@android:drawable/ic_media_play"/> <ImageButton android:id="@+id/imageButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="285dp" android:layout_marginLeft="140dp" android:onClick="pause" android:src="@android:drawable/ic_media_pause"/>

(71)

70 <ImageButton android:id="@+id/imageButton3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="285dp" android:layout_marginLeft="200dp" android:onClick="forward" android:src="@android:drawable/ic_media_ff"/> <ImageButton android:id="@+id/imageButton4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="285dp" android:layout_marginLeft="20dp" android:onClick="rewind" android:src="@android:drawable/ic_media_rew"/> <SeekBar android:id="@+id/seekBar1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="235dp"/> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="260dp" android:layout_marginLeft="200dp" android:text="@string/inital_Time" android:textAppearance="?android:attr/textAppearanceSmall"/>

(72)

71 <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="260dp" android:layout_marginLeft="15dp" android:text="@string/inital_Time" android:textAppearance="?android:attr/textAppearanceSmall"/> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="40dp"

android:text="Now Playing : "

android:textAppearance="?android:attr/textAppearanceMedium"/> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="40dp" android:layout_marginLeft="130dp"/> <ImageView android:id="@+id/imageView1" android:layout_width="170dp" android:layout_height="170dp" android:layout_marginTop="70dp" android:layout_marginLeft="60dp" android:src="@drawable/music"/>

(73)

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>

(74)

73 Running program :

(75)

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.

(76)

75 1. Buatlah class HttpUtils dengan kode berikut

(77)

76 2. Tambahkan kode berikut pada activity_main.xml

(78)

77 3. Tambahkan kode berikut pada MainActivity.java

6. Tambahkan permission berikut pada android manifest

(79)

78

Tugas!

Buatlah JSON anda sendiri menggunakan hostingan gratis kemudian buatlah aplikasi android nya.

(80)

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.

(81)

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.

(82)

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.

(83)

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

(84)

83 Change the layout of your activity to the following code.

(85)

84 Change your activity class to the following code.

(86)

(87)

86 Hasil Tampilan :