Aplikasi Gallery Pengetahuan

i
PEMROGRAMAN MOBILE
TI024330
“Aplikasi Gallery Pengetahuan”
Dosen
I Putu Agus Eka Pratama, ST MT.
Oleh:
1. Siti Rohmatul Khasanah (1404505076)
2. Gede Wahyu Pratama (1404505090)
Kelas : C
JURUSAN TEKNOLOGI INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS UDAYANA
2016

ii
KATA PENGANTAR
Puji dan syukur saya haturkan ke hadapan Tuhan Yang Maha Esa, karena
berkat rahmat-Nya, akhirnya penulis mampu menyelesaikan tugas Pemrograman
Mobile. Dalam penyusunan tugas ini penulis mendapat bantuan dari banyak
pihak. Untuk itu, pada kesempatan ini penulis mengucapkan terima kasih kepada:
1. Bapak I Putu Agus Eka Pratama, ST MT. selaku Dosen Pengampu Mata
Kuliah Pemrograman Mobile.
2. Teman-teman dan semua pihak yang telah membantu menyumbangkan ide
dan pemikirannya.
Penulis menyadari bahwa tugas ini jauh dari kata sempurna, baik dalam
penyusunan, bahasan, maupun penulisannya. Oleh karena itu kritik dan saran yang
bersifat membangun dari semua pihak sangat diharapkan demi tercapainya
kesempurnaan dalam tugas ini. Akhir kata, semoga tugas ini dapat memberikan
manfaat bagi semua pihak, sesuai yang diharapkan.
Badung, 17 Mei 2016
Penulis

iii
DAFTAR ISI
KATA PENGANTAR ................................................................................ ii
DAFTAR ISI.............................................................................................. iii
BAB I PENDAHULUAN
1.1 Latar Belakang .................................................................................. 1
1.2 Tujuan dan Manfaat .......................................................................... 1
1.3 Ruang Lingkup.................................................................................. 1
BAB II TINJAUAN PUSTAKA
2.1 Android ................................................................................................. 3
2.2 Java........................................................................................................ 3
2.3 Eclipse................................................................................................... 4
2.4 ADT ...................................................................................................... 4
2.5 SDK....................................................................................................... 4
2.6 Widget................................................................................................... 5
2.7 Toast...................................................................................................... 6
BAB III DESAIN DAN IMPLEMENTASI
3.1 DESAIN................................................................................................ 6
3.1.1 Deskripsi Aplikasi .................................................................... 7
3.1.2 Flowchart Aplikasi ................................................................... 8
3.1.3 Use Case ................................................................................... 9
3.1.4 Sequence Diagram.................................................................... 10
3.1.5 Class Diagram........................................................................... 13
3.2 IMPLEMENTASI................................................................................. 13
3.2.1 Proses Pembutan Aplikasi ........................................................ 13
3.2.1 Halaman Awal .......................................................................... 14
3.2.1 Halaman Mulai ......................................................................... 18
3.2.1 Halaman Galery yang Dipilih................................................... 22
3.2.1 Attrs.xml................................................................................... 25

iv
3.2.1 Halaman Tentang...................................................................... 26
3.2.1 Android Manifest...................................................................... 28
3.2.1 Uji Coba.................................................................................... 29
BAB IV KESIMPULAN
4.1 Kesimpulan ........................................................................................... 40
DAFTAR PUSTAKA ................................................................................... 41

1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Seiring dengan berkembangnya teknologi, media komunikasi dan
informasi semakin banyak memberikan kemudahan terhadap pengguna untuk
saling berinteraksi. Gadget seperti handphone dan tablet merupakan
perkembangan teknologi masa kini.
Gadget sangat banyak digunakan oleh masyarakat umumnya mulai dari
orang tua, remaja, hingga anak-anak sangat tertarik menggunakan gadget yang
rata-rata adalah Android. Namun, aplikasi yang beredar saat ini didominasi oleh
aplikasi untuk orang dewasa. Oleh karena itu, aplikasi gallery pengetahuan ini
diciptakan untuk menambah wawasan anak-anak dalam mengenal lingkungannya
dan peran orang tua juga sangat penting dalam pembelajaran ini.
Aplikasi gallery pengetahuan ini untuk anak-anak yang dikemas dalam
media gambar yang berisi tentang pengenalan benda, buah, bunga, hewan, sayur,
dan warna. Aplikasi ini menggunakan Bahasa Indonesia sebagai bahasa utamanya.
Sehingga diharapkan aplikasi ini dapat membantu orang tua dalam mendidik
anaknya dalam belajar mengenali gambar dan membaca.
1.2 Tujuan dan Manfaat
Tujuan aplikasi Gallery Pengetahuan ini adalah untuk mengenalkan
lingkungan sekitar dan belajar membaca kepada anak-anak usia dini maupun
tingkat sekolah dasar.
Manfaat yang didapat setelah belajar dari aplikasi Gallery Pengetahuan
adalah anak-anak dapat mengenali gambar, membaca cepat, dan mengetahui
Bahasa inggris dari gambar tersebut.
1.3 Ruang Lingkup
Ruang Lingkup dari penggunaan aplikasi Gallery Pengetahuan ini adalah
sebagai berikut.

2
1. Anak usia dini
Anak usia dini dapat menggunakan aplikasi Gallery Pengetahuan ini
dengan pengawasan dan di didik oleh orang tuanya. Anak usia dini dapat belajar
melalui aplikasi ini dengan media gambar yang ditampilkan dan belajar
mengucapkan nama dari gambar tersebut.
2. Anak Sekolah Dasar
Anak sekolah dasar dapat menggunakan aplikasi Gallery Pengetahuan ini
dengan media gambar yang ditampilkan dan belajar membaca cepat nama dari
gambar tersebut serta terdapat Bahasa Inggris dari gambar.

3
BAB II
LANDASAN TEORI
2.1 Android
Android merupakan sebuah sistem operasi yang sangat popular di masa
kini. Android sendiri adalah salah satu platform berbasis Linux yang dirancang
khusus untuk perangkat mobile seperti smartphone serta tablet. Pada awalnya,
Android dikembangkan oleh perusahaan bernama Android, Inc., disertai
dukungan dari perusahaan teknologi Google yang kemudian membelinya dan
resmi menjadi milik Google pada tahun 2005 dan dirilis secara resmi pada tahun
2007.
Perkembangan Android begitu pesat sehingga mampu menjadi sebuah
sistem operasi terhadap smartphone yang paling banyak digunakan di dunia
karena keunggulannya, seperti sistem operasi yang berbiaya rendah, dapat
dikustomisasi, bahkan merupakan sistem operasi yang ringan dalam penggunaan
atas kapasitas memori yang tersedia. Selain itu, Android merupakan salah satu
sistem operasi dengan komunitas pengembang yang besar karena pada umumnya
bahasa pemrograman yang digunakan merupakan bahasa Java[3].
2.2 Java
Java adalah salah satu bahasa pemrograman yang pada umumnya
dijalankan di berbagai perangkat komputer seperti telepon seluler. Bahasa Java ini
sendiri dipengaruhi oleh sintaksis pada bahasa pemrograman C dan C++ yang
sudah berkembang terlebih dahulu, namun bahasa Java dibuat dengan sintaksis
model objek yang lebih sederhana. Java merupakan bahasa pemrograman yang
bersifat umum karena fungsionalitasnya yang memungkinkan aplikasi Java untuk
mampu berjalan di beberapa platform sistem operasi yang berbeda.
Banyak kelebihan yang didapat menggunakan bahasa Java, antara lain
bersifat multiplatform sehingga dapat dijalankan di beberapa platform, bersifat
pemrograman yang berbasis objek, library yang lengkap sehingga mudah untuk
mengembangkan suatu aplikasi, bahkan memiliki fasilitas untuk mengatur

4
penggunaan memori. Dengan kelebihan yang cukup banyak membuat bahasa Java
menjadi bahasa pemrograman yang paling popular untuk digunakan saat ini[4].
2.3 Eclipse
Eclipse merupakan salah satu IDE (Integrated Development Environment)
yang digunakan untuk mengembangkan perangkat lunak dan dapat dijalankan di
semua platform. Eclipse pada saat ini merupakan salah satu IDE favorit karena
bersifat open source dan diperoleh secara gratis. Kelebihan yang didapat dari
Eclipse ini sendiri adalah multiplatform yang dapat dijalankan diberbagai jenis
sistem operasi, multilanguage yang berarti selain dikembangkan dengan bahasa
Java dapat pula dikembangkan dengan bahasa pemrgraman lainnya, dan multi role
yang bisa digunakan untuk aktivitas dalam siklus pengembangan perangkat lunak
seperti dokumentasi dan testing terhadap perangkat lunak. Eclipse ini sendiri
memiliki kemampuan untuk dapat dikembangkan oleh penggunanya dengan
komponen yang disebut dengan plug-in [2].
2.4 ADT
ADT atau Android Development Tools adalah sebuah plug-in yang
didesain untuk IDE Eclipse yang memberikan kemudahan terhadap penggunanya
dalam mengembangkan aplikasi Android dengan menggunakan IDE Eclipse.
Kemudahan yang didapat dari segi membuat aplikasi project Android, membuat
GUI (Graphic User Interface) aplikasi, hingga menambahkan komponen-
komponen lainnya. Dalam ADT memiliki aturan dimana, semakin tinggi platform
yang digunakan, maka dianjurkan untuk menggunakan ADT yang lebih terbaru
hal ini dikarenakan munculnya platform baru tersebut akan dibarengi dengan
munculnya versi terbaru dari ADT itu sendiri[2].
2.5 SDK
SDK atau Software Development Kit merupakan sebuah tools API
(Appkication Programming Interface) yang digunakan dalam mengembangkan
aplikasi berbasis Android menggunakan bahasa Java. SDK ini memberikan
kemudahan agar laptop atau komputer pengguna dapat berkinerja menjadi

5
Android, sehingga aplikasi ini pula dapat mendukung untuk mengubah
smartphone pengguna menjadi teraplikasi Android didalamnya.
SDK memiliki seperangkat tools pengembangan yang mudah untuk
dipahami didalamnya. Tools yang berada didalamnya antara lain, debugger,
libraries, dokumentasi, contoh kode program, tutorial, hingga handset emulator.
Sehingga, SDK ini sangat bermanfaat untuk pengguna yang ingin
mengembangkan aplikasi yang dibuatnya[2].
2.6 Widget
Widget adalah komponen yang dapat digunakan untuk menampilkan user
interface dan menerima interaksi terhadap user. Setiap widget memiliki property
atau atribut yang mengatur widget tersebut ditampilkan, seperti tinggi dan lebar
widget. Widget di dalam Android ditampilkan dengan konsep view, dengan widget
yang umum digunakan adalah Layout XML. Untuk mengimplementasikan widget,
selain file java juga dibutuhkan tambahan dua file yaitu file XML dan layout XML
(optional)[2].
2.6.1 Button
Button merupakan turunan dari text view, sehingga yang berlaku di text
view juga berlaku di button. Tambahan property yang penting adalah onClick[2].
2.6.2 ListView
Listview adalah widget untuk menampilkan data dalam bentuk list yang
dapat di-scroll karena ukuran layar smartphone yang terbatas. Listview merupakan
salah satu widget terpenting dan paling sering digunakan untuk menampilkan
kelompok informasi[2].
2.6.3 Image View
Image view adalah widget yang menampilkan gambar seperti icon. Image
view dapat memuat gambar dari berbagai sumber (resource atau content
providers)[2].

6
2.7 Toast
Toast merupakan sebuah umpan balik sederhana dari sebuah operasi dalam
sebuah popup. Toast hanya mengisi sebagain ruang dari aplikasi. contohnya
adalah delivery report saat mengirimkan SMS, saat pesan terkirim biasanya akan
muncul pemberitahuan bahwa pesan terkirim itulah yang dinamakan toast. Toast
otomatis akan hilang ketika durasi untuk menampilkannya telah habis atau
timeout [2].

7
BAB III
DESAIN DAN IMPLEMENTASI
3.1 DESAIN
Desan dari pembuatan aplikasi Gallery Pengetahuan akan dijelaskan
sebagai berikut:
3.1.1 Deskripsi Aplikasi
Struktur navigasi dari aplikasi Gallery Pengetahuan dapat dilihat pada
Gambar 1.
Halaman
Awal
Mulai Tentang Keluar
Pilih
Gallery
Tentang
Aplikasi
Benda Buah Sayur Hewan Warna KeluarBunga
Gambar 3. 1 Strukur aplikasi Gallery Pengetahuan
Gambar 3.1 merupakan struktur saat aplikasi Gallery Pengetahuan
dijalankan akan masuk ke halaman awal dari aplikasi. Halaman awal aplikasi ini
berisi 3 button untuk Mulai, Tentang, dan Keluar. Mulai merupakan perintah
untuk memulai pembelajaran pada gallery tertentu yang akan dipilih. Tentang
merupakan panduan tentang aplikasi gallery pengetahuan ini. Keluar untuk keluar
dari program aplikasi gallery pengetahuan.
Di dalam pilihan button mulai terdapat list view pilihan gallery yang akan
dipilih. Gallery tersebut meliputi: benda, buah, bunga, hewan, sayur, dan warna.
Ketika salah satu gallery tersebut di pilih maka akan ke halaman selanjutnya
sesuai gallery yang dipilih. Di dalam gallery yang dipilih tersebut akan
ditampilkan gambar – gambar sesuai gallery yang dipilih (misalnya gallery warna)

8
maka akan muncul tampilan gambar warna, dan apabila di klik salah satu gambar
warna tersebut akan muncul tulisan Bahasa Indonesia dan Bahasa Inggris nama
gambar sesuai gambar warna yang dipilih.
Di dalam pilihan button tentang terdapat text mengenai aplikasi gallery
pengetahuan dan terdapat button kembali untuk kembali ke halaman awal. Pada
pilihan keluar akan muncul kotak dialog yang menanyakan “Mau keluar?” jika
pilih ya maka akan keluar dari aplikasi, jika tidak maka akan tetap pada aplikasi.
3.1.2 Flowchart Aplikasi Gallery Pengetahuan
Gambaran dari aplikasi gallery pengetahuan dapat dijelaskan dengan
menggunakan flowchart yang dapat dilihat pada Gambar 3.2

9
Gambar 3. 2 Flowchart Aplikasi
Gambar 3.2 merupakan flowchart yang menjadi alur dari penggunaan
aplikasi gallery pengetahuan.
3.1.3 Use Case Diagram

10
Hak akses yang dimiliki oleh Admin adalah login, input gambar
bunga dan hewan, update gambar bunga dan hewan, delete gambar
bunga dan hewan. Sedangkan pengguna hanya mempunyai hak akses
untuk view gambar bunga dan view gambar hewan.
3.1.4 Sequence Diagram
3.1.4.1 Login
Login ini hanya untuk admin saja ketika ingin menambah foto
atau melakukan pengeditan foto.
3.1.4.2 Input Gambar Bunga dan Hewan

11
Input gambar hewan atau bunga dapat dilakukan untuk megisi
gambar bunga atau hewan di aplikasi.
3.1.4.3 Update Gambar Bunga dan Hewan
Update gambar hewan atau bunga bisa dilakukan apabila ingin
mengubahnya.
3.1.4.4 Delete Gambar Bunga dan Hewan

12
Delete gambar hewan atau bunga bisa dilakukan apabila ingin
menghapus gambar hewan atau bunga.
3.1.4.5 View Gambar bunga
view gambar bunga pengguna dapat melihat gambar hewan
beserta nama bunga tersebut dalam bahasa Indonesia dan
inggris.
3.1.4.6 View Gambar Hewan
Pada view gambar hewan pengguna dapat melihat gambar
hewan beserta nama hewan tersebut dalam bahasa Indonesia dan
inggris.

13
3.1.5 Class Diagram
Class Diagram diatas dapat dilihat bahwa penggu dan admin dapat
melihat gambar hewan dan bunga tetapi hanya admin saja yang bisa
melakukan insert, update dan delete.
3.2 IMPLEMENTASI
Implementasi dari pembutan Aplikasi Galllery Pengetahuan adalah sebagai
berikut:
3.2.1 Proses Pembuatan Aplikasi
Aplikasi gallery pengetahuan memiliki 10 layout dan memiliki 9 class. 10
Layout yang terdapat pada aplikasi terdapat dapat dilihat pada Gambar 3.3.
Gambar 3. 3 Layout pada Gallery Pengetahuan
Gambar 3.3 merupakan layout yang terdapat pada Gallery Pengetahuan
yang terdiri dari 10 layout dan memiliki 11 class. 10 Layout yaitu
activity_main.xml, pilihgallery.xml, about.xml, gbenda.xml, ghewan.xml,

14
gsayur.xml, gwarna.xml, gbunga.xml, dan gbuah.xml, sedangkan 11 class yang
dimiliki yaitu MainActivity.java, pilih_main.java, about.java, Gbenda.java,
Ghewan.java, Gbunga.java, Gbuah.java, Gsayur.java, dan Gwarna.java.. Langkah-
langkah pembuatan aplikasi android Gallery Pengetahuan akan dijelaskan sebagai
berikut.
3.2.2 Halaman Awal
Langkah pertama dalam pembuatan aplikasi android Gallery Pengetahuan
adalah halaman utama yang berfungsi sebagai halaman yang pertama kali muncul
ketika aplikasi Gallery Pengetahuan jalankan. Halaman utama ini memiliki layout
yang diberi nama activity.xml dan class yang diberi nama MainActivity.java.
berikut merupakan penjelasan dari pembuatan halaman utama pada aplikasi
Gallery Pengetahuan.
3.2.2.1 Desain layout activity_main
Desain Layout dari aplikasi Gallery Pengetahuan terdapat pada
activity_main.xml yang ditunjukkan Gambar 3.4.
Gambar 3. 4 Desain layout activity_main.xml
Gambar 3.4 merupakan Graphical Layout atau perancangan layout dari
halaman utama aplikasi yang akan ditampilkan. Gambar 3.4 terlihat bahwa
halaman utama aplikasi Gallery Pengetahuan memiliki 3 button yaitu Mulai,

15
Tentang, dan Keluar. Sedangkan untuk menambahkan background seperti
Gambar 3.4 caranya adalah pada jendela properties yang terletak pada kanan
layar, ubah backgroundnya dengan memilih file gambar dari data di komputer
sesuai background yang diinginkan.
Jika ingin melihat Kode Program dari desain yang dirancang, pada bagian
bawah aplikasi disamping tab Graphical Layout dapat memilih tab
activity_main.xml-nya, maka pada activity_main.xml akan tampak seperti Kode
Program 3.1.
<RelativeLayout
xmlns: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:background="@drawable/bg"
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" >
<Button
android:id="@+id/button2"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_alignRight="@+id/button1"
android:layout_below="@+id/button1"
android:layout_marginTop="14dp"
android:text="Tentang" />
<Button
android:layout_alignLeft="@+id/button2"
android:layout_below="@+id/button2"
android:text="Keluar" />
<Button
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Mulai" />
</RelativeLayout>
Kode Program 3. 1 Activity_main.xml

16
Kode Program 3.1 merupakan kode hasil dari perancangan Graphical
Layout, jadi kita dapat mengubah elemen user interface dari halaman utama
dengan dua cara yaitu melalui graphical layout atau langsung mengedit file xml-
nya.
Kode Program 3.1 tempatnya untuk memberikan perintah tambahan
seperti pengaturan layout, text, ukuran text, warna, dan lain-lainnya atau bisa juga
langsung desain pada Graphical Layout aplikasi.
3.2.2.2 Pengaturan Class MainActivity
Selain activity_main.xml, halaman utama memiliki class
MainActivity.java untuk menjalankan perintah yang ada pada layout dapat dibuka
melalui package explorer: buka/src, pagacke dan klik MainActivity.java.
package com.gallerypengetahuan;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity implements
OnClickListener{
Button mulai,tentang, keluar;
final Context context = this;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mulai= (Button)findViewById(R.id.button1);
tentang= (Button)findViewById(R.id.button2);
keluar= (Button)findViewById(R.id.button3);
mulai.setOnClickListener((OnClickListener)this);
tentang.setOnClickListener((OnClickListener)this);
keluar.setOnClickListener((OnClickListener)this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.button1:

17
Intent pilga= new Intent (this, pilih_main.class);
startActivity(pilga);
break;
case R.id.button2:
Intent tentang = new Intent (this,about.class);
startActivity(tentang);
break;
case R.id.button3:
AlertDialog.Builder alertDialogBuilder = new
AlertDialog.Builder(
context);
// set title
alertDialogBuilder.setTitle("");
// set dialog message
alertDialogBuilder
.setMessage("Mau Keluar? ")
.setCancelable(false)
.setPositiveButton("Ya",new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface
dialog,int id) {
// if this button is clicked,
close
// current activity
MainActivity.this.finish();
}
})
.setNegativeButton("Tidak",new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface
dialog,int id) {
// if this button is clicked, just
close
// the dialog box and do nothing
dialog.cancel();
}
});
// create alert dialog
AlertDialog alertDialog =
alertDialogBuilder.create();
// show it
alertDialog.show();
break;
}
}
}
Kode Program 3. 2 MainActivity.java

18
Kode Program 3.2 merupakan source code untuk menjalankan activity
pada activity_main.xml. Kode Program 3.2 akan mengimplementasikan ketiga
button yang dibuat pada activity_main.xml dengan cara menemukan id dari
button-button tersebut dan apabila salah satu button di click akan menuju ke
halaman atau layout berbeda sesuai dengan perintah intent menuju ke class
activity yang diberikan. Selain itu, pada Kode Program 3.2 terdapat fasilitas alert
dialog untuk menanyakan apakah akan keluar di button 3 dengan memberikan
perintah if dan memintapersetujuan pengguna memilih keluar atau tidak. Jika
pengguna memilih “Ya” maka perintah MainActivity.finish() yang berarti proses
akan berhenti dan keluar dari aplikasi sedangkan jika pilihan “Tidak” maka
dialog.cancel yang berarti tidak jadi keluar.
3.2.3 Halaman Mulai
Halaman mulai adalah halaman ketika button mulai pada halaman utama
di klik. Halaman mulai ini berfungsi untuk mulai memilih jenis gallery yang akan
dilihat dengan menggunakan listView maka akan tampil list text yang merupakan
pilihan dari jenis gallery. Langkah-langkah halaman mulai akan dijelaskan pada
sub bab 3.2.3.
3.2.3.1 Pilihgallery.xml
Pilihgallery.xml ini merupakan listView yang digunakan untuk
menampilkan list dari text pada pilihan jenis gallery.

19
Gambar 3. 5 Layout pilihgallery.xml
Gambar 3.5 merupakan tampilan layout pilihgallery.xml. Cara
menambahkan list view pada layout adalah dengan memilih composite dan drag
ListView ke layout. Kode dari list view pada Gambar 3 ditunjukkan pada Kode
Program 3.3
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFF">
<ListView
android:id="@+id/listView1"
android:cacheColorHint="#00000000"/>
</LinearLayout>
Kode Program 3. 3 Pilihgallery.xml
Kode Program 3.3 merupakan kode dari pilihgallery yang digunakan untuk
menampilkan list pada halaman mulai aplikasi Gallery Pengetahuan dengan
menggunakan list View yang sederhana.

20
3.2.3.2 Pilih_main.java
Pilih_main.java merupakan activity yang digunakan untuk
mengimplementasikan tampilan yang terdapat pada pilihgallery.xml.
import java.util.ArrayList;
import java.util.HashMap;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class pilih_main extends Activity implements
OnItemClickListener{
private ListView lv;
ArrayAdapter<String> adapter;
ArrayList<HashMap<String, String>> menu;
@Override
setContentView(R.layout.pilihgallery);
String[] menu = new String[] {
"Benda",
"Buah",
"Bunga",
"Hewan",
"Sayur",
"Warna",
"Kembali"
};
lv = (ListView)findViewById(R.id.listView1);
lv.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View
view, int position,
long id) {
// TODO Auto-generated method stub
String pilihan =
(lv.getItemAtPosition(position).toString());
tampilkanPilihan(pilihan);
}
private void tampilkanPilihan(String pilihan) {
Intent i = null;
if (pilihan.equals("Benda")) {

21
i = new Intent(pilih_main.this, Gbenda.class);
}
else if (pilihan.equals("Buah")) {
i = new Intent(pilih_main.this, Gbuah.class);
}
else if (pilihan.equals("Bunga")) {
i = new Intent(pilih_main.this, Gbunga.class);
}
else if (pilihan.equals("Hewan")) {
i = new Intent(pilih_main.this, Ghewan.class);
}
else if (pilihan.equals("Sayur")) {
i = new Intent(pilih_main.this, Gsayur.class);
}
else if (pilihan.equals("Warna")) {
i = new Intent(pilih_main.this, Gwarna.class);
}
else if (pilihan.equals("Kembali")) {
i = new Intent(pilih_main.this, MainActivity.class);
}
startActivity(i);
}
});
adapter = new ArrayAdapter<String>(this,
R.layout.pilihgallery, R.id.pilih, menu);
lv.setAdapter(adapter);
}
@Override
public void onItemClick(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
}
}
Kode Program 3. 4 Pilih_main.java
Pilih_main.java akan mengimplementasikan layout pilihgallery.xml dan
membuat list dapat dipilih, untuk tampil ke halaman yang dituju dengan
menemukan id row dari list view yang akan dipilih dengan kode AdapterView
parent untuk view parent yang menampung semua row, View untuk view baris
yang di pilih, position untuk menentukan posisi baris yang dipilih, dan id untuk
menentukan id dari row. Selain itu, untuk menentukan ke halaman yang dituju
sesuai baris yang dipilih pada Kode Program 3.4 menggunakan perintah if dengan
mengambil string sebagai penentuan pilihan baris yang dituju dengan string menu.
Jika string dengan nama tertentu (misalnya benda) maka akan ditentukan intent
menuju ke halaman dari halaman yang telah ditentukan.

22
3.2.4 Halaman Gallery yang di Pilih
Halaman gallery yang dipilih ini merupakan halaman salah satu dari list
gallery yang dipilih pada halaman mulai. List view pada halaman mulai terdapat 7
(tujuh) list yaitu benda, buah, bunga, hewan, sayur, warna dan pilihan untuk
kembali ke halaman sebelumnya atau halaman mulai. Intinya semua layout dan
kode dari list gallery yang dipilih memiliki kesamaan tampilan dan kode yang
sama, hanya saja berbeda pada penamaannya. Berikut merupakan salah satu
layout dan kode halaman gallery yang dipilih.
3.2.4.1 gbunga.xml
gbunga.xml merupakan salah satu halaman dari list gallery yang dipilih
dan berfungsi menampilkan gallery gambar bunga untuk mengenalkan kepada
anak-anak jenis-jenis bunga.
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:text="Galeri Bunga"
android:textColor="#ffffff"
android:background="#aa0000"
android:textSize="8pt" />
<Gallery
android:id="@+id/gallery1"
android:layout_height="wrap_content" />
<ImageView
android:id="@+id/imageView1"
android:scaleType="fitXY"/>
</LinearLayout>
Kode Program 3. 5 Gbunga.xml
Kode Program 3.5 merupakan kode dari salah satu halaman gallery yang
dipilih yaitu gallery bunga. Pada layout di Kode Program 3.5 terdapat textView

23
Gallery, dan ImageView. Fungsi dari textView adalah menampilkan judul galeri
yang ditampilkan, dan imageView tempat menampilkan gambar pada galeri bunga
3.2.4.2 Gbunga.java
Gbunga.java digunakan untuk mengimplementasikan activity dari
gbunga.xml dengan kode yang terdapat pada Kode Program 3.6.
import android.content.Context;
import android.content.res.TypedArray;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;
public class Gbunga extends Activity{
Integer[] bunga = {
R.drawable.mawar,
R.drawable.melati,
R.drawable.kamboja,
R.drawable.sd,
R.drawable.matahari,
R.drawable.anggrek,
R.drawable.ks,
R.drawable.teratai,
R.drawable.anyelir,
R.drawable.tulip
};
String[]nama={"Indonesia: Mawar nInggris: Rose","Indonesia:
Melati nInggris: Jasmine",
"Indonesia: Kamboja nInggris: Frangipani",
"Indonesia: Sedap Malam nInggris: Tuberose Flower",
"Indonesia: Bunga Matahari nInggris: SunFlower",
"Indonesia: Anggrek nInggris: Orchid", "Indonesia: Kembang
Sepatu nInggris: Hibiscus Flower",
"Indonesia: Teratai nInggris: Water Lily",
"Indonesia: Anyelir nInggris: Carnation",
"Indonesia: Bunga Tulip nInggris: Tulip"};
Gallery gallery;
ImageView image;
@Override
setContentView(R.layout.gbunga);
gallery = (Gallery) findViewById(R.id.gallery1);

24
image = (ImageView) findViewById(R.id.imageView1);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v, int
position,long id) {
Toast.makeText(getBaseContext(), ( nama[position] ),
Toast.LENGTH_LONG).show();
image.setImageResource(bunga[position]);
}
});
}
public class ImageAdapter extends BaseAdapter{
Context context;
int itemBackground;
public ImageAdapter(Context c){
context = c;
TypedArray a =
obtainStyledAttributes(R.styleable.Gallery1);
itemBackground =
a.getResourceId(R.styleable.Gallery6_android_galleryItemBackgrou
nd, 0);
a.recycle();
}
@Override
public int getCount() {
return bunga.length;
}
@Override
public Object getItem(int position) {
return position;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup
parent) {
ImageView imageView;
if(convertView == null){
imageView = new ImageView(context);
imageView.setImageResource(bunga[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
}else {
imageView = (ImageView) convertView;
}
imageView.setBackgroundResource(itemBackground);
return imageView;
}

25
}
}
Kode Program 3. 6 Gbunga.java
Kode Program 3.6 merupakan implementasi dari activity gbunga.xml
dimana gbunga.java menggunakan tipe Integer untuk menampilkan gambar
diambil dari folder drawable dan sesuai nama gambar yang digunakan. Kemudian
untuk mendeklarasikan nama dari gambar digunakan tipe string. Proses
selanjutnya menemukan id dari gallery dan image view sehingga dapat
menggunakan toast untuk menampilkan kata-kata pada string. Tipe toast yang
digunakan untuk menampilkan kata menjadi lebih lama adalah
Toast.LENGTH_LONG. Kemudian untuk class imageAdapternya untuk
menentukan posisi object dan styleable gallery yang nantinya akan diatur pada
attrs.xml. Selain itu pada imageAdapter ini diatur imageviewnya pada saat di klik
salah satu gambar pada gallery maka akan muncul dibawah gallery tersebut
gambar yang di klik dalam ukuran yang lebih besar
3.2.5 Attrs.xml
Attrs.xml ini dibuat pada directori values, yang berfungsi sebagai referensi
style gallery dimana kode programnya ditunjukkan oleh Kode Program 3.7.
<resources>
<declare-styleable name="Gallery1">
<attr name="android:galleryItemBackground"></attr>
</declare-styleable>
</resources>
Kode Program 3. 7 Attrs.xml

26
Kode Program 3.7 menunjukkan bahwa attrs.xml ini berfungsi mengatur
style dari masing-masing gallery yang terdapat pada aplikasi gallery pengetahuan.
Kalau tidak di atur, maka gambar gallery pada aplikasi akan menjadi berantakan.
3.2.6 Halaman Tentang
Halaman tentang ini merupakan halaman yang tampil ketika pengguna
memilih button tentang pada halaman awal.
3.2.6.1 About.xml
About.xml ini merupakan desain atau graphical interface yang akan
ditampilkan pada aplikasi gallery pengetahuan.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/paper"
android:orientation="vertical" >
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:text="Tentang Gallery Pengetahuan"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:layout_alignLeft="@+id/pilih"
android:layout_alignParentRight="true"
android:layout_below="@+id/textView2"
android:text="Gallery Pengetahuan merupakan media
pembelajaran untuk anak-anak."
<Button
android:layout_above="@+id/pilih"
android:layout_alignLeft="@+id/pilih"

27
android:layout_marginBottom="40dp"
android:text="Kembali" />
<TextView
android:layout_alignLeft="@+id/textView3"
android:layout_alignRight="@+id/pilih"
android:layout_below="@+id/textView3"
android:text="Pilih Mulai untuk mulai belajar dan pilih
salah satu kategori Gallery yang ingin di pelajari."
<TextView
android:layout_above="@+id/button1"
android:layout_alignRight="@+id/textView2"
android:text="Selamat Belajar!"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#aa0000" />
<TextView
android:id="@+id/pilih"
android:layout_alignParentBottom="true"
android:text="Pemrograman Mobile 2015 - Kelompok 4 " />
</RelativeLayout>
Kode Program 3. 8 About.xml
Kode Program 3.8 adalah rancangan dari halaman tentang yang berisi 5
(lima) textView untuk menampilkan text berupa kata-kata tentang aplikasi dan 1
(satu) button untuk kembali ke halaman awal.
3.2.6.2 About.java
About.java digunakan untuk mengimplementasikan button kembali yang
terdapat pada about.xml dengan kode yang terdapat pada Kode Program 3.9.

28
import android.widget.Button;
public class about extends Activity {
@Override
setContentView(R.layout.about);
Button kembali = (Button) findViewById(R.id.button1);
kembali.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
startActivity(new Intent(about.this,
MainActivity.class));
finish();
}
});
}
}
Kode Program 3. 9 About.java
Kode Program 3.9 merupakan kode untuk mengimplementasikan button
kembali pada about.xml dengan id dari button about yaitu button1 akan
ditampilkan dan menggunakan finish untuk selesai di halaman about dengan
membawa halaman intent ke MainActivity atau halaman awal.
3.2.7 AndroidManifest.xml
AndroidManifest.xml merupakan file yang berfungsi untuk
menggambarkan karakteristik mendasar dari aplikasi dan mendefinisikan masing-
masing komponen aplikasi. Di dalamnya terdapat source code elemen-elemen
untuk mendeklarasikan fitur-fitur tertentu di dalam aplikasi.
<manifest
package="com.gallerypengetahuan"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />

29
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.gallerypengetahuan.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action
android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="com.gallerypengetahuan.pilih_main"
android:label="Pilih Gallery">
</activity>
<activity
android:name="com.gallerypengetahuan.about"
android:label="Tentang">
</activity>
<activity android:name=".Gbenda"></activity>
<activity android:name=".Gbuah"></activity>
<activity android:name=".Gbunga"></activity>
<activity android:name=".Ghewan"></activity>
<activity android:name=".Gsayur"></activity>
<activity android:name=".Gwarna"></activity>
</application>
</manifest>
Kode Program 3. 10 AndroidManifest.xml
Kode Program 3.10 merupakan AndroidManifest.xml yang secara
otomatis ada pada saat membuat aplikasi android dan pada dasarnya berisi
informasi mengenai aplikasi, namun pada AndroidManifest.xml dalam Kode
Program 3.10 ditambahkan perintah untuk mengatur activity dan penggunaan
intent untuk pemilihan
3.2.8 Uji Coba
Uji coba yang dilakukan untuk aplikasi gallery pengetahuan akan
dijelaskan pada sub bab 3.2.8.
3.2.8.1 Halaman Awal

30
Tampilan halaman awal dari aplikasi gallery pengetahuan setelah
dijalankan dapat dilihat pada Gambar 3.6
Gambar 3. 6 Tampilan Halaman Awal
Gambar 3.6 merupakan tampilan dari halaman awal yang menampilkan 3
menu yaitu mulai, tentang dan keluar. Pengguna yang ingin memulai
pembelajaran dapat menekan menu mulai, atau ingin mengetahui tentang gallery
pengetahuan dapat menekan menu tentang. Pengguna yang ingin keluar dari
aplikasi dapat menekan menu keluar.
3.2.8.2 Halaman Mulai
Halaman mulai adalah halaman yang akan muncul setelah pengguna
memilih menu mulai pada halaman awal. Tampilan halaman mulai dapat dilihat
pada Gambar 3.7.

31
Gambar 3. 7 Tampilan Halaman Mulai
Gambar 3.7 merupakan tampilan halaman mulai yang terdapat banyak
pilihan pembelajaran yang diinginkan. Terdapat 6 pembelajaran yang dapat dipilih
yaitu benda, buah, bunga, hewan, sayur dan warna. Pengguna yang ingin kembali
ke halaman awal dapat menekan pilihan kembali.
3.2.8.3 Halaman Pilihan Gallery
Halaman pilihan gallery merupakan halaman yang akan muncul setelah
pengguna memilih pembelajaran yang akan dilakukan. Tampilan dari halaman
pilihan gallery dapat dilihat pada Gambar 3.8.

32
Gambar 3. 8 Tampilan Galeri Benda
Gambar 3.8 merupakan tampilan dari galeri benda yang akan
menampilkan benda yang umum digunakan sehari-hari. Saat gambar benda dipilih
maka akan muncul bahasa Indonesia dan bahasa Inggris dari benda tersebut.
Misalkan pada galeri benda dipilih bola maka akan muncul bahasa Indonesia dan
bahasa Inggris dari bola.

33
Gambar 3. 9 Tampilan Galeri Buah
Gambar 3.9 merupakan tampilan dari galeri buah yang akan menampilkan
buah yang umum diketahui dan dimakan sehari-hari. Saat gambar buah dipilih
maka akan muncul bahasa Indonesia dan bahasa Inggris dari buah tersebut.
Misalkan pada galeri buah dipilih buah alpukat maka akan muncul bahasa
Indonesia dan bahasa Inggris dari buah alpukat.

34
Gambar 3. 10 Tampilan Galeri Bunga
Gambar 3.10 merupakan tampilan dari galeri bunga yang akan
menampilkan bunga yang umum diketahui dalam kehidupan sehari-hari. Saat
salah satu gambar bunga dipilih maka akan muncul bahasa Indonesia dan bahasa
Inggris dari bunga tersebut. Misalkan pada galeri bunga dipilih bunga matahari
maka akan muncul bahasa Indonesia dan bahasa Inggris dari bunga matahari.

35
Gambar 3. 11 Tampilan Galeri Hewan
Gambar 3.11 merupakan tampilan dari galeri hewan yang akan
menampilkan hewan yang umum diketahui dalam kehidupan sehari-hari. Saat
salah satu gambar hewan dipilih maka akan muncul bahasa Indonesia dan bahasa
Inggris dari hewan tersebut. Misalkan pada galeri hewan dipilih kupu-kupu maka
akan muncul bahasa Indonesia dan bahasa Inggris dari kupu-kupu.

36
Gambar 3. 12 Tampilan Galeri Sayur
Gambar 3.12 merupakan tampilan dari galeri sayur yang akan
menampilkan sayuran yang umum diketahui dalam kehidupan sehari-hari. Saat
salah satu gambar sayuran dipilih maka akan muncul bahasa Indonesia dan bahasa
Inggris dari sayuran tersebut. Misalkan pada galeri sayur dipilih sayuran kol maka
akan muncul bahasa Indonesia dan bahasa Inggris dari sayuran kol.

37
Gambar 3. 13 Tampilan Galeri Warna
Gambar 3.13 merupakan tampilan dari galeri warna yang akan
menampilkan warna yang umum diketahui dalam kehidupan sehari-hari. Saat
salah satu warna dipilih maka akan muncul bahasa Indonesia dan bahasa Inggris
dari warna tersebut. Misalkan pada galeri warna dipilih warna hitam maka akan
muncul bahasa Indonesia dan bahasa Inggris dari warna hitam.
3.2.8.4 Halaman About
Halaman about merupakan halaman yang akan menampilkan informasi
mengenai aplikasi gallery pengetahuan. Tampilan dari halaman about dapat
dilihat pada Gambar 3.14.

38
Gambar 3. 14 Tampilan Halaman About
Gambar 3.14 merupakan tampilan dari halaman about yang berisikan
informasi tentang gallery pengetahuan. Halaman about berisikan juga tombol
untuk memudahkan pengguna yang ingin kembali ke halaman awal.
3.2.8.5 Keluar
Keluar merupakan menu terakhir yang terdapat pada aplikasi gallery
pengetahuan. Tampilan keluar dari aplikasi gallery pengetahuan dapat dilihat pada
Gambar 3.15.

39
Gambar 3. 15 Tampilan Keluar
Gambar 3.15 merupakan tampilan saat pengguna memilih keluar pada
halaman awal. Saat keluar dipilih maka akan muncul pertanyaan “Mau keluar”
dengan pilihan “Ya” dan “Tidak”. Pengguna yang memilih “Ya” akan langsung
keluar dari aplikasi dan bila pengguna memilih “Tidak” maka akan kembali ke
halaman awal.

40
BAB IV
PENUTUP
4.1 Kesimpulan
Kesimpulan dari aplikasi gallery pengetahuan yang telah dibuat antara
lain:
1. Aplikasi gallery pengetahuan dengan menggunakan android ini dibuat
untuk menambah wawasan anak-anak tentang lingkungannya dan belajar
membaca serta mengenali gambar.
2. Aplikasi gallery pengetahuan memiliki 6(enam) jenis gallery yang dipilih
untuk ditampilkan diantaranya adalah benda, buah, bunga, hewan, sayur,
dan warna.
Aplikasi gallery pengetahuan ini memang sederhana dan menampilkan
gallery gambar, namun keunikan aplikasi gallery pengetahuan ini pada saat di klik
salah satu gambar pada gallery maka akan muncul dibawah gallery tersebut
gambar yang di klik dalam ukuran yang lebih besar, selain itu aplikasi ini berisi
tulisan yang muncul hanya dalam beberapa detik, sehingga anak" terlatih untuk
membaca cepat.

41
DAFTAR PUSTAKA
[1]Safaat H, Nazruddin.2014.Pemrograman Aplikasi Mobile Smartphone dan
Tablet PC Berbasis Android.Bandung: Informatika
[2]Pengantar Mobile Programming dengan Android: http://yuliadi.com/ilkom
Akbarul Huda Arif. 2013. 24 Jam Pintar Pemrograman Android
[3]http://www.aingindra.com/android-adalah-pengertian-android-sistem-
operasi.html
[4] http://www.swalt.info/pemograman/java/76-pengertian-java.html
[5]http://agusharyanto.net/wordpress/?p=442
[6]https://kholisilkom45.wordpress.com/2013/09/04/membuat-gallery-gambar-
dengan-imageview/
[7]http://jintoples.blogspot.com/2013/07/membuat-aplikasi-android-gallery-
view.html#.VXB7Mka71S4

Aplikasi Gallery Pengetahuan

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Aplikasi Gallery Pengetahuan

Similar to Aplikasi Gallery Pengetahuan (20)

Recently uploaded

Recently uploaded (20)

Aplikasi Gallery Pengetahuan