Menambahkan Dialog pada Marker

Tutorial ini merupakan tutorial lanjutan dari tutorial sebelumnya. Sekarang kita akan belajar membuat dialog yang muncul pada saat kita meng-klik marker pada map view. Langsung saja ke tutorialnya.

Membuat Layout Dialog

Dialog juga perlu desain agar dapat tampil seperti yang diinginkan. Oleh karena itu kita harus mendesain terlebih dahulu. Di sini desainnya cukup simpel saja karena kita tidak butuh yang terlalu rumit. Yaitu klik kanan pada folder /res/layout/. Kemudian pilih New > Other, maka akan tampil seperti ini.

New Dialog

Kemudian akan tampil seperti di bawah ini, masukkan dialog_marker.xml sebagai nama file-nya.

Jenis XML

Jika sudah, sekarang kita dapat mendesain layout-nya, pastikan kita menginstall tool-nya dengan lengkap terlebih dahulu. Jika sudah benar, kita mendapatkan tampilan seperti di bawah ini, namun jika tidak dapat terinstall, kita gunakan saja droiddraw.

Desain Layout

Pastikan xml file-nya seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" android:baselineAligned="true">
    <TextView android:layout_width="fill_parent" 
	    android:text="TextView" android:id="@+id/deskripsi" 
	    android:layout_height="fill_parent" 
	    android:layout_gravity="center" 
	    android:layout_margin="10dip"></TextView>
</LinearLayout>

Kemudian edit file CustomItemizedOverlay.java

package com.iddev.googlemap;

import java.util.ArrayList;

import android.app.Dialog;
import android.graphics.drawable.Drawable;
import android.widget.TextView;
import android.widget.Toast;

import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.OverlayItem;

public class CustomItemizedOverlay extends ItemizedOverlay {
	private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
	private MainActivity mainActivity;

	public CustomItemizedOverlay(Drawable defaultMarker) {
		super(boundCenterBottom(defaultMarker));
	}
	
	public CustomItemizedOverlay(Drawable defaultMarker, MainActivity mainActivity) {
		super(boundCenterBottom(defaultMarker));
		this.mainActivity = mainActivity;
	}

	public void addOverlay(OverlayItem overlay) {
		mOverlays.add(overlay);
		populate();
	}

	@Override
	protected OverlayItem createItem(int i) {
		return mOverlays.get(i);
	}

	@Override
	public int size() {
		return mOverlays.size();
	}

	@Override
	protected boolean onTap(int index) {
		OverlayItem item = mOverlays.get(index);
		//inisialisasi dialog
		Dialog dialog = new Dialog(this.mainActivity);
		//menerapkan layout pada dialog
		dialog.setContentView(R.layout.dialog_marker);
		dialog.setTitle(item.getTitle());
		TextView deskripsi = (TextView)dialog.findViewById(R.id.deskripsi);
		deskripsi.setText(item.getSnippet());
		
		dialog.show();
		
		return true;
	}
}

Dan edit sedikit bagian MainActivity.java

package com.iddev.googlemap;

import java.util.List;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.Window;

public class MainActivity extends MapActivity {
	public MapView mapView;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);

		mapView = (MapView) findViewById(R.id.mapview);
		mapView.setBuiltInZoomControls(true);
		
		// set posisi tengah dari map
		MapController mapController = mapView.getController();
		mapController.setCenter(new GeoPoint(-7298115, 112739451));
		mapController.setZoom(12);
		
		List<Overlay> mapOverlays = mapView.getOverlays();
		Drawable drawable = this.getResources().getDrawable(R.drawable.bank);
		CustomItemizedOverlay itemizedoverlay = new CustomItemizedOverlay(drawable, this);
		GeoPoint point = new GeoPoint(-7298115, 112739451);
		OverlayItem overlayitem = new OverlayItem(point, "Ini adalah Judul", "Ini adalah keterangan");
		itemizedoverlay.addOverlay(overlayitem);
		mapOverlays.add(itemizedoverlay);
    }
    
    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}

Sekarang kita launch emulator dan aplikasinya

Hasil Akhir

Penjelasan :

Kode :

//inisialisasi dialog
Dialog dialog = new Dialog(this.mainActivity);
//menerapkan layout pada dialog
dialog.setContentView(R.layout.dialog_marker);
dialog.setTitle(item.getTitle());
TextView deskripsi = (TextView)dialog.findViewById(R.id.deskripsi);
deskripsi.setText(item.getSnippet());
dialog.show();

menjelaskan tentang pembuatan sebuah dialog dari layout (dialog_layout.xml).

Kode :

OverlayItem overlayitem = new OverlayItem(point, "Ini adalah Judul", "Ini adalah keterangan");

Merupakan inisialisasi dari judul dan deskripsi yang diberikan.