Pemrograman Perangkat Mobile

Modul Bahan Ajar UBDistanceLearning

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

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

PemrogramanPerangkat Mobile - BAB 5 – More Views

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

Pemrograman Perangkat Mobile- BAB 5 – More Views

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 untukseleksiwaktudalamsehariyaitu 24 jam (pm/am).

yang

memperbolehkan

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

Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer

user

Pemrograman Perangkat Mobile- BAB 5 – More Views 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

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

Apabila aplikasi timepicker dijalankan, tampilannya sepertipadaGambar 2.1.



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.Activity; importandroid.app.Dialog; importandroid.app.TimePickerDialog; importandroid.os.Bundle; importandroid.widget.TimePicker; importandroid.widget.Toast; publicclassTimePickerActivityextends Activity { inthour, minute; staticfinalintTIME_DIALOG_ID = 0;


Pemrograman Perangkat Mobile- BAB 5 – More Views @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.



Gambar 2.2 Tampilan Project 1 : TimePickerView yang telah dimodifikasi.

2.2 Project 2 : DatePicker View Pada program inikitaakanmerancangaplikasi untukmelakukanseleksitanggal, bulan, dantahun.

Android

yang

memperbolehkan

Buat project android dengan ketentuan sebagai berikut :  Project name : DatePickerView  Build Target : Android 2.1-update1  Application Name : datepicker  Package name : id.ac.ub.pttik.datepicker  Activity : DatePickerActivity  Min SDK :7 DatePickerActivity.java packageid.ac.ub.pttik.datepicker

importandroid.app.Activity; importandroid.os.Bundle; publicclassDatePickerActivityextends Activity { /** Called when the activity is first created. */


user

Pemrograman Perangkat Mobile- BAB 5 – More Views @Override publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.datepicker); } }

datepicker.xml

Apabila aplikasi datepickerdijalankan, tampilannya sepertipadaGambar 2.3.

Gambar 2.3 Tampilan Project 2 : DatePickerView.



2.3 Project 3 : GalleryView Pada program inikitaakanmerancangaplikasi Android yang menampilkan item-item dalambentuk image. Buat project android dengan ketentuan sebagai berikut :  Project name : GalleryView  Build Target : Android 2.1-update1  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.app.Activity; importandroid.content.Context; importandroid.os.Bundle; importandroid.view.View; importandroid.view.ViewGroup; importandroid.widget.AdapterView; importandroid.widget.AdapterView.OnItemClickListener; importandroid.widget.BaseAdapter; importandroid.widget.Gallery; importandroid.widget.ImageView; importandroid.widget.Toast;

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


Pemrograman Perangkat Mobile- BAB 5 – More Views R.drawable.bandung2, R.drawable.bandung3, R.drawable.bandung4, R.drawable.bandung5, R.drawable.bandung6, R.drawable.bandung7, };

@Override publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(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 {


Pemrograman Perangkat Mobile- BAB 5 – More Views 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; } }


Pemrograman Perangkat Mobile- BAB 5 – More Views }

displayview.xml

Apabila aplikasi galleryview dijalankan, tampilannyasepertipadaGambar 2.4.

Gambar 2.4 Tampilan Project 3 : GalleryView. Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer

Pemrograman Perangkat Mobile- BAB 5 – More Views Ubahprosedur yang beradadalam method dipilihkedalamImageViewmenjadisepertiberikut :

onItemClick()untuk

image

onItemClick() publicvoidonItemClick(AdapterView parent, View v, int position, long id) { ImageViewimageView = (ImageView) findViewById(R.id.image1); imageView.setImageResource(imageIDs[position]); }

Running project ulangsehinggaakanmenghasilkantampilansepertipadaGambar 2.5.

Gambar 2.5 Tampilan Project 3 : GalleryView yang telah dimodifikasi.


yang


2.4 Project 4 : ImageSwitcher View Pada program inikitaakanmerancangaplikasi Android yang menampilkangambarkotaBandung menggunakanImageSwitcher View. Buat project android dengan ketentuan sebagai berikut :  Project name : ImageSwitcherView  Build Target : Android 2.1-update1  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.app.Activity; importandroid.content.Context; importandroid.os.Bundle; 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---


Pemrograman Perangkat Mobile- BAB 5 – More Views 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) { super.onCreate(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() { publicvoidonItemClick(AdapterView parent,


Pemrograman Perangkat Mobile- BAB 5 – More Views View v, int position, long id) { 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)); returnimageView; }

publicclassImageAdapterextendsBaseAdapter { private Context context; privateintitemBackground;

publicImageAdapter(Context c) { context = c; } //---returns the number of images--publicintgetCount()


Pemrograman Perangkat Mobile- BAB 5 – More Views { 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; } } }

displayview.xml

Pemrograman Perangkat Mobile- BAB 5 – More Views android:orientation="vertical"android:layout_width="fill_parent" android:layout_height="fill_parent"android:background="#ff000000">

string.xml <stringname="hello">Hello World, gallery! <stringname="app_name">ImageSwitcher

Apabila aplikasi imageswitcher dijalankan, tampilannya sepertipadaGambar 2.6.

Gambar 2.6 Tampilan Project 4 : ImageSwitcher. Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer


2.5 Project 5 : Analog/Digital Clock Pada program inikitaakanmerancangaplikasi Android yang menampilkan jam analog dan digital. Buat project android dengan ketentuan sebagai berikut :  Project name : AnalogDigitalClock  Build Target : Android 2.1-update1  Application Name : analogdigital  Package name : id.ac.ub.pttik.analogdigital  Activity : AnalogDigitalActivity  Min SDK :7 analogdigital.java packageid.ac.ub.pttik.analogdigital;

importandroid.app.Activity; importandroid.os.Bundle; publicclassAnalogDigitalActivityextends Activity { /** Called when the activity is first created. */ @Override publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }

main.xml main.xml

Pemrograman Perangkat Mobile- BAB 5 – More Views android:layout_width="wrap_content"android:layout_height="wrap_content"/>

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. Buat project android dengan ketentuan sebagai berikut :  Project name : MenuLayout  Build Target : Android 2.1-update1  Application Name : menulayout  Package name : id.ac.ub.pttik.menulayout  Activity : MenuLayoutActivity  Min SDK :7 MenuLayoutActivity.java packageid.ac.ub.pttik.menulayout;


Pemrograman Perangkat Mobile- BAB 5 – More Views importandroid.app.Activity; importandroid.os.Bundle; importandroid.view.Menu; importandroid.view.MenuItem; importandroid.widget.Button; importandroid.widget.Toast;

publicclassMenuLayoutActivityextends Activity { @Override publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); 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); } MenuItem mnu2 = menu.add(0, 1, 1, "Item 2"); { mnu2.setAlphabeticShortcut('b'); mnu2.setIcon(R.drawable.icon); } MenuItem mnu3 = menu.add(0, 2, 2, "Item 3"); { mnu3.setAlphabeticShortcut('c');


Pemrograman Perangkat Mobile- BAB 5 – More Views mnu3.setIcon(R.drawable.next); } MenuItem mnu4 = menu.add(0, 3, 3, "Item 4"); { 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: Toast.makeText(this, "You clicked on Item 2", Toast.LENGTH_LONG) .show(); returntrue; case 2: Toast.makeText(this, "You clicked on Item 3", Toast.LENGTH_LONG) .show(); returntrue; case 3: Toast.makeText(this, "You clicked on Item 4", Toast.LENGTH_LONG) .show(); returntrue; case 4: Toast.makeText(this, "You clicked on Item 5", Toast.LENGTH_LONG)


Pemrograman Perangkat Mobile- BAB 5 – More Views .show(); returntrue; case 5: Toast.makeText(this, "You clicked on Item 6", Toast.LENGTH_LONG) .show(); returntrue; case 6: Toast.makeText(this, "You clicked on Item 7", Toast.LENGTH_LONG) .show(); returntrue; } returnfalse; } @Override publicbooleanonCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); CreateMenu(menu); returntrue; } @Override publicbooleanonOptionsItemSelected(MenuItem item) { returnMenuChoice(item); } }

menu.xml

Pemrograman Perangkat Mobile- BAB 5 – More Views android:layout_height="fill_parent">

<Buttonandroid:id="@+id/btn1"android:layout_width="fill_parent" android:layout_height="wrap_content"android:text="Hello, Tampilan Menu!"/>

Apabila aplikasi menulayout dijalankan, tampilannya sepertipadaGambar 2.8.

Gambar 2.8 Tampilan Menu Layout. Apabilakitamenekantombol MENU, tampilannyasepertipadaGambar 2.9.



Gambar 2.8 Tampilan MenuLayout Ketika Ditekan Tombol Menu. Apabilakitamenekanpilihan menu MORE, tampilannyasepertipadaGambar 2.9.

Gambar 2.9 Tampilan MenuLayout Ketika Ditekan Tombol MORE. Eriq Muhammad Adams J, ST., M.Kom; Widhy Hayuhardhika, S.Kom - Teknik Informatika-Program Teknologi Informasi dan Ilmu Komputer


3. SOALDAN PROJECT Soal 1. Jelaskanapa yang dimaksuddenganView ! 2. SebutkandanJelaskanmacam-macam view di Android !

Project Buatlahsebuahaplikasisederhana dalamsebuahgaleriview !

yang

menampilkangambar-gambarbendera

Negara

REFERENSI Yudhi ,Wibisono .2011. Pengantar Mobile Programming dengan Android, UPI. Safaat, H. Nazruddin. 2011. ANDROID PemrogramanAplikasi Mobile Smartphone dan Tablet PC Berbasis Android, PenerbitInformatika.


Pemrograman Perangkat Mobile

Recommend Documents