praktikum ix s1 - · pdf fileandroid:src =”@drawable/ic_launcher” />
TRANSCRIPT
Modul Praktikum Mobile Computing – adam ab -2014 Hal 54
Praktikum IX
Drag and Drop GUI dan Image Gallery
Pokok bahasan:
• Drag and Drop GUI
• Fungsi shape
Tujuan Belajar:
Setelah mempelajari modul ini mahasiswa diharapkan mengetahui:
• Tampilan GUI yang lebih menarik
• Konsep drawable
• Shape xml
Teori Dasar
Gallery merupakan layout widget yang menampilkan scroll secara horizontal dan posisi gambar
yang dipilih pada tengah layar. Pada latihan ini menggunakan komponen UI yaitu gallery untuk
menampilkan gambar yang tersimpan dalam folder drawable.
Pada latihan 1 dibuat aplikasi userinterface yang memanfaatkan dragevent untuk membuat
tampilan yang bisa di drop and drag
Latihan 1
Buatlah projeck Android.
Modul Praktikum Mobile Computing – adam ab -2014 Hal 55
activityMain.java
package com.example.guidraganddrop;
import android.app.Activity;
import android.content.ClipData; import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.DragEvent; import android.view.MotionEvent;
import android.view.View; import android.view.View.DragShadowBuilder;
import android.view.View.OnDragListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.myimage1).setOnTouchListener(new MyTouchListener());
findViewById(R.id.myimage2).setOnTouchListener(new MyTouchListener());
findViewById(R.id.myimage3).setOnTouchListener(new MyTouchListener());
findViewById(R.id.myimage4).setOnTouchListener(new MyTouchListener());
findViewById(R.id.topleft).setOnDragListener(new MyDragListener());
findViewById(R.id.topright).setOnDragListener(new MyDragListener());
findViewById(R.id.bottomleft).setOnDragListener(new MyDragListener()); findViewById(R.id.bottomright).setOnDragListener(new MyDragListener());
}
private final class MyTouchListener implements OnTouchListener { public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) { ClipData data = ClipData.newPlainText(“”, “”);
DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
view.startDrag(data, shadowBuilder, view, 0); view.setVisibility(View.INVISIBLE);
return true; } else {
return false; }
}
}
class MyDragListener implements OnDragListener { Drawable enterShape = getResources().getDrawable(R.drawable.shape_droptarget);
Drawable normalShape = getResources().getDrawable(R.drawable.shape);
Modul Praktikum Mobile Computing – adam ab -2014 Hal 56
@Override
public boolean onDrag(View v, DragEvent event) {
int action = event.getAction();
switch (event.getAction()) {
case DragEvent.ACTION_DRAG_STARTED:
// do nothing break;
case DragEvent.ACTION_DRAG_ENTERED:
v.setBackgroundDrawable(enterShape);
break;
case DragEvent.ACTION_DRAG_EXITED: v.setBackgroundDrawable(normalShape);
break; case DragEvent.ACTION_DROP:
// Dropped, reassign View to ViewGroup
View view = (View) event.getLocalState(); ViewGroup owner = (ViewGroup) view.getParent();
owner.removeView(view); LinearLayout container = (LinearLayout) v;
container.addView(view); view.setVisibility(View.VISIBLE);
break;
case DragEvent.ACTION_DRAG_ENDED: v.setBackgroundDrawable(normalShape);
default: break;
}
return true; }
} }
Pada folder Layout, buatlah folder drawable. Dan buatlah file xml dengan nama shape.xml.
ketikkan kode pada file shape.xml di bawah ini
Modul Praktikum Mobile Computing
Pada folder drawable, buatlah juga file
Catatan: nama file xml boleh bebas tetapi kode yang berhubungan dengan file tersebut harus
disesuaikan.
Mobile Computing – adam ab -2014
, buatlah juga file shape_droptarget.xml dan ketikkan kode di bawah ini:
Catatan: nama file xml boleh bebas tetapi kode yang berhubungan dengan file tersebut harus
Hal 57
dan ketikkan kode di bawah ini:
Catatan: nama file xml boleh bebas tetapi kode yang berhubungan dengan file tersebut harus
Modul Praktikum Mobile Computing – adam ab -2014 Hal 58
Pada file activitymain.xml layout utama ketikkan kode di bawah ini:
<?xml version=”1.0” encoding=”utf-8”?>
<GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent”
android:layout_height=”match_parent” android:columnCount=”2”
android:columnWidth=”300dp”
android:orientation=”vertical” android:rowCount=”2”
android:stretchMode=”columnWidth” >
<LinearLayout
android:id=”@+id/topleft”
android:layout_width=”160dp”
android:layout_height=”200dp” android:layout_column=”0”
android:layout_row=”0”
android:background=”@drawable/shape” >
<ImageView
android:id=”@+id/myimage1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_column=”0”
android:layout_row=”0”
android:src=”@drawable/ic_launcher” />
</LinearLayout>
<LinearLayout
android:id=”@+id/topright”
android:layout_width=”160dp” android:layout_height=”200dp”
android:layout_column=”1”
android:layout_row=”0”
android:background=”@drawable/shape” >
<ImageView
android:id=”@+id/myimage2” android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_column=”0” android:layout_row=”0”
android:src=”@drawable/ic_launcher” /> </LinearLayout>
<LinearLayout
android:id=”@+id/bottomleft”
android:layout_width=”160dp” android:layout_height=”200dp”
android:layout_column=”0” android:layout_row=”1”
android:background=”@drawable/shape” >
Modul Praktikum Mobile Computing
<ImageView
android:id=”@+id/myimage3
android:layout_width
android:layout_height android:src=”@drawable/ic_launcher
</LinearLayout>
<LinearLayout
android:id=”@+id/bottomright android:layout_width
android:layout_height android:layout_column
android:layout_row= android:background=
<ImageView android:id=”@+id/myimage4
android:layout_width android:layout_height
android:layout_column
android:layout_row
android:src=”@drawable/ic_launcher
</LinearLayout>
</GridLayout>
Sehingga susunan file project tersebut adalah:
Mobile Computing – adam ab -2014
@+id/myimage3”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” @drawable/ic_launcher” />
@+id/bottomright” android:layout_width=”160dp”
android:layout_height=”200dp” android:layout_column=”1”
=”1” =”@drawable/shape” >
@+id/myimage4”
android:layout_width=”wrap_content” android:layout_height=”wrap_content”
android:layout_column=”0”
android:layout_row=”0”
@drawable/ic_launcher” />
Sehingga susunan file project tersebut adalah:
Hal 59
Modul Praktikum Mobile Computing
Jalankan project tersebut. Dan drag and drop kan gambar icon android.
Mobile Computing – adam ab -2014
Dan drag and drop kan gambar icon android.
Hal 60
Modul Praktikum Mobile Computing – adam ab -2014 Hal 61
Percobaan 2
Percobaan ini menampilkan galery pada aplikasi android.
Buat project dengan nama Gallery
MainActivity.java
package com.galerry;
import android.app.Activity; import android.content.Context;
import android.content.res.TypedArray; import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup; import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener; import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;
@SuppressWarnings(“deprecation”)
public class MainActivity extends Activity {
//---menampilkan gambar---
Integer[] imageIDs = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3,
R.drawable.pic4,
R.drawable.pic5,
R.drawable.pic6,
R.drawable.pic7
};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
Gallery gallery = (Gallery) findViewById(R.id.gallery1); gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View v, int position, long id)
{ Toast.makeText(getBaseContext(),
“Gambar” + (position + 1) + “ dipiih”,
Toast.LENGTH_SHORT).show();
//---menampilkan gambar yang telah dipilih--- ImageView imageView = (ImageView) findViewById(R.id.image1);
imageView.setImageResource(imageIDs[position]);
Modul Praktikum Mobile Computing – adam ab -2014 Hal 62
}
});
}
public class ImageAdapter extends BaseAdapter { private Context context;
private int itemBackground;
public ImageAdapter(Context c)
{
context = c;
//---set latar belakang ; disekeliling gambar-------- TypedArray a =
obtainStyledAttributes(R.styleable.MyGallery);
itemBackground = a.getResourceId( R.styleable.MyGallery_android_galleryItemBackground, 0);
a.recycle(); }
//---banyaknya gambar---
public int getCount() {
return imageIDs.length; }
//---ID item---
public Object getItem(int position) {
return position; }
// ---kembali ke item ID---
public long getItemId(int position) {
return position;
}
// ---kembali ke image view---
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(context);
imageView.setImageResource(imageIDs[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
imageView.setBackgroundResource(itemBackground);
return imageView;
}
}
}
Modul Praktikum Mobile Computing – adam ab -2014 Hal 63
Activitymain.xml
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent”
android:layout_height=”fill_parent” android:orientation=”vertical”>
<Gallery android:id=”@+id/gallery1”
android:layout_width=”fill_parent” android:layout_height=”wrap_content” />
<ImageView
android:id=”@+id/image1”
android:layout_width=”fill_parent” android:layout_height=”250dp”
android:scaleType=”fitXY” />
</LinearLayout>
Tambahkan file attrs.xml dengan coding berikut:
<resources>
<declare-styleable name=”MyGallery”> <attr name=”android:galleryItemBackground” />
</declare-styleable>
</resources>
Tambahkan file gambar yang akan ditampilkan di folder drawable. Sehingga susunan file
menjadi gambar di bawah ini.
Modul Praktikum Mobile Computing
Mobile Computing – adam ab -2014
Hal 64
Modul Praktikum Mobile Computing
Jalankan program yang sudah dibuat
TUGAS KELOMPOK PRESENTASI
Buatlah aplikasi android untuk dipresentasikan sebelum UAS. Topik bebas.
Kriteria penilaian:
a. Penguasaan materi
b. Presentasi
c. Aplikasi
d. Kekompakan
Mobile Computing – adam ab -2014
Jalankan program yang sudah dibuat
TUGAS KELOMPOK PRESENTASI
Buatlah aplikasi android untuk dipresentasikan sebelum UAS. Topik bebas.
: 35%
: 25%
: 30%
: 10%
Hal 65
Buatlah aplikasi android untuk dipresentasikan sebelum UAS. Topik bebas.