Skip to main content
membuat webiew - badoystudio

Membuat WebView Dengan Progress Bar pada Android Studio

Membuat WebView Dengan Progress Bar pada Android Studio sangat mudah.  WebView merupakan salah satu widget yang berfungsi menampilkan halaman web di dalam aplikasi android. WebView mengubah aplikasi Anda menjadi aplikasi web.

Contoh kasus : Badoystudio.com hanya bisa diakses melalui web tidak mempunyai aplikasi android. Maka dengan WebView kita bisa membuat aplikasi androidnya (berbentuk apk) tentunya dapat diinstall pada smartphone android sehingga ketika kita ingin mengakses badoystudio.com hanya perlu menyentuh icon badoystudio yang sudah terinstall dismartphone android.

Script WebView pada xml yaitu :

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

    />

Script Object Class WebView pada java yaitu :

webView = (WebView) findViewById(R.id.webView);

Untuk memuat url web ke WebView, gunakan metode loadUrl (String url) dari kelas WebView, dengan script :

webView.loadUrl("https://badoystudio.com");

 

Membuat Webview dengan Progress Bar

Untuk langkah-langkah selengkapnya yaitu sebagai berikut :

 

1. Buat Layout WebView pada Activity_Main.xml

Layout webview badoystudio.com ini akan ditambahkan progress bar supaya saat proses load website akan menampilkan icon loading.  Untuk script lengkapnya yaitu sebagai berikut : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    tools:context=".MainActivity">


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

        />

    <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/progressBar2"
        />

</RelativeLayout>

 

2. MainActivity.java

Tambahkan script untuk memanggil url website, object class Webview, dan proses progress bar pada MainActivity.java yaitu sebagai berikut :

package badoystudio.com.webview;

import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {
    WebView webView;
    ProgressBar bar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
        bar=(ProgressBar) findViewById(R.id.progressBar2);
        webView.setWebViewClient(new myWebclient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://badoystudio.com");


    }

    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);
    }
}

Script Dibawah Digunakan Untuk Back Ke Webview ketika kita sudah membuka konten yang terdapat pada website.

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

    return super.onKeyDown(keyCode, event);
}

Sangat di Rekomendasikan : Modul Android Studio Keren dan Lengkap Yang Wajib Kamu Punya 

 

3. Style.xml

Agar terlihat lebih baik ui nya hilangkan actionbar webview dengan script dibawah ini :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

 

4. AndroidManifests.xml

Tambahkan user permission internet pada AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="badoystudio.com.webview">

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


    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Silahkan running project melalui android virtual device, emulator genymotion, atau langsung menggunakan smartphone yang kamu miliki.  Maka hasilnya akan seperti gambar berikut :

Membuat WebView
Tampilan aplikasi webview ketika dibuka pertama kali

 

Membuat WebView
Tampilan salah satu artikel yang ada di badoystudio.com pada webview

 

Mudah bukan untuk membuat web kita menjadi apk webview pada android studio. Share ya jika bermanfaat. Tunggu apalagi praktekan sekarang 😀


Tulisan Menarik Lainnya :

Guntoro

Freelancer web and mobile developement, blogger, and teacher.