Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Detail Studio Activity [Bagian 9]

Lanjut untuk pembahasan kali ini, penulis akan membuat detail informasi dari studio musik. Untuk pmebuatannya dibutuhkan sebuah layout .xml dan file activity .java. Untuk dapat menampilkan Detail Studio, user akan melalukan 2 kali klik pada marker, dimana klik pertama hanya menampilkan informasi awal pada marker, dan klik kedua kalinya akan pindah ke layout detail studio musik.

Untuk melihat langkah yang telah dikerjakan sebelumnya, kalian dapat melihatnya lagi pada link dibawah ini :

• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Project Baru [Bagian 1]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Membuat Splashscreen  [Bagian 2]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Mendapatkan API Key Google Maps [Bagian 3]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Menu Utama [Bagian 4]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Membuat Google Maps Activity [Bagian 5]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Membuat Database [Bagian 6]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: API [Bagian 7]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Menampilkan Marker Studio pada Maps [Bagian 8]

Berikut ini merupakan tahapan untuk menampilkan detail informasi dari studio musik :

1. Buat sebuah layout dan activity dengan klik kanan pada navigasi app > new > acticvity > Empty Activity. Beri nama DetailStudio. Jika sudah maka akan terbentuk activity dan layout seperti di dalam kotak merah :

2. Selanjutnya buka activity_detail_studio.xml masukan skrip dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ivaan.aplikasigis.DetailStudio"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="280dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#1D2247"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FBC02D">
<TextView
android:id="@+id/studioname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="NAMA STUDIO"
android:textColor="#FFFDE7"
android:textSize="25dp"
android:textStyle="bold" />
<ImageView
android:id="@+id/favbuttonwhite"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignRight="@id/studioname"
android:layout_marginLeft="35dp"
android:layout_marginRight="20dp"
android:layout_marginTop="13dp"
android:background="@drawable/starwhite" />
</RelativeLayout>
<TextView
android:id="@+id/studio_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FDD835"
android:gravity="center"
android:padding="5dp"
android:textColor="#22313F"
android:text="alamat studio"
android:textSize="15dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/textline"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="@drawable/money" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="@drawable/time2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/studio_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#6C7A89"
android:text="Price 50K/Hour"
android:textSize="15dp" />
<TextView
android:id="@+id/studio_hour"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#6C7A89"
android:text="Open At 09.00 AM"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
<com.google.android.gms.maps.MapView
android:id="@+id/mapdetail"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.CardView
android:id="@+id/cardview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardElevation="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#1D2247"
android:padding="5dp"
android:text="Music Instrument"
android:textColor="#FFFDE7"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="@+id/textalatmusik"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="10dp"
android:textColor="#6C7A89"
android:text="Music Instrument Detail"
android:textSize="16sp" />
<TextView
android:id="@+id/lastupdate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#E7DF86"
android:gravity="center"
android:padding="5dp"
android:text="Last updated : 3 Maret 2016"
android:textColor="#FFFDE7"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="@+id/cardview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardElevation="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#1D2247"
android:padding="5dp"
android:text="REVIEW"
android:textColor="#FFFDE7"
android:textSize="20sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="@+id/alatmusik"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#D32F2F"
android:gravity="center"
android:text="Music Instrument"
android:textColor="#FFFFFF"
android:textSize="18dp" />
<RatingBar
android:id="@+id/rating_alatmusik"
style="?android:attr/ratingBarStyleIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:numStars="5"
android:padding="1dp"
android:rating="5" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#1976D2"
android:gravity="center"
android:text="Recording"
android:textColor="#FFFFFF"
android:textSize="18dp" />
<RatingBar
android:id="@+id/rating_recording"
style="?android:attr/ratingBarStyleIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:numStars="5"
android:padding="2dp"
android:rating="3.5" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginBottom="5dp"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="20dp"
android:layout_weight="1"
android:background="#00796B"
android:gravity="center"
android:text="Place"
android:textColor="#FFFFFF"
android:textSize="18dp" />
<RatingBar
android:id="@+id/rating_tempat"
style="?android:attr/ratingBarStyleIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:isIndicator="true"
android:numStars="5"
android:padding="2dp"
android:rating="4" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/textline"
android:orientation="vertical">
<ImageView
android:id="@+id/share_button"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:padding="8dp"
android:src="@drawable/share" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="Share"
android:textColor="#6C7A89"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/textline"
android:orientation="vertical">
<ImageView
android:id="@+id/call_button"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="center"
android:padding="8dp"
android:src="@drawable/call" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="Call"
android:textColor="#6C7A89"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Pada layout diatas penulis menggunakan CardView agar tampilan lebih rapih dan juga CollapsingToolbarLayout agar tampilan gambar tidak menutupi ketika user melakukan scroll kebawah pada aplikasi.

3. Selanjutnya pada DetailStudio.java masukan skrip berikut :

public class DetailStudio extends AppCompatActivity {
private TextView studioName, studioAddress, studioPrice, studioHour, studioAlatMusik, studioUpdate;
private RatingBar ratingBarAlat, ratingBarRec, ratingBarTmpt;
public static String id, namaStudio, alamat, harga, jam, alatmusik, lastUpdate, gambar,
callSave, ratingAlat, ratingRec, ratingTmpt;
SliderLayout mDemoSlider;
private static final String TAG = "ListDislay";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail_studio);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
ratingBarAlat = (RatingBar) findViewById(R.id.rating_alatmusik);
ratingBarRec = (RatingBar) findViewById(R.id.rating_recording);
ratingBarTmpt = (RatingBar) findViewById(R.id.rating_tempat);
ratingBarAlat.setRating(Float.parseFloat(ratingAlat));
ratingBarRec.setRating(Float.parseFloat(ratingRec));
ratingBarTmpt.setRating(Float.parseFloat(ratingTmpt));
studioName = (TextView) findViewById(R.id.studioname);
studioAddress = (TextView) findViewById(R.id.studio_address);
studioPrice = (TextView) findViewById(R.id.studio_price);
studioHour = (TextView) findViewById(R.id.studio_hour);
studioAlatMusik = (TextView) findViewById(R.id.textalatmusik);
studioUpdate = (TextView) findViewById(R.id.lastupdate);
studioName.setText(namaStudio);
studioAddress.setText(alamat);
studioPrice.setText(harga);
studioHour.setText(jam);
studioAlatMusik.setText(alatmusik);
studioUpdate.setText(lastUpdate);
mDemoSlider = (SliderLayout) findViewById(R.id.slider);
getGambar();
}
private void getGambar() {
String url = "http://cloudofoasis.com/api/Ivan/getGambar.php?StudioMusik=" + id;
Log.i(TAG, url);
JsonArrayRequest request = new JsonArrayRequest
(Request.Method.GET, url, new Response.Listener<JSONArray>() {
@Override
public void onResponse(JSONArray response) {
int numData = response.length();
if (numData == 0) mDemoSlider.setVisibility(View.GONE);
else {
JSONObject slider_studio;
Log.i(TAG, "On Response Get Gambar");
String[] gambar_studio = new String[numData], nama_studio = new String[numData];
HashMap<String, String> url_maps = new HashMap<String, String>();
for (int i = 0; i < numData; i++) {
try {
slider_studio = response.getJSONObject(i);
gambar_studio[i] = slider_studio.getString("gambar");
nama_studio[i] = slider_studio.getString("nama");
url_maps.put(nama_studio[i], "http://cloudofoasis.com/api/Ivan/slider_studio/" + gambar_studio[i]);
} catch (JSONException je) {
Toast.makeText(DetailStudio.this, "JSON ERROR", Toast.LENGTH_SHORT).show();
}
}
for (String name : url_maps.keySet()) {
TextSliderView textSliderView = new TextSliderView(DetailStudio.this);
textSliderView.description(name).image(url_maps.get(name)).setScaleType(BaseSliderView.ScaleType.Fit);
textSliderView.bundle(new Bundle());
textSliderView.getBundle().putString("extra", name);
mDemoSlider.addSlider(textSliderView);
mDemoSlider.setPresetTransformer(SliderLayout.Transformer.ZoomOut);
mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
mDemoSlider.setCustomAnimation(new DescriptionAnimation());
mDemoSlider.setDuration(4000);
}
}
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
}
});
Volley.newRequestQueue(this).add(request);
}
@Override
public void onBackPressed() {
Intent intent = new Intent(this, MapsActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(intent);
finish();
}
//untuk tombol back
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
// app icon in action bar clicked; go home
Intent intent = new Intent(this, MapsActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(intent);
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}

Pada skrip diatas beberapa variabel mendapat data yang dikirimkan melalui MapsActivity.java. Kemudian variabel-variabel seperti namaStudio, alamat, harga, jam, alatmusik, lastUpdate, gambar, callSave, ratingAlat, ratingRec, ratingTmpt akan ditempatkan ke komponen dari XML Detail Studio sesuai dengan id pada Layout XML dari Detail Studio.

Kemudian Untuk pamenaggilan gambar dari database menggunakan method sendiri dengan nama getGambar(). Dan method tersebut dipanggil di dalam onCreate.

getGambar.php (http://pastebin.com/6LBZJRMX)

4. Pada ActivityMaps.java tambahkan potongan program dibawah ini  di dalam method getLokasi yang telah dibuat sebelumnya :

    private void getLokasi() {
String url = "http://cloudofoasis.com/api/Ivan/getStudio.php";
JsonArrayRequest request = new JsonArrayRequest
(Request.Method.GET, url, new Response.Listener<JSONArray>() {
@Override
public void onResponse(JSONArray response) {
numData = response.length();
Log.d("DEBUG_", "Parse JSON");
latLng = new LatLng[numData];
markerD = new Boolean[numData];
nama = new String[numData];
alamat = new String[numData];
harga = new String[numData];
jam = new String[numData];
call = new String[numData];
update = new String[numData];
alatmusik = new String[numData];
ratingalatmusik = new String[numData];
ratingrecording = new String[numData];
ratingtempat = new String[numData];
id = new String[numData];
gambar = new String[numData];
for (int i = 0; i < numData; i++) {
try {
JSONObject data = response.getJSONObject(i);
id[i] = data.getString("id");
latLng[i] = new LatLng(data.getDouble("latitude"),
data.getDouble("longitude"));
nama[i] = data.getString("nama");
alamat[i] = data.getString("alamat");
harga[i] = data.getString("harga");
jam[i] = data.getString("jam");
call[i] = data.getString("call");
update[i] = data.getString("lastupdate");
alatmusik[i] = data.getString("alatmusik");
ratingalatmusik[i] = data.getString("ratingalatmusik");
ratingrecording[i] = data.getString("ratingrecording");
ratingtempat[i] = data.getString("ratingtempat");
gambar[i] = data.getString("gambar");
latitude[i] = data.getDouble("latitude");
longitude[i] = data.getDouble("longitude");
markerD[i] = false;
mMap.addMarker(new MarkerOptions()
.position(latLng[i])
.title(nama[i])
.snippet(alamat[i])
.icon(BitmapDescriptorFactory.fromResource(R.drawable.markerstudio)));
} catch (JSONException je) {
}
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng[i], 15.5f));
}
//----------------------MARKER KLIK
mMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
@Override
public boolean onMarkerClick(Marker marker) {
Log.d("DEBUG_", "Marker clicked");
for (int i = 0; i < numData; i++) {
if (marker.getTitle().equals(nama[i])) {
if (markerD[i]) {
Log.d("DEBUG_", "panggil activity");
DetailStudio.id = id[i];
DetailStudio.namaStudio = nama[i];
DetailStudio.alamat = alamat[i];
DetailStudio.harga = harga[i];
DetailStudio.jam = jam[i];
DetailStudio.callSave = call[i];
DetailStudio.alatmusik = alatmusik[i];
DetailStudio.lastUpdate = update[i];
DetailStudio.ratingAlat = ratingalatmusik[i];
DetailStudio.ratingRec = ratingrecording[i];
DetailStudio.ratingTmpt = ratingtempat[i];
DetailStudio.gambar = gambar[i];
DetailStudio.latitude = latitude[i];
DetailStudio.longitude = longitude[i];
Intent intent = new Intent(MapsActivity.this, DetailStudio.class);
startActivity(intent);
markerD[i] = false;
} else {
Log.d("DEBUG_", "show info");
// mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(marker.getPosition(), 15.5f));
markerD[i] = true;
marker.showInfoWindow();
Toast ts = Toast.makeText(MapsActivity.this,"Tap once again on marker, for detail Studio Music",Toast.LENGTH_LONG);
TextView v = (TextView) ts.getView().findViewById(android.R.id.message);
if( v != null)
v.setGravity(Gravity.CENTER);
ts.show();
}
} else {
markerD[i] = false;
}
}
return false;
}
});
}
} , new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
AlertDialog.Builder builder = new AlertDialog.Builder(MapsActivity.this);
builder.setTitle("Error!");
builder.setMessage("No Internet Connection");
builder.setIcon(android.R.drawable.ic_dialog_alert);
builder.setPositiveButton("Refresh", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
getLokasi();
}
});
AlertDialog alert = builder.create();
alert.show();
}
});
Volley.newRequestQueue(this).add(request);
}

Potongan skrip yang ditambahkan dari skrip yang sebelumnya sudah di kerjakan adalah menamahkan fungsi onClick pada marker. Ketika user melakukan klik sekali pada marker maka akan menampilkan informasi nama dan alamat studio, kemudian jika di klik kembali akan menuju detail studio musik. Lalu cara untuk membedakan data yang tampil adalah studio musik yang kita klik dengan menambahkan kondisi

  if (marker.getTitle().equals(nama[i])

Dengan demikian data yang akan ditampilkan pada detail studio adalah data dari marker yang telah kita klik.

5. Jika kalian sudah menambahkannya pada file xml dan java, selanjutnya kalian harus menambahkan library untuk CardView, daimaja.slider, dan nineoldandroids pada gradle. Berikut ini merupakan library yang harus kalian tambahkan :

compile 'com.daimajia.slider:library:1.1.5@aar'

compile 'com.android.support:cardview-v7:23.1.1'

compile 'com.nineoldandroids:library:2.4.0'

5. Langkah terakhir adalah coba untuk jalankan program. Masuk ke menu maps, kemudian klik 2x pada marker, apakah sudah masuk kedalam detail informasi studio musik terpilih? Jika sudah maka akan tampil detail studio musik seperti dibawah ini :

Output Klik sekali pada Marker:

Output Klik 2x pada Marker, masuk ke Detail Studio Musik:

Demikianlah tutorial untuk bagian membuat detail studio musik, selanjunya akan dijelaskan cara membuat peritntah Share dan Call. Nantikan tutorial selanjutnya.