Androd Studio : Sukses! Cara Menampilkan Lokasi Latitude Longitude dengan Webview

27 Jan 2023 15:45
Dipost oleh Admin
183
0
Share:

sobatcoding.com - Cara Menampilkan Lokasi Latitude Longitude Menggunakan Webview Android Studio [ Webview geolocation ]

Pada artikel kali ini kita akan belajar menggunakan webview android studio untuk menampilkan lokasi latitude dan longitude menggunakan HTML. Pada dasarnya kita menamplikan file HTML ke dalam Android. Dengan cara ini kita tidak perlu membuat UI UX menggunakan Android Studio karena UI UX sudah dihandle oleh HTML. Hal ini sangat membantu bagi kalian yang kurang jago dalam UI UX Android Studio.

Baik, langsung saja kita ikuti langkah-langkahnya

Android Manifest

Langkah pertama setelah kita buat project baru. Kita buka file AndroidManifest.xml. Tambahkan permission INTERNET, ACCESS_COARSE_LOCATION, dan ACCESS_FINE_LOCATION.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Android Layout

Kalian buka file activity_main.xml, kemudian masukkan kode berikut

<?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">

    <WebView
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ProgressBar
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="110dp"
        android:id="@+id/progressBar"
        />

</RelativeLayout>

Dalam kode di atas kita tambahkan script untuk menampilkan webview progress bar android sebelum layout berhasil ditampilkan.

Android MainActivity

Pada MainActivity.java, masukkan kode berikut

package com.example.webviewgeo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;

import android.Manifest;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    ProgressBar bar;

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

        webView = findViewById(R.id.webView);
        webView.loadUrl("https://androidtest.appsobatcoding.com/");
        bar=(ProgressBar) findViewById(R.id.progressBar);

        webView.setWebViewClient(new myWebclient());
        
    }

    public class myWebclient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            bar.setVisibility(View.GONE);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
            webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }
}

Jangan lupa untuk enabled javascript agar script bisa di jalankan

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

Tambahakan request runtime permission. Fungsinya adalah agar request permission Android Studio dipanggil saat aplikasi pertama kali diluncurkan

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

       //tambahkan kode berikut
        ActivityCompat.requestPermissions(this, new String[]{
                Manifest.permission.ACCESS_FINE_LOCATION,
                Manifest.permission.ACCESS_COARSE_LOCATION
        }, 0);

Tambahkan handle untuk permission access Geolocation ke Web Chrome

 webView.setWebChromeClient(new WebChromeClient() {
     @Override
      public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
           callback.invoke(origin, true, false);
      }
});

Full source code adalah sebagai berikut:

package com.example.webviewgeo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;

import android.Manifest;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    ProgressBar bar;

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

        ActivityCompat.requestPermissions(this, new String[]{
                Manifest.permission.ACCESS_FINE_LOCATION,
                Manifest.permission.ACCESS_COARSE_LOCATION
        }, 0);

        webView = findViewById(R.id.webView);
        webView.loadUrl("https://androidtest.appsobatcoding.com/");
        bar=(ProgressBar) findViewById(R.id.progressBar);
        //setContentView(webView);

        webView.setWebViewClient(new myWebclient());
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
                callback.invoke(origin, true, false);
            }
        });
    }

    public class myWebclient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            bar.setVisibility(View.GONE);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
            webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }
}

Index.html

Pada file html buatlah kode seperti berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Test Geolocation</title>
  </head>
  <body>
    <script>
      function getLocationConstant()
      {
        if(navigator.geolocation)
        {
          navigator.geolocation.getCurrentPosition(onGeoSuccess,onGeoError);
        } else {
          alert("No GPS support");
        }
      } 
        
      function onGeoSuccess(event)
      {
          document.getElementById("Lat").innerHTML =  event.coords.latitude;
          document.getElementById("Long").innerHTML = event.coords.longitude;
          
      }
      
      
      function onGeoError(event)
      {
        alert("Error code " + event.code + ". " + event.message);
      }
          
    </script>
    
    <div id="wrapper=location" style="text-align: center;">
      <p>Lat : <span id="Lat">0</span> Long : <span id="Long">0</span></p>
      <button onclick="getLocationConstant()" >Get Location</button>
    </div>

  </body>
</html>

Android Studio yang dipakai untuk case di atas adalah SDK min 21 dan target SDK 32

Sekian tutorial kali ini. Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.

Semoga bermanfaat