Anda di halaman 1dari 55

PRAKTIKUM V

LISTVIEW

A. TUJUAN
1. Mengetahui fungsi listview.
2. Membuat project menggunakan listview.
B. URAIAN MATERI
ListView merupakan menu yang paling sering digunakan dalam membuat
berbagai aplikasi android. ListView merupakan sekumpulan list atau daftar data
yang ditampilkan dan dapat di scroll secara vertikal. Inti dari membuat listview
adalah menampung daftar data ke dalam array, kemudian dimasukkan ke adapter
dari widget listView.
Listview sendiri sangat bervariasi, namun dilihat dari tingkat kerumitannya
listview cuma ada dua yaitu simple list view dan custom listview. Di lihat dari
sumber datanya listview bisa dibagi menjadi static listview dan listview dari data
yang bersumber dari content provider. Content provider adalah segala jenis mode
penyimpanan data seperti file text, Database SQLite, Contact list ataupun data
yang diambil dari Webservice.
Adapun yang dinamakan dengan adapter. Adapter adalah class yang
mengatur item-item pada ListView. Adapter mengatur resource view pada setiap
item dari ListView. Resource view pada ListView yang ada pada sebuah tampilan
layar sebuah aplikasi memiliki jumlah resource view yang tetap sesuai dengan
item yang tampak pada layar. Pada ListView dengan tampilan scroll, resourve
view akan digunakan secara berulang (reusable) dengan mengatur item yang
tampak dan yang tersembunyi pada ListView. Adapter juga mengatur data model
dari setiap item ListView.
Untuk mengimplementasikan adapter dibutuhkan yang namanya
pagination. Kegunaan Pagination adalah untuk menampilkan sejumlah data pada
adapter. jika dalam membuat aplikasi yang isinya menampilkan semua email dan
user bisa melihat semua email dalam satu layout. Apalagi jika perharinya email
masuk lebih dari 100, nah jika kita tidak mengimplementasikan pagination, tentu
ini akan mempengaruhi performa aplikasi. Adapter akan memanggil method
getView() lalu mengembalikan sebuah view pada setiap item dengan
1
menggunakan adapter view. Method getView() ini lah yang mengatur format
layout dan kesesuaian data pada item dengan adapter view. Jika getView()
mengambalikan View baru untuk setiap waktu ketika dipanggil, ini akan
berpengaruh pada performa aplikasi. Jika kita membuat View baru sebagai
solusinya, sebenarnya ini terlalu berlebihan karena ketika view baru telah dibuat,
maka view yang lama masih akan tersimpan. Untuk itulah android memiliki fitur
yang dinamakan dengan recyles yang berfungsi untuk mendaur ulang view ini.
C. PRAKTIKUM
1. Praktikum
a. Buka aplikasi eclipse yang telah diinstal pada laptop dan tunggu
aplikasi tersebut hingga terbuka

Gambar 5.1 Tampilan Eclipse sewaktu dibuka

2
b. Kemudian buat project android baru dengan cara klik new yang berada
pada menu bar lalu klik Other.

Gambar 5.2 Tampilan untuk membuat project baru android


c. Setelah itu akan muncul kotak dialog New maka pilih Android
Application
Project karena kita akan membuat actiity aplikasi android lalu klik Next.

Gambar 5.3 Tampilan New dalam memilih project android application


project
3
d. Setelah itu muncul kota dialog New Android Application isi Application
nama, project nama dan juga Package nama serta pilih android SDKnya.
Fungsi dari bagian ini adalah untuk membuat nama aplikasi dan juga
untuk memilih jenis android apa yang support dengan aplikasi tersebut.
seperti gambar 5.4, kemudian klik next

Gambar 5.4 Tampilan New Android Application


e. Kemudian akan muncul Configure Launcher Icon edit icon-icon android
yang ada di configure launcher icon sesuai keinginan anda contohnya
seperti gambar 5.5. Fungsi dari pembuatan logo android adalah untuk
membuat sebuah aplikasi memiliki ciri khasnya tersendiri

Gambar 5.5 Tampilan Configure Launcher Icon

4
f. Kemudian muncul tampilan Create Activity didalam create activity ini
kita mesti mencetang create activity agar isi create activity ini masuk
semua kedalam project android. Lalu klik next

Gambar 5.6 Tampilam Create Activity


g. Kemudian muncul kotak dialog Blank Activity kotak ini berfungsi sebagai
tempat untuk menulis source code dan pembuatan user interface. Lalu
klik finish

Gambar 5.7 Tampilan Blank Activity

5
h. Setelah itu akan muncul tampilan activity_main dan dibawahnya terdapat
Grapical layout.

Gambar 5.8 Tampilan Activity_main graphical Layout


i. Kemudian klik activity_main.xml kemudian ketik source codennya.
Source codenya seperti gambar 5.9. Fungsi dari source code pada
activity_main.xml adalah untuk membuat sebuah user interface pada
graphical layout

Gambar 5.9 Tampilan Activity_main.xml

6
j. Setelah, tampilan pada graphical layout akan berubah mengikuti source
code yang telah diketik di Activiy_main.xml.

Gambar 5.10 Tampilan Graphical Layout yang telah di edit


k. Kemudian untuk menambahkan activity baru klik new kemudian pilih
other. Seperti gambar 5.11.

Gambar 5.11 Tampilan pemilihan activity baru android

7
l. Setelah itu, muncul tampilan Select a wizard. Create an Android Activity,
kemudian pilih Android Activity seperti gambar 5.12

Gambar 5.12 Tampilan dalam memilih Android Activity baru


m. Setelah muncul tampilan Create Activity pilih Blank Activity karena
kita akan menggunakan blank activity

Gambar 5.13 Tampilan Create Activity

8
n. Setelah itu, muncul tampilan Blank Activity kemudian isi Activity Name,
Layout Name dan Tittle seperti gambar 5.14.

Gambar 5.14 Tampilan Black Activity


o. Setelah itu, akan muncul activity_success klik activity_dipilih.xml
kemudian ketik source code gambar 5.15. Fungsi dari source code ini
adalah untuk membuat user interface pada activity_dipilih

9
Gambar 5.15 tampilan string.xml
p. Setelah itu, klik save (CTRL+S) kembali ke activity_main munculkan
graphical layout maka tampilan activitynya akan berupa menjadi
tampilan seperti gambar 5.16

Gambar 5.16 Tampilan activity_main Graphical Layout

10
q. Kemudian klik MainActivity. Kemudian ketik source code seperti gambar
5.17. Source code berguna untuk menjalankan aplikasi. Fungsi Source
code ini untuk menjalankan graphical layout pada aplikasi listview dan
juga menghubungkan antara activitymain dan activitypilih

11
Gambar 5.17 Tampilan Source code MainActivity.Java
r. Kemudian klik PilihActivity.java kemudian ketik source codenya seperti
gambar 5.18. Fungsi dari source code ini untuk menjalanakn Activitypilih
dan menghubungkan antara activitymain dan activitypilih

Gambar 5.18 Tampilan source code PilihActivity.java

12
s. Run aplikasi yang telah dibuat dengan cara klik kanan pada package
project activity kemudian pilih Run As lalu pilih Android Aplication
maka tampilannya akan berubah seperti gambar 5.19.

Gambar 5.19 Tampilan Android Emulator


t. Ketika salah satu list mata kuliah diklik maka akan muncul tampilan
PilihActivity mata kuliah yang dipilih seperti gambar 5.20.

Gambar 5.20 Tampilan Android Emulator

13
2. Tugas Praktikum
a. Tugas Praktikum Muhammad Jauhar Nurdiansyah
1) Dalam membuat tugas praktikum 5 yang dibuat Muhammad Jauhar
Nurdiansyah pertama-tama buat project android baru dengan cara
klik new yang berada pada menu bar lalu klik Other.

Gambar 5.21 Tampilan pembuatan project android aplikasi


2) Setelah itu akan muncul kotak dialog New maka pilih Android
Application Project karena kita akan membuat user interface aplikasi
android lalu klik Next.

Gambar 5.22 Tampilan New dalam memilih project android


application project

14
3) Setelah itu muncul kota dialog New Android Application isi
Application nama, project nama dan juga Package nama serta pilih
android SDKnya. Fungsi dari bagian ini adalah untuk membuat nama
aplikasi dan juga untuk memilih jenis android apa yang support
dengan aplikasi tersebut. seperti gambar 5.23

Gambar 5.23 Tampilan New Android Application


4) Kemudian akan muncul Configure Launcher Icon edit icon-icon
android yang ada di configure launcher icon sesuai keinginan anda
contohnya seperti gambar 5.24. Fungsi dari pembuatan logo android
adalah untuk membuat sebuah aplikasi memiliki ciri khasnya
tersendiri.

Gambar 5.24 Tampilan Configure Launcher Icon

15
5) Kemudian muncul tampilan Create Activity didalam create activity
ini kita mesti mencetang create activity agas isi create activity ini
masuk semua kedalam project android. Lalu klik next

Gambar 5.25 Tampilan Create Activity


6) Kemudian muncul kotak dialog Blank Activity kotak ini berfungsi
sebagai tempat untuk menulis source code dan pembuatan user
interface. Lalu klik finish

Gambar 5.26 Tampilan Blank Activity

16
7) Setelah itu akan muncul tampilan activity_main dan dibawahnya
terdapat Grapical layout. Ada dua cara pembuatan user interface
untuk aplikasi android ada yang menggunakan mode grafis dan ada
mode text. Untuk pembuata UI menggunakan mode grafis kita
menggunakan palatte. Sedangkan dalam pembuatan UI
menggunakan mode text kita menggunakan kode XML. Dan pada
pembuatan user interface APKMAKANANLISTVIEW
menggunakan kedua cara yaitu dengan mode grafis dan mode text.

Gambar 5.27 Tampilan Activity_main Graphical Layout


8) Kemudian klik activity_main.xml di samping graphical layout
kemudian ketik source code activity_main.xml seperti gambar
dibawah 5.28. Fungsi dari source code ini untuk membuat user
interface APKMAKANANLISTVIEW

<LinearLayout android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/linearLayout2"
android:layout_alignParentTop="true"
android:layout_alignRight="@+id/linearLayout2"
android:gravity="center" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="MENU MAKANAN"
android:textSize="15sp"
android:textStyle="bold"

17
android:typeface="serif" />
<Button
android:id="@+id/exitbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:text="EXIT" />

</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/linearLayout1" >
<ListView
android:id="@+id/MakananListView"
android:layout_width="match_parent"
android:layout_height="229dp" >
</ListView> </LinearLayout>
<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/linearLayout2"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:orientation="vertical" >
<TextView
android:id="@+id/tambah"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TAMBAHAKAN MENU MAKANAN"
android:textSize="15sp"
android:textStyle="bold"
android:typeface="serif" />
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TAMBAHKAN" />
</LinearLayout>

Gambar 5.28 Tampilan script pembuatan main activity.xml


APKMAKANANLISTVIEW

18
9) Setelah itu save all kemudian akan muncul tampilan seperti gambar
dibawah 5.29.

Gambar 5.29 Tampilan Activity_main Graphical Layout setelah edit


diUI
10) Kemudian Buatlah android Activity baru yaitu activity untuk
notifikasi dengan cara klik file >> other >> kemudian pilih android
activity seperti gambar 5.30

Gambar 5.30 Gambar pemilihan Android Activity

19
11) Setelah muncul tampilan Create Activity pilih Blank Activity karena
kita akan menggunakan blank activity.

Gambar 5.31 Tampilan Create Activity


12) Setelah itu, muncul tampilan Blank Activity kemudian isi Activity
Name, Layout Name dan Tittle seperti gambar 5.32

Gambar 5.32 Tampilan Black Activity

20
13) Kemudian muncul graphical layout pada aplikasi android
activity_makanan_dipilih seperti gambar 5.33

Gambar 5.33 Gambar Graphical Layout pada


activity_makanan_dipilih
14) Kemudian ketik source code activity_makanan_dipilih.xmlnya untuk
membuat desain user interface pada graphical layoutnya.

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Makanan Yang Dipilih"
android:textSize="20sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#ffffff"/>
<TextView
android:id="@+id/MakananTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Makanan"

21
android:textSize="20sp"
android:textStyle="bold"
android:typeface="serif"
android:textColor="#ffffff"/>
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout1"
android:gravity="center" >

<Button
android:id="@+id/kembalibutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="KEMBALI"
android:textColor="#ffffff"/>

</LinearLayout>

Gambar 5.34 Source Code Activity_makanan_dipilih.xml


15) Kemudian Save source code yang telah diketik kemudian pada
graphical layout tampilan akan berubah seperti gambar 5.35

Gambar 5.35 Tampilan Graphical Layout Activity_makanan_dipilih

22
16) Untuk merubah background pada graphic layout pertama-tama
masukkan background dengan cara klik project
APKMAKANANLISTVIEW >> res >> drawable ldpi kemudian
copy gambar yang diinginkan menjadi background

Gambar 5.36 Tampilan untuk merubah background Applikasi


17) Kemudian untuk menerapkan background tersebut kembali ke
activity_main pilih activity_main.xml kemudian ketik source
android:background="@drawable/makanan"

Gambar 5.37 Tampilan activity_main.xml

23
18) Kemudian untuk menerapkan background tersebut kembali ke
activity_main pilih activity_makanan_dipilih.xml kemudian ketik
source android:background="@drawable/pilih"

Gambar 5.38 Tampilan activity_makanan_dipilih.xml


19) Klik save(CTRL+S) kemudian tampilan pada graphical layout akan
berubah mengikitu background yang dimasukkan tadi di
activity_main.xml gambar di 5.39

Gambar 5.39 Tampilan Graphical layout yang telah diubah


backgroundnya

24
20) Klik save(CTRL+S) kemudian tampilan pada graphical layout akan
berubah mengikitu background yang dimasukkan tadi di
activity_main.xml gambar di 5.40

Gambar 5.40 Tampilan Graphical layout yang telah diubah


backgroundnya
21) Setelah itu untuk menjalankan aplikasi maka kita harus tulis script
disetiap masing-masing di activity java pertama ketik source code di
di MainActivity.java dan scriptnya seperti gambar 5.41. Fungsi dari
script ini adalah untuk menjalankan aplikasi dan menghubungkan
antara activitymain dan activity_makanan_dipilih

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemLongClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

25
public class MainActivity extends Activity implements
OnClickListener, OnItemClickListener{
private java.util.ArrayList<String> items = new
java.util.ArrayList<String>();
private ListView MakananListView;
private EditText tambah;
private Button Addbutton, btnExit, btnHome;
private String[] listMakanan = {"Ramen", "Nasi Kare",
"Sushi", "Onigiri"};
private List<String> food_list = new
ArrayList<String>(Arrays.asList(listMakanan));
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.exitbutton).setOnClickListener(this);
MakananListView = (ListView)
findViewById(R.id.MakananListView);
tambah = (EditText) findViewById(R.id.editText1);
Addbutton = (Button) findViewById(R.id.button1);
btnExit = (Button) findViewById(R.id.exitbutton);
MakananListView.setOnItemClickListener(this);
MakananListView.setLongClickable(true);

final ArrayAdapter<String> adapter = new


ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,
food_list);
MakananListView.setAdapter(adapter);

Addbutton.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub

food_list.add(tambah.getText().toString());
adapter.notifyDataSetChanged();
}
});
MakananListView.setOnItemLongClickListener(new
OnItemLongClickListener(){
@Override
public boolean onItemLongClick(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
// TODO Auto-generated method stub
AlertDialog.Builder alert = new
AlertDialog.Builder(MainActivity.this);
alert.setTitle("Informasi");
alert.setMessage("Makanan"+food_list.get(arg2));
alert.setIcon(R.drawable.ic_launcher);

26
alert.setPositiveButton("Ya", new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {

Toast.makeText(getApplicationContext(), "Tombol Ya di klik",


Toast.LENGTH_SHORT).show();
}});
alert.setNegativeButton("Tidak", new
DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {

Toast.makeText(getApplicationContext(), "Tombol Tidak di


klik", Toast.LENGTH_LONG).show();
}});
return false;
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public void onItemClick(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
Intent intent = new Intent(this,
MakananDipilihActivity.class);
intent.putExtra("Makanan", food_list.get(arg2));
startActivity(intent);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.exitbutton:
System.exit(0);
}
}

Gambar 5.41 Source code pada mainActivity.java


22) Setelah itu untuk menjalankan aplikasi maka kita harus tulis script
disetiap masing-masing di activity java kedua ketik source code di di
MakananDipilihActivity.java dan scriptnya seperti gambar 5.42.
Fungsi dari script MakananDipilihActivity adalah untuk
menghubungkan activity main dan activity_makanan_dipilih

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class MakananDipilihActivity extends Activity implements


OnClickListener{

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_makanan_dipilih);
TextView MakananTV = (TextView)
findViewById(R.id.MakananTextView);

MakananTV.setText(getIntent().getExtras().getString("Makanan"));

findViewById(R.id.kembalibutton).setOnClickListener(this);
}

public boolean onCreateOptionMenu(Menu menu){


getMenuInflater().inflate(R.menu.makanan_dipilih,
menu);
return true;
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch(v.getId()){
case R.id.kembalibutton:
finish();
}
}
}

Gambar 5.42 Source code pada MakananDipilihActivity.java


23) Setelah semuanya telah dibuat klik run pada aplikasi android
projectMainActivity diketik kemudian jalankan program dengan cara
klik kanan pada project >> Run As >> 1. Android Application

Gambar 5.43 Tampilan untuk menjalankan APK android yang telah


dibuat
24) Setelah dirun maka akan muncul tampilan android emulator yang
akan menjalankan aplikasi yang telah dibuat tadi maka tampilannya
akan seperti gambar dibawah 5.44

Gambar 5.44 Tampilan Android Emulator


25) Kemudian Tambahkan Menu Makanan dengan cara mengetik nama
makanan yang ingin ditambahkan kemudian klik tambahkan maka
makanan yang telah diketik muncul di menu makanan.

Gambar 5.45 Tampilan Android Emulator


26) Kemudian klik menu makanan yang ingin dipesan contohnya donat,
maka makanan yang dipilih akan muncul seperti gambar 5.46

Gambar 5.46 Tampilan activity Makanan Dipilih di android


emulator
b. Tugas Praktikum Muh. Yasfin Farhan
1) Dalam membuat tugas praktikum 5 yang dibuat Muh. Yasfin Farhan
pertama-tama buat project android baru dengan cara klik new yang
berada pada menu bar lalu klik Other.

Gambar 5.47 Tampilan untuk membuat project baru


2) Setelah itu akan muncul kotak dialog New maka pilih Android
Application Project karena kita akan membuat user interface aplikasi
android lalu klik Next.

Gambar 5.48 Tampilan New dalam memilih project android


application project
3) Setelah itu muncul kota dialog New Android Application isi
Application nama, project nama dan juga Package nama serta isi juga
android SDKnya Fungsi dari bagian ini adalah untuk membuat nama
aplikasi dan juga untuk memilih jenis android apa yang support
dengan aplikasi tersebut. seperti gambar 5.49

Gambar 5.49 Tampilan New Android Application


4) Ke Kemudian akan muncul Configure Launcher Icon edit icon-icon
android yang ada di configure launcher icon sesuai keinginan anda
contohnya seperti gambar 5.50. Fungsi dari pembuatan logo android
adalah untuk membuat sebuah aplikasi memiliki ciri khasnya
tersendiri
Gambar 5.50 Tampilan Configure Launcher
5) Kemudian muncul tampilan Create Activity didalam create activity
ini kita mesti mencetang create activity agas isi create activity ini
masuk semua kedalam project android. Lalu klik next

Gambar 5.51 Tampilam Create Activity


6) Kemudian muncul kotak dialog Blank Activity kotak ini berfungsi
sebagai tempat untuk menulis source code dan pembuatan user
interface. Lalu klik finish

Gambar 5.52 Tampilan Blank Activity


7) Setelah itu akan muncul tampilan activity_main dan dibawahnya
terdapat Grapical layout. Ada dua cara pembuatan user interface
untuk aplikasi android ada yang menggunakan mode grafis dan ada
mode text. Untuk pembuata UI menggunakan mode grafis kita
menggunakan palatte. Sedangkan dalam pembuatan UI
menggunakan mode text kita menggunakan kode XML. Dan pada
pembuatan user interface segitiga menggunakan kedua cara yaitu
dengan mode grafis dan mode text.

Gambar 5.53 Tampilan Activity_main Graphical Layout


8) Kemudian masuk ke activity_main.xml kemudian ketik source yang
ada gambar 5.54

<LinearLayout android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/linearLayout2"
android:layout_alignParentTop="true"
android:layout_alignRight="@+id/linearLayout2"
android:gravity="center" >
<TextView android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu Makanan"
android:textColor="@color/Hitam"
android:textSize="19sp"
android:typeface="sans" />
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/linearLayout1" >

<ListView
android:id="@+id/MakananListView"
android:layout_width="match_parent"
android:layout_height="245dp" >
</ListView>
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/linearLayout2"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:orientation="vertical" >
<TextView android:id="@+id/tambah"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tambahkan Menu Makanan"
android:textColor="@color/Hitam"
android:textSize="15sp"
android:typeface="sans" />

<EditText android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="30dp"
android:textSize="15sp" />

</LinearLayout>
<LinearLayout android:id="@+id/linearLayout4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/linearLayout3"
android:layout_centerHorizontal="true" >
<Button android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tambahkan"
android:textSize="15sp"
android:typeface="sans" />

<Button android:id="@+id/exitbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kembali"
android:textSize="15sp"
android:typeface="sans" />

</LinearLayout>

Gambar 5.54 Source code untuk activity_main untuk membuat user


interface segitiga
9) Setelah source code untuk mengatur user interfacenya maka pada
graphical layout akan berubah tampilan seperti gambar 5.55

Gambar 5.55 Tampilan activity_main graphical layout


10) Kemudian Buatlah android Activity baru yaitu activity untuk
notifikasi dengan cara klik file >> other >> kemudian pilih android
activity seperti gambar 5.56

Gambar 5.56 Gambar pemilihan Android Activity


11) Setelah muncul tampilan Create Activity pilih Blank Activity karena
kita akan menggunakan blank activity.

Gambar 5.57 Tampilan Create Activity


12) Setelah itu, muncul tampilan Blank Activity kemudian isi Activity
Name, Layout Name dan Tittle seperti gambar 5.58

Gambar 5.58 Tampilan Black Activity


13) Kemudian muncul graphical layout pada android
activityPilihMakanan edit layout tersebut seperti gambar 5.59

Gambar 5.59 Gambar Graphical Layout pada activityPilihmakanan


14) Kemudian ketikkan source code activityPilihmakanan.xmlnya untuk
membuat user interfacenya pada graphical layout.

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:orientation="vertical" >

<TextView
android:id="@+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Makanan Yang Dipilih"
android:textColor="@color/Putih"
android:textSize="20sp" />

<TextView
android:id="@+id/MakananTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Makanan"
android:textColor="@color/Putih"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/linearLayout1"
android:gravity="center" >

<Button
android:id="@+id/kembalibutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="KEMBALI"
android:textColor="@color/Putih" />

</LinearLayout>

Gambar 5.60 Source Code ActivityPilihmakanan.xml


15) Kemduian Save source code yang telah diketik kemudian pada
graphical layout tampilan akan berubah seperti gambar 5.61

Gambar 5.61 Tampilan Graphical Layout Activity_makanan_dipilih


16) Untuk merubah background pada graphic layout pertama-tama
masukkan background dengan cara klik project
APKMAKANANLISTVIEW >> res >> drawable-xxhdpi kemudian
copy gambar yang diinginkan menjadi background

Gambar 5.62 Tampilan untuk merubah background Applikasi


17) Kemudian untuk menerapkan background tersebut kembali ke
activity_main pilih activity_main.xml kemudian ketik source
android:background="@drawable/makan1"

<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@drawable/makan1"
tools:context="com.unpam.tugas5.MainActivity" >

Gambar 5.63 Tampilan activity_main.xml


18) Kemudian untuk menerapkan background tersebut kembali ke
activity_main pilih activity_main.xml kemudian ketik source
android:background="@drawable/makan2"

<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@drawable/makan2"
tools:context="com.unpam.tugas5.Pilihmakanan" >

Gambar 5.64 Tampilan activity_makanan_dipilih.xml


19) Klik save(CTRL+S) kemudian tampilan pada graphical layout akan
berubah mengikitu background yang dimasukkan tadi di
activity_main.xml gambar di 5.64

Gambar 5.65 Tampilan Graphical layout yang telah diubah


backgroundnya
20) Klik save(CTRL+S) kemudian tampilan pada graphical layout akan
berubah mengikitu background yang dimasukkan tadi di
activity_main.xml gambar di 5.65

Gambar 5.66 Tampilan Graphical layout yang telah diubah


backgroundnya
21) Setelah itu untuk menjalankan aplikasi maka kita harus tulis script
disetiap masing-masing di activity java pertama ketik source code di
di MainActivity.java dan scriptnya seperti gambar 5.66. Fungsi dari
script ini adalah untuk menjalankan aplikasi dan menghubungkan
antara activitymain dan activity_makanan_dipilih

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemLongClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity implements


OnClickListener, OnItemClickListener{

private java.util.ArrayList<String> items = new


java.util.ArrayList<String>();
private ListView MakananListView;
private EditText tambah;
private Button Addbutton;
private String[] listMakanan = {"Foie Gras", "Coq Au Vin",
"Soupe a l’oignon", "Confit de Canard"};
private List<String> food_list = new
ArrayList<String>(Arrays.asList(listMakanan));
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.exitbutton).setOnClickListener(this);
MakananListView = (ListView)
findViewById(R.id.MakananListView);
tambah = (EditText) findViewById(R.id.editText1);
Addbutton = (Button) findViewById(R.id.button1);
MakananListView.setOnItemClickListener(this);
Addbutton.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated
method stub

food_list.add(tambah.getText().toString());

adapter.notifyDataSetChanged();
}
});

MakananListView.setOnItemLongClickListener(new
OnItemLongClickListener(){
@Override
public boolean
onItemLongClick(AdapterView<?> arg0, View arg1, int arg2, long
arg3) {
// TODO Auto-generated method stub
AlertDialog.Builder alert = new
AlertDialog.Builder(MainActivity.this);
alert.setTitle("Informasi");
alert.setMessage("Makanan"+food_list.get(arg2));
alert.setIcon(R.drawable.ic_launcher);
alert.setPositiveButton("Ya", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {

Toast.makeText(getApplicationContext(), "Tombol Ya di klik",


Toast.LENGTH_SHORT).show();
}});
alert.setNegativeButton("Tidak", new
DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {

Toast.makeText(getApplicationContext(), "Tombol Tidak di


klik", Toast.LENGTH_LONG).show();
}});
return false;
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
@Override
public void onItemClick(AdapterView<?> arg0, View arg1,
int arg2, long arg3) {
Intent intent = new Intent(this, Pilihmakanan.class);
intent.putExtra("Makanan", food_list.get(arg2));
startActivity(intent);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.exitbutton:
System.exit(0);
}
}

Gambar 5.67 Source code pada mainActivity.java


22) Setelah itu untuk menjalankan aplikasi maka kita harus tulis script
disetiap masing-masing di activity java kedua ketik source code di di
PilihMakanan.java dan scriptnya seperti gambar 5.67. Fungsi dari
script PilihMakanan adalah untuk menghubungkan activity main dan
activity_makanan_dipilih

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class Pilihmakanan extends Activity implements


OnClickListener{

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pilihmakanan);
TextView MakananTV = (TextView)
findViewById(R.id.MakananTextView);

MakananTV.setText(getIntent().getExtras().getString("Makanan"));

findViewById(R.id.kembalibutton).setOnClickListener(this);

}
public boolean onCreateOptionMenu(Menu menu){
getMenuInflater().inflate(R.menu.pilihmakanan,
menu);
return true;
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch(v.getId()){
case R.id.kembalibutton:
finish();
}
}
}

Gambar 5.68 Source code pada PilihMakanan.java


23) Setelah semuanya telah dibuat klik run pada aplikasi android
projectMainActivity diketik kemudian jalankan program dengan cara
klik kanan pada project >> Run As >> 1. Android Application

Gambar 5.69 Tampilan untuk menjalankan APK android yang telah


dibuat
24) Setelah dirun maka akan muncul tampilan android emulator yang
akan menjalankan aplikasi yang telah dibuat tadi maka tampilannya
akan seperti gambar dibawah 5.69

Gambar 5.70 Tampilan Android Emulator


27) Kemudian Tambahkan Menu Makanan dengan cara mengetik nama
makanan yang ingin ditambahkan kemudian klik tambahkan maka
makanan yang telah diketik muncul di menu makanan.

Gambar 5.71 Tampilan Android Emulator


25) Terakhir klik menu makanan yang ingin dipesan contohnya donat,
maka makanan yang dipilih akan muncul seperti gambar 5.71

Gambar 5.72 Tampilan activity PilihMakanan di android emulator


D. HASIL
1. Hasil Praktikum
a. Gambar dibawah ini adalah tampilan listview dengan menampilkan
list
Mata kuliah. Kemudian klik salah satu mata kuliah yang ada.
Gambar 5.73 Tampilan Android Emulator aplikasi List
b. Setelah mengklik salah satu mata kuliah maka akan muncul tampilan
pemilihan mata kuliah seperti Gambar 5.73

Gambar 5.74 Tampilan PilihActivity pada Android Emulator


2. Hasil Tugas Praktikum
a. Hasil Tugas Praktikum Muhammad Jauhar Nurdiansyah
1) Gambar dibawah ini adalah tampilan tugas praktikum 5 Muhammad
Jauhar Nurdiansyah yang menampilkan listview menu makanan

Gambar 5.75 Tampilan Android Emulator Listview menu makanan


2) Tampilan gambar 5.75 ketika menambahkan menu makanan pada
aplikasi listview menu makanan

Gambar 5.76 Tampilan Android Emulator


3) Tampilan Gambar 5.76 ketika mengklik salah satu menu makanan
maka aplikasinya akan berpindah ke activity Makanan dipilih.

Gambar 5.77 Tampilan activity Makanan Dipilih di android


emulator
b. Hasil Tugas Praktikum Muh. Yasfin Farhan
1) Gambar dibawah ini adalah tampilan tugas praktikum 5 Muh. Yasfin
Farhan yang menampilkan listview menu makanan

Gambar 5.78 Tampilan Android Emulator Listview menu makanan


2) Tampilan gambar 5.78 ketika menambahkan menu makanan pada
aplikasi listview menu makanan

Gambar 5.79 Tampilan Android Emulator


3) Tampilan Gambar 5.79 ketika mengklik salah satu menu makanan
maka aplikasinya akan berpindah ke activity Makanan dipilih.

Gambar 5.80 Tampilan activity Makanan Dipilih di android


emulator

Anda mungkin juga menyukai