Praktikum IX Drag and Drop GUI dan Image Gallery

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 54

activityMain.java package com.example.guidraganddrop; import import import import import import import import import import import import

android.app.Activity; android.content.ClipData; android.graphics.drawable.Drawable; android.os.Bundle; android.view.DragEvent; android.view.MotionEvent; android.view.View; android.view.View.DragShadowBuilder; android.view.View.OnDragListener; android.view.View.OnTouchListener; android.view.ViewGroup; 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);


Hal 55

@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


Hal 56

Pada folder drawable,, 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 disesuaikan.


Hal 57

Pada file activitymain.xml layout utama ketikkan kode di bawah ini:


Hal 58

Sehingga susunan file project tersebut adalah:


Hal 59

Jalankan project tersebut. Dan drag and drop kan gambar icon android.


Hal 60

Percobaan 2 Percobaan ini menampilkan galery pada aplikasi android. Buat project dengan nama Gallery MainActivity.java package com.galerry; import import import import import import import import import import import import

android.app.Activity; android.content.Context; android.content.res.TypedArray; android.os.Bundle; android.view.View; android.view.ViewGroup; android.widget.AdapterView; android.widget.AdapterView.OnItemClickListener; android.widget.BaseAdapter; android.widget.Gallery; android.widget.ImageView; 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 61

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

}


Hal 62

Activitymain.xml

Tambahkan file attrs.xml dengan coding berikut: <declare-styleable name=”MyGallery”>

Tambahkan file gambar yang akan ditampilkan di folder drawable. Sehingga susunan file menjadi gambar di bawah ini.


Hal 63


Hal 64

Jalankan program yang sudah dibuat

TUGAS KELOMPOK PRESENTASI Buatlah aplikasi android untuk dipresentasikan sebelum UAS. Topik bebas. Kriteria penilaian: a. Penguasaan materi : 35% b. Presentasi : 25% c. Aplikasi : 30% d. Kekompakan : 10%


Hal 65

Praktikum IX Drag and Drop GUI dan Image Gallery

Recommend Documents