Aplikasi Webview Menggunakan Android Studio

Cara Membuat Aplikasi Webview Menggunakan Android Studio

Pengembang aplikasi mobile sekarang sudah semakin manjamur , benefit yang akan di dapatkan pun akan semakin banyak melalui aplikasi yang di publish pada playstore. Bagaimana tidak, trend ini di dukung oleh semakin banyaknya smartphone di pasaran. Ini akan meningkatkan pula kebutuhan aktifitas secara mobile bagi para penggunanya.

Disini saya akan membahas tentang Bagaimana Membuat Aplikasi Webview Menggunakan Android Studio.

Kenapa menggunakan webview ? Bukannya android itu menggunakan bahasa pemrograman java OOP ya.

Baiklah mari kita bahas terlebih dahulu tentang webview. Apa yang anda ketahui tentang webview?

Webview adalah Platform untuk menampilkan konten web yang nantinya akan di tampilkan pada aplikasi android yang akan dibuat. Bagaimana cara kerja webview sebenarnya? Cara kerjanya tidak jauh seperti anda membuka browser dan melakukan penelusuran pada browser.

Step Pembuatan Aplikasi

1. Buat Project dengan Start a new Android Studio Project

2. Lalu isikan Application Name  dan Company domain dengan nama yang anda inginkan, kemudian Klik Next dan Hingga Finish. Biarkan gradle menggenerate project kita.

3. AndroidManifest.xml, tambahkan kode ini

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

4. Pada activity_main.xml (folder res/layout) silakan ketikan kode seperti dibawah ini, untuk menghasilkan layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:ads="http://schemas.android.com/apk/res-auto">
        <WebView
            android:id="@+id/webview"
            android:scrollbars="none"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
        </WebView>
        <TextView
            android:id="@+id/erorr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorAbumuda"
            android:typeface="sans"
            android:gravity="center"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="No Network Connection Found"
            android:textSize="14dip" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Reload"
            android:layout_below="@+id/erorr"
            android:id="@+id/button" />
</RelativeLayout>

5. Pada MainActivity.java silakan lengkapi kode seperti dibawah ini, tambahkan kode ini dalam function onCreate

package com.xxxx.xxxx;

import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private TextView erorr;
    ProgressDialog mProgress;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webview);
        erorr = (TextView) findViewById(R.id.erorr);
        mProgress = ProgressDialog.show(this, "", "Loading...");
        mProgress.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        mProgress.setCancelable(true);
        gotoPage();
    }

    private void gotoPage() {
        ConnectivityManager manager = (ConnectivityManager) getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo nInfo = manager.getActiveNetworkInfo();
        if (nInfo != null && nInfo.isConnectedOrConnecting()) {
            // isConnected = true;
            Button theButton = (Button) findViewById(R.id.button);
            theButton.setVisibility(View.GONE);
            erorr.setVisibility(View.GONE);
            webView.setVisibility(View.VISIBLE);
            String url = "https://blog.kristiandes.com";
            webView.getSettings().setJavaScriptEnabled(true);
            webView.setWebViewClient(new Callback());  //HERE IS THE MAIN CHANGE
            webView.loadUrl(url);

        } else {
            webView.setVisibility(View.GONE);
            erorr.setVisibility(View.VISIBLE);
            mProgress.dismiss();
            Button theButton = (Button) findViewById(R.id.button);
            theButton.setVisibility(View.VISIBLE);
            theButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = getIntent();
                    overridePendingTransition(0, 0);
                    intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION);
                    finish();
                    overridePendingTransition(0, 0);
                    startActivity(intent);
                }
            });
        }
    }

    private class Callback extends WebViewClient {  //HERE IS THE MAIN CHANGE.

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            mProgress.show();
            return (false);
        }

        // when finish loading page
        public void onPageFinished(WebView view, String url) {
            if (mProgress.isShowing()) {
                mProgress.dismiss();
            }
        }
        @Override
        public void onReceivedError(WebView view, int errorCode,
                                    String description, String failingUrl) {
            view.loadUrl("about:blank");
            //Toast.makeText(App.getContext(), "Error occured, please check newtwork connectivity", Toast.LENGTH_SHORT).show();
            super.onReceivedError(view, errorCode, description, failingUrl);
        }
    }

    @Override
    public void onBackPressed() {
        if (webView.isFocused() && webView.canGoBack()) {
            webView.goBack();
            mProgress.show();
        } else {
            finish();
            super.onBackPressed();
        }
    }
}

6. Silakan Run dengan tombol Run ke emulator atau device atau export ke apk untuk instal secara manual di device.

Sampai disini proses pembuatan selesai silahkan debug atau release aplikasi anda pada smartphone anda dengan debug .apk atau release ke dalam playstore.

Demikian artikel saya tentang Cara Membuat Aplikasi Webview Menggunakan Android Studio Semoga Bermanfaat ya.

2 Replies to “Aplikasi Webview Menggunakan Android Studio”

    1. Terimakasih Mas Achmad Hadi Kurnia sebelumnya, Jadi singkat nya mengenai listing program nya, yaitu create project baru terlebih dahulu. kemudian di dalam tiga bagian seperti arikel saya di atas yaitu :
      1. AndroidManifest.xml
      2. activity_main.xml
      3. MainActivity.java
      Mas Achmad Hadi Kurnia tinggal copy paste saja sesuai yang saya berikan. Dan pada baris String url = “http://blog.kristiandes.com”; (Silahkan sesuaikan dengan link web yang anda akan jalankan). Saran saya buatlah website yang responsive/mobile friendly. Jadi aplikasi ini seperti aplikasi hybrid dan terlihat profesional. Atau jika ingin menyampaikan pertanyain lebih detail, bisa menghubungi saya lewat contact saya yang tertera. Terima Kasih Banyak

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.