Praktikum IX S1 - · PDF fileandroid:src =”@drawable/ic_launcher” />

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.


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


@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:


Hal 57

dan ketikkan kode di bawah ini:



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:src=”@drawable/ic_launcher” />

</LinearLayout>

<LinearLayout

android:id=”@+id/topright”

android:layout_width=”160dp” android:layout_height=”200dp”




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



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


@+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”



@drawable/ic_launcher” />

Sehingga susunan file project tersebut adalah:

Hal 59


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


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


}

});

}

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;

}

}

}


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.



Hal 64


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


Jalankan program yang sudah dibuat

TUGAS KELOMPOK PRESENTASI


: 35%

: 25%

: 30%

: 10%

Hal 65


Praktikum IX S1 - · PDF fileandroid:src =”@drawable/ic_launcher” />

Documents

Transcript of Praktikum IX S1 - · PDF fileandroid:src =”@drawable/ic_launcher” />