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

New Dialog

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

Jenis XML

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

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

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.

2 thoughts on “Menambahkan Dialog pada Marker

  1. Ping balik: Menampilkan Rute Tercepat (Driving Directions) di Google Map Android | ID – Dev

  2. Setelah itu Anda harus install XAMPP. pilih next seperti biasa tapi jangan next terlalu cepat karena pada next berikutnya Anda akan diminta untuk memasukkan username dan password untuk bisa mengakses localhost Anda. setelah itu next berikutnya terdapat form pilihan berupa checkList. pada bagian bawah terdapat beberapa aplikasi yang ingin diikut sertakan dalam proses penginstalan. Checklist semuanya terkecuali pilihan FILEZILLA (jika Anda ingin menginstall filezilla juga Anda harus men-checklist pilihan tersebut). setelah itu pilih next dan finish. kemudian muncul kotak dialog pada layar untuk melihat control panel XAMPP. Didalam Control Panel XAMPP Anda bisa melihat aplikasi apa saja yang sudah running/start. Anda tinggal mengklik Start disebelah nama aplikasi yang ingin Anda run. Biasanya yang sudah running otomatis adalah Apache dan MySQL. Kemudian klik tanda Silang Merah di Pojok Kanan Atas atau exit. Untuk membukanya lagi Anda hanya klik Shortcut XAMPP atau terdapat di start>>All Program>>Apache Friend>>XAMPP>>XAMPP Control Panel.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s