Membuat Applikasi Browser Sendiri Menggunakan Android Studio

Tutorial kali ini masih seputar Android, berhubung sekarang admin lagi di ikut pelatihan Android jadi mimin di haruskan untuk membuat artikel apapun itu yang berhubungnyan dengan bidang kopetensi mimin.

Tutorial kali ini adalah "Membuat Applikasi Browser Sendiri Menggunakan Android Studio". Pasti temen-temen sudah semuanya tau apa itu browser malah sekarang temen-temen lagi make browser buat baca tutorial ini :D Ya, jadi singkatnya browser adalah sebuah media yang di gunakan untuk berinteraksi langsung dengan sebuah website seperti Google, Facebook, Twitter dan lain sebagainya.


Baik kita langsung saja ke pokok pembahasan. Untuk membuat sebuah browser kita akan menggunakan  Dua layout activity, activity yang pertama di gunakan untuk menampilkan SplashScreen. Sedangkan Activity kedua di gunakan sebagai tampilan browser ketika di gunakan.




Tahap pertama silahkan buat project baru


Kita buat tampilan SplashScreenya terlebih dahulu. Temen-temen bisa lihat tutorialnya di artikel Membuat Spalsh Screen Android Studio


Baik saya asumsikan SplashSscreen sudah berhasil di buat dan dapat di jalankan. Sekarang buka MainActivity.


Tambahkan 6 Komponen Dua Linear Layout, Satu EditText, Satu Button, Satu ProgressBar (horizontal) dan Komponen WebView. Berikut sourcecodenya :
  <?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.relion.mybrowser.MainActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:id="@+id/section_top"
        android:layout_alignParentStart="true">

        <EditText
            android:layout_height="50dp"
            android:inputType="textPersonName"
            android:text="http://"
            android:ems="10"
            android:id="@+id/txtUrl"
            android:layout_weight="0.15"
            android:layout_width="50dp" />

        <Button
            android:text="GO"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnGo"
            android:layout_weight="0.01" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/section_top"
        android:layout_centerHorizontal="true">

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/progressBar" />
        <WebView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/webView"></WebView>
    </LinearLayout>
</RelativeLayout>







 
EditText memiliki ID : txtUrl, Button memiliki ID : btnGo, ProgressBar memiliki ID : ProgressBar dan WebView Memiliki ID : webView.


Sekarang kita beralih ke MainActivity.

Di dalam class MainActivity, deklarasikan semua komponen yang tadi kita buat

// Deklarasiprivate WebView webView;
private EditText txtUrl;
private Button btnGo;
private ProgressBar progressBar;
Inisialikasikan komponen tersebut di dalam Method onCreate() :


// Inisialisasikan KomponenwebView = (WebView) findViewById(R.id.webView);
txtUrl = (WebView) findViewById(R.id.txtUrl);
btnGo = (WebView) findViewById(R.id.btnGo);
Setelah itu buat Variable url. Variable ini menyimpan url website yang secara default akan di buka saat Applikasi dijalankan :


// Siapkan URLString url = "https://www.google.co.id/";
Sekarang kita aktifkan fasilitas JavaScript dan Fasilitas lainnya :


// Aktifkan Javascriptwebv.animate();
webv.getSettings().setJavaScriptEnabled(true);
webv.getSettings().setDisplayZoomControls(true);
webv.getSettings().setLoadWithOverviewMode(true);
webv.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webv.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webv.getSettings().setAllowFileAccessFromFileURLs(true);
webv.getSettings().setAllowUniversalAccessFromFileURLs(true);
Sekarang Kita jalankan


// Sekarang kita jalankanwebView.loadUrl(url);
webView.setWebViewClient(new MyWebLaunch()); 
Kita Buat aksi ketika btnGo di klik

btnGo.setOnClickListener(new View.OnClickListener() {
    @Override    public void onClick(View v) {
        String url = txtUrl.getText().toString();
        // Aktifkan Javascript        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDisplayZoomControls(true);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        webView.setWebChromeClient(new WebChromeClient(){
            @Override            public void onProgressChanged(WebView view, int newProgress) {
                progressBar.setVisibility(View.VISIBLE);



// fungsi buat status loading





progressBar.setProgress(newProgress);
                if (newProgress == 100){
                    progressBar.setVisibility(View.GONE);
                }
            }
        });
        webView.loadUrl(url);
        webView.setWebViewClient(new MyWebLaunch());
    }


});
Teman-teman bakal ngedapetin Error pada baris MyWebLaunch, ini disebabkan karena belum ada class MyWebLaunch. Caranya arahkan pointer ke MyWebLaunch kemudian tekan ALT+ENTER. pilih Create Inner Clas.... > MainActivity :


Didalam Class MyWebLaunch tambahkan kode hingga seperti berikut :

private class MyWebLaunch extends WebViewClient {
    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return super.shouldOverrideUrlLoading(view, url);
    }
}





Nah sekarang kita coba jalankan dan Taraaa.... yap benar muncul notifikasi error saat membuka halaman :D
Ini di karenakan kita butuh Permission untuk mengakses internet. Untuk membuka akses internet kita perlu mengedit AndroidManifest.xml yang ada di folder app > manifest.
Tambahkan baris kode berikut. Oh iya sekalian juga tambahan attribut untuk SplashScreen agar FullScreen

Berikut Source code lengkapnya :

package com.example.relion.mybrowser;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {

    // Deklarasi    private WebView webView;
    private EditText txtUrl;
    private Button btnGo;
    private ProgressBar progressBar;

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

        // Inisialisasikan Komponen        webView = (WebView) findViewById(R.id.webView);
        txtUrl = (EditText) findViewById(R.id.txtUrl);
        btnGo = (Button) findViewById(R.id.btnGo);
        // Siapkan URL        String url = "https://www.google.co.id/";
        // Aktifkan Javascript        webView.animate();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDisplayZoomControls(true);
        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        // inisialisasi Progress bar        progressBar = (ProgressBar) findViewById(R.id.progressBar);
        // Buat loader        webView.setWebChromeClient(new WebChromeClient(){
            @Override            public void onProgressChanged(WebView view, int newProgress) {
                progressBar.setVisibility(View.VISIBLE);
                progressBar.setProgress(newProgress);
                if (newProgress == 100){
                    progressBar.setVisibility(View.GONE);
                }
            }
        });

        // Sekarang kita jalankan        webView.loadUrl(url);
        webView.setWebViewClient(new MyWebLaunch());

        btnGo.setOnClickListener(new View.OnClickListener() {
            @Override            public void onClick(View v) {
                String url = txtUrl.getText().toString();
                // Aktifkan Javascript                webView.getSettings().setJavaScriptEnabled(true);
                webView.getSettings().setDisplayZoomControls(true);
                progressBar = (ProgressBar) findViewById(R.id.progressBar);
                webView.setWebChromeClient(new WebChromeClient(){
                    @Override                    public void onProgressChanged(WebView view, int newProgress) {
                        progressBar.setVisibility(View.VISIBLE);
                        progressBar.setProgress(newProgress);
                        if (newProgress == 100){
                            progressBar.setVisibility(View.GONE);
                        }
                    }
                });
                webView.loadUrl(url);
                webView.setWebViewClient(new MyWebLaunch());
            }
        });
    }

    private class MyWebLaunch extends WebViewClient {
        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return super.shouldOverrideUrlLoading(view, url);
        }

    }
}

Oke baik sekali Applikasinya udah jadi :D Berikut penampakannya.. Semoga bermanfaat...



Note: *Jangan lupa menekan Enter saat AutoComplete muncul untuk menghindari error ketike lupa mengimport komponen