Modul Bahan Ajar UBDistanceLearning Pemrograman Perangkat...

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

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

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

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



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.



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;



@Override

protectedvoidonCreate(Bundle 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 Android yang memperbolehkan user untukmelakukanseleksitanggal, bulan, dantahun. 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



publicclassDatePickerActivityextends Activity {

/** Called when the activity is first created. */



@Override

publicvoidonCreate(Bundle 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.



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.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,









};

@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

{



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;

}

}



}

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.



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.



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.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---



Integer[] imageIDs = {







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()

{





{

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()



{

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);

returnimageView;

}

}

}

displayview.xml


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




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


<resources>

<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.



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;



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"



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. 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;





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');



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:


.show();

returntrue;

case 2:


.show();

returntrue;

case 3:


.show();

returntrue;

case 4:




.show();

returntrue;

case 5:


.show();

returntrue;

case 6:


.show();

returntrue;

}

returnfalse;

}

@Override

publicbooleanonCreateOptionsMenu(Menu menu) {

super.onCreateOptionsMenu(menu);

CreateMenu(menu);

returntrue;

}

@Override

publicbooleanonOptionsItemSelected(MenuItem item) {

returnMenuChoice(item);

}

}

menu.xml







<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.



Gambar 2.8 Tampilan MenuLayout Ketika Ditekan Tombol Menu.

Apabilakitamenekanpilihan menu MORE, tampilannyasepertipadaGambar 2.9.

Gambar 2.9 Tampilan MenuLayout Ketika Ditekan Tombol MORE.



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.

Modul Bahan Ajar UBDistanceLearning Pemrograman Perangkat...

Documents

Transcript of Modul Bahan Ajar UBDistanceLearning Pemrograman Perangkat...