Modul Praktikum Pemrograman Android

2015

MODUL 6. SELECTION WIDGET

6.1.

Tujuan

1. Mengenalkan kepada mahasiswa konsep umum Android

2. Mahasiswa dapat memahami Selection Widget
3. Mahasiswa dapat membuat program ListView, Spinner dan GridView

6.2.

DASAR TEORI

Selection widget adalah widget yang digunakan untuk melakukan pemilihan

fungsi apa yang ingin dijalankan. Pada contoh project yang akan kita buat adalah
ListView,Spinner dan GridView.
Berikut adalah beberapa macam Selection Widget :
1. Selection Widget-ListView
ListView merupakan widget pada android untuk menampilkan pilihan
dalam bentuk list baik berurutan maupun tidak. Dan setiap pilihan dalam
list bisa diberi fungsi sendiri sendiri.
2. Selection Widget-Spinner
Spinner bisa dikatakan mirip dengan dropdown menu, dimana untuk
memilih kita harus klik terlebih dahulu pada widget tersebut untuk
memunculkan pilihan.
3. Selection Widget-GridView
GridView merupakan selection widget dengan tampilan berupa grid. Yaitu
mirip dengan tampilan tile icons pada windows.

6.3.

PELAKSANAAN PRAKTIKUM

1. Jalankan Eclipse, Kemudian Pilih File > New > Android Application Project.
2. Isikan kotak dialog seperti berikut :
Application name
Project name
Package name
Min SDK version
Target SDK
Activity Name
Layout Name

Setiya Nugroho, M.Eng

:
:
:
:
:
:
:

List View 1
ListView1
com.listview1
8
Android 2.2
MyListView1
main

Page 1

Modul Praktikum Pemrograman Android

2015

3. Modifikasi layout di main.xml menjadi seperti dibawah ini :

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ListView
android:id="@+id/ls_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>

4. Ketiklah kode MyListView1.java seperti berikut :

package com.listview1;
import
import
import
import
import
import
import
import

android.os.Bundle;
android.app.Activity;
android.view.View;
android.widget.AdapterView;
android.widget.ArrayAdapter;
android.widget.ListView;
android.widget.Toast;
android.widget.AdapterView.OnItemClickListener;

public class MyListView1 extends Activity implements

OnItemClickListener{
private ListView ls_menu;
private String[] menu = {"Menu 1", "Menu 2", "Menu 3",
"Menu 4", "Menu 5"};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ls_menu = (ListView) findViewById(R.id.ls_menu);
ArrayAdapter adapter = new ArrayAdapter(this,
android.R.layout.simple_list_item_1, menu);
ls_menu.setAdapter(adapter);
ls_menu.setOnItemClickListener(this);
}
public void onItemClick(AdapterView arg0, View arg1, int
posisi, long arg3) {
Toast.makeText(MyListView1.this, "Anda memilih
"+menu[posisi], Toast.LENGTH_SHORT).show();
}
}

Setiya Nugroho, M.Eng

Page 2

Modul Praktikum Pemrograman Android

2015

5. Jalankan aplikasi dengan cara klik kanan package > pilih Run As > Android
Application Project. Tampilannya tampak seperti gambar 6.1 berikut :

Gambar 6.1 : Tampilan Selection Widget ListView

6.4.

Latihan

1. Jalankan Eclipse, Kemudian Pilih File > New > Android Application Project.
2. Isikan kotak dialog seperti berikut :
Application name
Project name
Package name
Min SDK version
Target SDK
Activity Name
Layout Name

:
:
:
:
:
:
:

Spinner 2
Spinner2
com.spinner2
8
Android 2.2
MySpinner2
main

3. Modifikasi layout di main.xml menjadi seperti berikut ini :

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

Setiya Nugroho, M.Eng

Page 3

Modul Praktikum Pemrograman Android

2015

<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="48dp" />
<Button
android:id="@+id/button1"
android:layout_width="154dp"
android:layout_height="wrap_content"
android:text="Tampil" />
<TextView
android:id="@+id/hasil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

4. Ketiklah kode MySpinner2.java seperti berikut :

package com.spinner2;
import
import
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.AdapterView;
android.widget.ArrayAdapter;
android.widget.Button;
android.widget.Spinner;
android.widget.TextView;

public class MySpinner2 extends Activity implements

AdapterView.OnItemSelectedListener {
// untuk menampilkan daftar item
TextView selection;
String[] items = { "JAVA", "PHP", "ANDROID" };
Button tampil;
Spinner spin;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
// untuk memanggil id selection dan spinner dari file xml
selection = (TextView) findViewById(R.id.hasil);
tampil = (Button) findViewById(R.id.button1);
spin = (Spinner) findViewById(R.id.spinner);
tampil.setOnClickListener(new ok());
spin.setOnItemSelectedListener(this);
// untuk menampilkan daftar item

Setiya Nugroho, M.Eng

Page 4

Modul Praktikum Pemrograman Android

2015

ArrayAdapter<String> aa = new ArrayAdapter<String>(this,

android.R.layout.simple_spinner_item, items);
aa.setDropDownViewResource(android.R.layout.simple_spinner_drop
down_item);
spin.setAdapter(aa);
}
public void onItemSelected(AdapterView<?> parent, View v, int
position, long id) {
// selection.setText(items[position]);
}
public void onNothingSelected(AdapterView<?> parent) {
selection.setText("");
}
class ok implements Button.OnClickListener {
public void onClick(View v) {
String s = (String) ("Pilihan Anda Adalah : " + spin
.getSelectedItem());
selection.setText(s);
}
}
}

5. Jalankan aplikasi dengan cara klik kanan package > pilih Run As > Android
Application Project. Tampilannya tampak seperti gambar 6.2 berikut :

Gambar 6.2 : Tampilan Selection Widget-Spinner

Setiya Nugroho, M.Eng

Page 5

Modul Praktikum Pemrograman Android

6.5.

2015

Tugas

1. Jalankan Eclipse, Kemudian Pilih File > New > Android Application Project.
2. Isikan kotak dialog seperti berikut :
Application name
Project name
Package name
Min SDK version
Target SDK
Activity Name
Layout Name

:
:
:
:
:
:
:

Grid View 3
GridView3
com.gridview3
8
Android 2.2
MyGridView3
main

3. Modifikasi layout di main.xml menjadi seperti dibawah ini :

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ff0033cc"
android:textSize="14pt"
android:textStyle="bold" />
<GridView
android:id="@+id/grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ff0000ff"
android:columnWidth="100px"
android:gravity="center"
android:horizontalSpacing="5px"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="35px" />
</LinearLayout>

4. Modifikasi file MyGridView.java menjadi seperti berikut :

package com.gridview;
import
import
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.View;
android.widget.ArrayAdapter;
android.widget.AdapterView;
android.widget.GridView;

Setiya Nugroho, M.Eng

Page 6

Modul Praktikum Pemrograman Android

2015

import android.widget.TextView;
public class MyGridView extends Activity implements
AdapterView.OnItemClickListener {
TextView selection;
String[] items = { "this", "is", "a", "really", "really2",
"really3", "really4", "really5", "silly", "list" };
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
selection = (TextView) findViewById(R.id.selection);
GridView gv = (GridView) findViewById(R.id.grid);
ArrayAdapter<String> aa = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, items);
gv.setAdapter(aa);
gv.setOnItemClickListener(this);
}
@Override
public void onItemClick(AdapterView<?> parent, View v, int
position, long id) {
selection.setText(items[position]);
}
}

5. Jalankan aplikasi dengan cara klik kanan package > pilih Run As > Android
Application Project. Tampilannya tampak seperti gambar 6.3 berikut :

Gambar 6.3 : Tampilan Selection Widget-GridView

Setiya Nugroho, M.Eng

Page 7