BAB 5 – More Views Pemrograman Perangkat Mobile Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer Universitas Brawijaya

(1)

BAB 5 – More Views

Pemrograman Perangkat Mobile Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer Universitas Brawijaya Modul Bahan Ajar UBDistanceLearning

Pemrograman Perangkat Mobile

Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom

(2)

Pendahuluan

Padababsebelumnyatelahdijelaskanbeberapapenggunaan widget-widget/view-view yang sederhana.

Padababiniakandijelaskanlebihlanjutmengenai view-view yang lebihkompleks.

TujuanInstruksionalKhusus

Perancanganmodulpadababinibertujuan agar mahasiswamampu : 1. Memahamijenis-jenis view yang lain.

2. Membuataplikasimenggunakan view.

DaftarMateri

1. PENGENALAN 1.1 Widgets/View 1.2 JenisView 2. MORE VIEWS

2.1 Project 1 : TimePickerView 2.2 Project 2 : DatePickerView 2.3 Project 3 : GalleryView

2.4 Project 4 : ImageSwitcherView 2.5 Project 5 : Analog/Digital Clock 2.6 Project 6 : Context/Option Menu 3. SOAL DAN PROJECT

(3)

1. PENGENALAN

1.1 Widgets/View

Android Widgets merupakan komponen-komponen yang disediakan Android SDK untuk membangun user interface pada aplikasi Android.

1.2 JenisView

Android Widgets merupakan komponen-komponen yang disediakan Android SDK untuk membangun user interface pada aplikasi Android.

Jenis View

 TimePicker view

View untukmenampilkandanmensettingwaktu (jam, menit, detik)

 DatePicker view

View untukmenampilkandanmensettingtanggal (hari, bulan, tahun)

 Gallery view

View untukmenampilkangambardalambentukgaleri.

 ImageSwitcher view

View untukmenampilkangambardalambentuk slide show.

 Context Menu

View untukmenampilkan menu dengan touch input.

 Options Menu

View untukmenampilkan menu denganmenekantombol di smartphone.

 AnalogClock

View untukmenampilkan jam analog.

 DigitalClock

View untukmenampilkan jam digital.

2. MORE VIEWS

2.1 Project 1 : TimePicker View

Pada program inikitaakanmerancangaplikasi Android yang memperbolehkan user untukseleksiwaktudalamsehariyaitu 24 jam (pm/am).

Buat project android dengan ketentuan sebagai berikut :

 Project name : TimePickerView

 Build Target : Android 2.1-update1

 Application Name : timepicker

 Package name : id.ac.ub.pttik.timepicker

 Activity : TimePickerActivity

 Min SDK : 7

(4)

TimePickerActivity.java

packageid.ac.ub.pttik.timepicker;

importandroid.app.Activity;

importandroid.os.Bundle;

publicclassTimePickerActivityextends Activity {

@Override

protectedvoidonCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.timepicker);

} }

timepicker.xml

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

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

android:orientation="vertical"android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TimePickerandroid:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</LinearLayout>

Apabila aplikasi timepicker dijalankan, tampilannya sepertipadaGambar 2.1.

(5)

Gambar 2.1 Tampilan Project 1 : TimePickerView.

Click tombol tambah atau kurang dan perhatikan bahwa nilai jam atau menit otomatis akan berubah.

TimePicker sebenarnya dapat ditampilkan dalam bentuk dialog box seperti kode TimePickerActivity.java yang telah dimodifikasi berikut ini :

TimePickerActivity.java (modifikasi) packageid.ac.ub.pttik.timepicker;

importandroid.app.Dialog;

importandroid.app.TimePickerDialog;

importandroid.widget.TimePicker;

importandroid.widget.Toast;

publicclassTimePickerActivityextends Activity { inthour, minute;

staticfinalintTIME_DIALOG_ID = 0;

(6)

@Override

protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.datetimepicker);

showDialog(TIME_DIALOG_ID);

}

@Override

protected Dialog onCreateDialog(int id) { switch (id) {

caseTIME_DIALOG_ID:

returnnewTimePickerDialog(this, mTimeSetListener, hour, minute, false);

}

returnnull;

}

privateTimePickerDialog.OnTimeSetListenermTimeSetListener = newTimePickerDialog.OnTimeSetListener() {

publicvoidonTimeSet(TimePicker view, inthourOfDay, intminuteOfHour) { hour = hourOfDay;

minute = minuteOfHour;

Toast.makeText(getBaseContext(),

"You have selected : " + hour + ":" + minute,

Toast.LENGTH_SHORT).show();

} };

}

Running project ulangsehinggaakanmenghasilkansepertipadaGambar 2.2.

(7)

Gambar 2.2 Tampilan Project 1 : TimePickerView yang telah dimodifikasi.

2.2 Project 2 : DatePicker View

Pada program inikitaakanmerancangaplikasi Android yang memperbolehkan user untukmelakukanseleksitanggal, bulan, dantahun.

 Project name : DatePickerView

 Application Name : datepicker

 Package name : id.ac.ub.pttik.datepicker

 Activity : DatePickerActivity

 Min SDK : 7

DatePickerActivity.java

packageid.ac.ub.pttik.datepicker

publicclassDatePickerActivityextends Activity { /** Called when the activity is first created. */

(8)

@Override

publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.datepicker);

} }

datepicker.xml

<DatePickerandroid:layout_width="wrap_content"

</LinearLayout>

Apabila aplikasi datepickerdijalankan, tampilannya sepertipadaGambar 2.3.

Gambar 2.3 Tampilan Project 2 : DatePickerView.

(9)

2.3 Project 3 : GalleryView

Pada program inikitaakanmerancangaplikasi Android yang menampilkan item-item dalambentuk image.

 Project name : GalleryView

 Application Name : gallery

 Package name : id.ac.ub.pttik.gallery

 Activity : GalleryActivity

 Min SDK : 7

Sebelumandatuliskode program berikutsalin file bandung1.jpg, bandung2.jpg, bandung3.jpg, bandung4.jpg, bandung5.jpg, bandung6.jpg, bandung7.jpg kedalamdirektorires/drawable.

GalleryActivity.java

packageid.ac.ub.pttik.gallery;

importandroid.content.Context;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.widget.AdapterView;

importandroid.widget.AdapterView.OnItemClickListener;

importandroid.widget.BaseAdapter;

importandroid.widget.Gallery;

importandroid.widget.ImageView;

publicclassGalleryActivityextends Activity

{

//---the images to display--- Integer[] imageIDs = { R.drawable.bandung1,

(10)

R.drawable.bandung2, R.drawable.bandung3, R.drawable.bandung4, R.drawable.bandung5, R.drawable.bandung6,

R.drawable.bandung7, };

@Override

publicvoidonCreate(Bundle savedInstanceState)

{

setContentView(R.layout.displayview);

Gallery gallery = (Gallery) findViewById(R.id.gallery1);

gallery.setAdapter(newImageAdapter(this));

gallery.setOnItemClickListener(newOnItemClickListener() {

publicvoidonItemClick(AdapterView parent,

View v, int position, long id) {

Toast.makeText(getBaseContext(),

"pic" + (position + 1) + " selected",

Toast.LENGTH_SHORT).show();

} });

}

publicclassImageAdapterextendsBaseAdapter {

(11)

private Context context;

privateintitemBackground;

publicImageAdapter(Context c)

{ context = c;

//---setting the style---

}

//---returns the number of images--- publicintgetCount() {

returnimageIDs.length;

}

//---returns the ID of an item--- public Object getItem(int position) { return position;

}

publiclonggetItemId(int position) { return position;

}

//---returns an ImageView view---

public View getView(int position, View convertView, ViewGroup parent) {

ImageViewimageView = newImageView(context);

imageView.setImageResource(imageIDs[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(newGallery.LayoutParams(150, 120));

imageView.setBackgroundResource(itemBackground);

returnimageView;

} }

(12)

}

displayview.xml

<TextViewandroid:layout_width="fill_parent"

android:layout_height="wrap_content"android:text="Images Kota Bandung"/>

<Galleryandroid:id="@+id/gallery1"android:layout_width="fill_parent"

<ImageViewandroid:id="@+id/image1"android:layout_width="320px"

android:layout_height="250px"android:scaleType="fitXY"/>

</LinearLayout>

Apabila aplikasi galleryview dijalankan, tampilannyasepertipadaGambar 2.4.

Gambar 2.4 Tampilan Project 3 : GalleryView.

(13)

Ubahprosedur yang beradadalam method onItemClick()untuk image yang dipilihkedalamImageViewmenjadisepertiberikut :

onItemClick()

ImageViewimageView = (ImageView) findViewById(R.id.image1);

}

Running project ulangsehinggaakanmenghasilkantampilansepertipadaGambar 2.5.

Gambar 2.5 Tampilan Project 3 : GalleryView yang telah dimodifikasi.

(14)

2.4 Project 4 : ImageSwitcher View

Pada program inikitaakanmerancangaplikasi Android yang menampilkangambarkotaBandung menggunakanImageSwitcher View.

 Project name : ImageSwitcherView

 Application Name : imageswitcher

 Package name : id.ac.ub.pttik.imageswitcher

 Activity : ImageSwitcherActivity

 Min SDK : 7

Sebelumandatuliskode program berikutsalin file bandung1.jpg, bandung2.jpg, bandung3.jpg, bandung4.jpg, bandung5.jpg, bandung6.jpg, bandung7.jpg kedalamdirektori res/drawable

ImageSwitcherActivity.java

packageid.ac.ub.pttik.imageswitcher;

importandroid.content.Context;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.view.animation.AnimationUtils;

importandroid.widget.AdapterView;

importandroid.widget.AdapterView.OnItemClickListener;

importandroid.widget.BaseAdapter;

importandroid.widget.Gallery;

importandroid.widget.Gallery.LayoutParams;

importandroid.widget.ImageSwitcher;

importandroid.widget.ImageView;

importandroid.widget.ViewSwitcher.ViewFactory;

publicclassImageSwitcherActivityextends Activity implementsViewFactory {

//---the images to display---

(15)

Integer[] imageIDs = { R.drawable.bandung1, R.drawable.bandung2, R.drawable.bandung3, R.drawable.bandung4, R.drawable.bandung5, R.drawable.bandung6, R.drawable.bandung7 };

privateImageSwitcherimageSwitcher;

@Override

publicvoidonCreate(Bundle savedInstanceState)

{

setContentView(R.layout.displayview);

imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);

imageSwitcher.setFactory(this);

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_in));

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

Gallery gallery = (Gallery) findViewById(R.id.gallery1);

gallery.setAdapter(newImageAdapter(this));

gallery.setOnItemClickListener(newOnItemClickListener() {

(16)

imageSwitcher.setImageResource(imageIDs[position]);

} });

}

public View makeView()

{

ImageViewimageView = newImageView(this);

imageView.setBackgroundColor(0xFF000000);

imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

imageView.setLayoutParams(new ImageSwitcher.LayoutParams(

LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

}

publicclassImageAdapterextendsBaseAdapter

{

private Context context;

privateintitemBackground;

publicImageAdapter(Context c)

{

context = c;

}

//---returns the number of images--- publicintgetCount()

(17)

{

returnimageIDs.length;

}

//---returns the ID of an item--- public Object getItem(int position)

{

return position;

}

publiclonggetItemId(int position)

{

return position;

}

//---returns an ImageView view---

public View getView(int position, View convertView, ViewGroup parent)

{

ImageViewimageView = newImageView(context);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(newGallery.LayoutParams(150, 120));

imageView.setBackgroundResource(itemBackground);

} } }

displayview.xml

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

(18)

android:layout_height="fill_parent"android:background="#ff000000">

<ImageSwitcherandroid:id="@+id/switcher1"

android:layout_width="fill_parent"android:layout_height="fill_parent"

android:layout_alignParentLeft="true"android:layout_alignParentRight="true"

android:layout_alignParentBottom="true"/>

<Galleryandroid:id="@+id/gallery1"android:layout_width="fill_parent"

</RelativeLayout>

string.xml

<stringname="hello">Hello World, gallery!</string>

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

</resources>

Apabila aplikasi imageswitcher dijalankan, tampilannya sepertipadaGambar 2.6.

Gambar 2.6 Tampilan Project 4 : ImageSwitcher.

(19)

2.5 Project 5 : Analog/Digital Clock

Pada program inikitaakanmerancangaplikasi Android yang menampilkan jam analog dan digital.

 Project name : AnalogDigitalClock

 Application Name : analogdigital

 Package name : id.ac.ub.pttik.analogdigital

 Activity : AnalogDigitalActivity

 Min SDK : 7

analogdigital.java

packageid.ac.ub.pttik.analogdigital;

publicclassAnalogDigitalActivityextends Activity { /** Called when the activity is first created. */

@Override

setContentView(R.layout.main);

} }

main.xml main.xml

<AnalogClockandroid:id="@+id/clock1"android:layout_width="wrap_content"

<DigitalClockandroid:id="@+id/clock2"

(20)

android:layout_width="wrap_content"android:layout_height="wrap_content"/>

</LinearLayout>

Apabila aplikasi analogdigital dijalankan, tampilannya sepertipadaGambar 2.7.

Gambar 2.7 Tampilan Project 5 : Analog/Digital Clock.

2.6 Project 6 : Context/Option Menu

Pada program inikitaakanmerancangaplikasi Android yang menggunakan Context Menu dan Options Menu. Context Menu merupakan menu yang dipilihdenganmenekan touch-screen.Sedangkan Options Menu merupakan menu yang dipilihdenganmenekantombol Menu yang adapada Smartphone atau Tablet.

 Project name : MenuLayout

 Application Name : menulayout

 Package name : id.ac.ub.pttik.menulayout

 Activity : MenuLayoutActivity

 Min SDK : 7

MenuLayoutActivity.java

packageid.ac.ub.pttik.menulayout;

(21)

importandroid.view.Menu;

importandroid.view.MenuItem;

importandroid.widget.Button;

publicclassMenuLayoutActivityextends Activity {

@Override

setContentView(R.layout.menu);

Button btn = (Button) findViewById(R.id.btn1);

btn.setOnCreateContextMenuListener(this);

}

privatevoidCreateMenu(Menu menu) {

menu.setQwertyMode(true);

MenuItem mnu1 = menu.add(0, 0, 0, "Item 1");

{

mnu1.setAlphabeticShortcut('a');

mnu1.setIcon(R.drawable.icon);

}

{

mnu2.setAlphabeticShortcut('b');

mnu2.setIcon(R.drawable.icon);

}

{

mnu3.setAlphabeticShortcut('c');

(22)

mnu3.setIcon(R.drawable.next);

}

{

mnu4.setAlphabeticShortcut('d');

}

menu.add(0, 3, 3, "Item 5");

menu.add(0, 3, 3, "Item 6");

menu.add(0, 3, 3, "Item 7");

}

privatebooleanMenuChoice(MenuItem item) { switch (item.getItemId()) {

case 0:

Toast.makeText(this, "You clicked on Item 1", Toast.LENGTH_LONG) .show();

returntrue;

case 1:

returntrue;

case 2:

returntrue;

case 3:

returntrue;

case 4:

Toast.makeText(this, "You clicked on Item 5", Toast.LENGTH_LONG)

(23)

.show();

returntrue;

case 5:

returntrue;

case 6:

returntrue;

}

returnfalse;

}

@Override

publicbooleanonCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu);

CreateMenu(menu);

returntrue;

}

@Override

publicbooleanonOptionsItemSelected(MenuItem item) { returnMenuChoice(item);

} }

menu.xml

(24)

<Buttonandroid:id="@+id/btn1"android:layout_width="fill_parent"

android:layout_height="wrap_content"android:text="Hello, Tampilan Menu!"/>

</LinearLayout>

Apabila aplikasi menulayout dijalankan, tampilannya sepertipadaGambar 2.8.

Gambar 2.8 Tampilan Menu Layout.

Apabilakitamenekantombol MENU, tampilannyasepertipadaGambar 2.9.

(25)

Gambar 2.8 Tampilan MenuLayout Ketika Ditekan Tombol Menu.

Apabilakitamenekanpilihan menu MORE, tampilannyasepertipadaGambar 2.9.

Gambar 2.9 Tampilan MenuLayout Ketika Ditekan Tombol MORE.

(26)

3. SOALDAN PROJECT

Soal

1. Jelaskanapa yang dimaksuddenganView !

2. SebutkandanJelaskanmacam-macam view di Android !

Project

Buatlahsebuahaplikasisederhana yang menampilkangambar-gambarbendera Negara dalamsebuahgaleriview !

REFERENSI

Yudhi ,Wibisono .2011. Pengantar Mobile Programming dengan Android, UPI.

Safaat, H. Nazruddin. 2011. ANDROID PemrogramanAplikasi Mobile Smartphone dan Tablet PC Berbasis Android, PenerbitInformatika.