GULANGGULING.COM

Cara Membuat Aplikasi Webview di Android – Belajar Android

Ardhitya Wiedha Irawan

GULANGGULING.COM | TUTORIAL ANDROID – Halo sobat coding! kali ini kami ingin berbagi cara membuat aplikasi webview android. Bagi anda yang sudah punya website tentu aplikasi ini akan jadi lebih menarik, kenapa begitu? karena pada aplikasi ini kita akan me-load atau mengakses alamat (url) web dari dalam aplikasi Android tersebut, dengan begitu kita bak sudah punya aplikasi Android yang isinya adalah website kita sendiri. Piye? enak tho?

Well mari kita mulai saja ya, untuk dapat membuat aplikasi Android ini tentu kita akan menggunakan componen webview dan tentu saja akses permission Internet. Maka kita deklarasikan kebutuhan permission akan koneksi internet pada manifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="androlite.webviewpullrefresh">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Selanjutnya kita perlu membuat layoutnya dan tentunya akan menggunakan komponen Webview di dalamnya. Perthatikan file di bawah, Saya menggunakan CoordinatorLayout untuk menampilkan popup messages dalam bentuk snackbar jika devices tidak sedang terkoneksi Internet.

Pada file tersebut juga menggunakan SwipeRefreshLayout untuk memberikan fungsi pull to refresh pada webview. Jadi nanti pada aplikasi ini, kamu tinggal hold dan scroll kebawah untuk melakukan reload halaman websitenya. Keren kan? *Iya in aja deh*

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/container">
    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swiperefresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/activity_main_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/progress"/>
    </android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>

Setelah punya layout diatas, tentu selanjutnya adalah saatnya menambahkan barisan kode pada class activity. Pada class Activity ini menggunakan extends AppActivity dan memberikan method implement SwipeRefreshLayout untuk fungsi Swipe to refresh.

package androlite.webviewpullrefresh;
import android.content.Context;
import android.graphics.Bitmap;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener{

    private SwipeRefreshLayout swipeRefreshLayout;
    private WebView mWebView;
    private CoordinatorLayout coordinatorLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.activity_main_webview);
        swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swiperefresh);
        swipeRefreshLayout.setOnRefreshListener(MainActivity.this);
        coordinatorLayout = (CoordinatorLayout) findViewById(R.id.container);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                swipeRefreshLayout.setRefreshing(true);
            }

            public void onPageFinished(WebView view, String url) {
                swipeRefreshLayout.setRefreshing(false);
            }
        });

        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setAppCacheEnabled(true);
        loadWebsite();
    }
    private void loadWebsite() {
        ConnectivityManager cm = (ConnectivityManager) getApplication().getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo netInfo = cm.getActiveNetworkInfo();
        if (netInfo != null && netInfo.isConnectedOrConnecting()) {
            mWebView.loadUrl("https://gulangguling.com/category/technology-development-design/");
        } else {
            Snackbar snackbar = Snackbar.make(coordinatorLayout, "Please check your internet connection.", Snackbar.LENGTH_LONG);
            snackbar.show();
            swipeRefreshLayout.setRefreshing(false);
        }
    }

    @Override
    public void onRefresh() {
        mWebView.reload();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }


}

Jika diperhatikan file diatas, ada sebuah fungsi dengan nama loadWebsite(), pada fungsi itulah aplikasi akan mencoba mengakses alamat url website yang sudah ditentukan.

 private void loadWebsite() {
        ConnectivityManager cm = (ConnectivityManager) getApplication().getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo netInfo = cm.getActiveNetworkInfo();
        if (netInfo != null && netInfo.isConnectedOrConnecting()) {
            mWebView.loadUrl("https://gulangguling.com/category/technology-development-design/");
        } else {
            Snackbar snackbar = Snackbar.make(coordinatorLayout, "Please check your internet connection.", Snackbar.LENGTH_LONG);
            snackbar.show();
            swipeRefreshLayout.setRefreshing(false);
        }
    }

Selanjutnya dengan fungsi-fungsi yang sudah kita buat di atas, maka kita sudah punya aplikasi Android yang membuka atau mengakses url website yang sudah kita tentukan seperti pada video di bawah. Untuk memudahkan membuat aplikasi, silakan download source code nya dari github kami.

Download Source Code Full di Github

 

Sekian dan Semoga bermanfaat.

Baca Tutorial Android Lainnya :