[Tutorial Lanjutan] Cara Menambahkan SearchView Pada Google Maps di Android Studio

Tutorial Cara Menambahkan SearchView Pada Google Maps di Android Studio

Halo semuanya, senang berjumpa dengan kalian. Melanjutkan tutorial sebelumnya yang dimana kita telah belajar cara membuat aplikasi android untuk menampilkan google maps di android studio dan juga kita telah belajar cara membuat menampilkan multi marker pada google maps di android studio. Maka pada artikel ini kita akan belajar Cara Menambahkan atau Menggunakan SearchView Pada Google Maps di Android Studio.

Banyak aplikasi yang menyediakan fitur sehingga user dapat menentukan lokasi dimana mereka harus menempatkan marker pada maps. Jadi dalam artikel ini, kita akan belajar cara menerapkan SearchView pada Google Maps di aplikasi Android sehingga kita dapat mencari nama lokasi dan menambahkan penanda ke lokasi tersebut.

Tutorial Cara Menambahkan atau Menerapkan SearhView Pada Google Maps di Android Studio

Sesuai dari judul artikel, maka pada tutorial ini kita tidak akan membuat projek baru. Kalian bisa mengikuti tutorial pada link dibawah untuk mempelajari tutorial pada projek sebelumnya.

Daftar file xml layout yang diperbarui dalam projek ini:

  1. activity_main.xml (tutorial sebelumnya + perbarui)

Daftar file java activity yang diperbarui dalam projek ini:

  1. MainActivity.java (tutorial sebelumnya + perbarui)

Dibawah ini adalah langkah-langkah dalam membuat aplikasi Peta App.

Langkah 1: Menambahkan layout SearchView pada activity_main.xml

Buka file activity_main.xml dalam folder res lalu tambahkan widget SearchView pada layout RelativeLayout. Dibawah ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <androidx.appcompat.widget.SearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@color/white"
        android:elevation="5dp"
        app:iconifiedByDefault="false"
        app:queryHint="Cari disini" />
</RelativeLayout>

Langkah 2: Tambahkan kode pada file MainActivity.java

Buka file MainActivity.java dalam folder java. Deklarasikan SearchView dengan variabel searchView. Lalu gunakan query listener pada searchView. Untuk lebih lanjut, dibawah ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.petaapp/MainActivity.java

package com.androidrion.petaapp;

import android.location.Address;
import android.location.Geocoder;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.appcompat.widget.SearchView;
import androidx.fragment.app.FragmentActivity;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity implements OnMapReadyCallback {

    GoogleMap google_map;
    SearchView searchView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        searchView = findViewById(R.id.search_view);

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        assert mapFragment != null;
        mapFragment.getMapAsync(this);

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                String lokasi = searchView.getQuery().toString();

                List<Address> addressList = null;

                Geocoder geocoder = new Geocoder(MainActivity.this);
                try {
                    addressList = geocoder.getFromLocationName(lokasi, 1);
                } catch (IOException e) {
                    e.printStackTrace();
                }

                assert addressList != null;
                Address address = addressList.get(0);

                LatLng latLng = new LatLng(address.getLatitude(), address.getLongitude());

                google_map.addMarker(new MarkerOptions().position(latLng).title(lokasi));
                google_map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 10));
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                return false;
            }
        });

        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        google_map = googleMap;
    }

}

Langkah 3: Jalankan projek

Apabila kalian sudah menambahkan kode diatas, maka jalankan projek android studio kalian. Saat aplikasi berjalan, kalian bisa melihat adanya kolom pencarian diatas pada tampilan aplikasi. Kalian bisa menulis nama tempat yang ada pada peta. Ketika kalian menekan tombol enter pada keyboard, maka peta pada aplikasi akan secara otomatis mengarahkan ke tempat yang kalian tulis pada kolom pencarian. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada video dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Cara Menambahkan SearchView pada Google Maps di Android Studio. Tutorial diatas sangatlah mudah untuk dikerjakan karena kita hanya menggunakan satu query saja pada searchview. Dan juga tidak begitu rumit untuk mendesain layoutnya.

Jika kalian mengalam kendala saat melakukan tutorial diatas, silahkan berkomentar dibawah pada artikel ini. Dan jangan lupa juga untuk Subscribe Chanel YouTube Android Rion – Tutorial agar kalian bisa mendapatkan tutorial versi videonya. Semoga tutorial ini bisa membantu kalian. Terima kasih. 🙂

Exit mobile version