Cara Membuat WebView Pada Android Studio

Cara Membuat WebView Pada Android Studio

Hai sobat,
Android saat ini sudah digunakan hampir oleh semua orang di dunia ini, dan sebagian lagi adalah Iphone, Namun jumlah pengguna Android tidaklah sedikit yaitu Hampir 3/4 didunia orang menggunakan android. karena harganya yang terjangkau juga banyak sekali fitur serta kemudahan dalam penggunaannya. selain itu android juga dikenal sudah terbukti mempunyai kecerdasan dan sampai-sampai dijuluki ponsel pintar.
Jadi sekarang orang-orang pun ikut berkontribusi dengan android karena semakin banyak peminatnya. terlebih lagi aplikasi android dapat menghasilkan uang.

saya pun disini tidak ketinggalan untuk membantu kalian yang ingin membuat aplikasi. dalam kasus ini saya akan membantu kalian untuk membuat aplikasi yang berfungsi sebagai WebView.

WebView adalah Satu widget yang dimiliki android untuk melihat suatu website kalian.

Oke langsung saja.

Pertama Buka AndroidManifest.xml pada Directory manifests/
Lalu copykan semua code dibawah ini :

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.jcft.whoami.jokampcyberfighter">
// Diatas ini ^ Sesuaikan dengan Nama Package kalian contoh : com.blablabla    
    <uses-permission android:name="android.permission.INTERNET"/>

    <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>
        <activity android:name=".JCFTActivity"/>

    </application>

</manifest>

Lalu buka activity_main.xml
Copykan code berikuti ini ke activity_main.xml yang berada di res/layout pada project kalian :

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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="com.jcft.whoami.jokampcyberfighter.MainActivity">
//Diatas ini Sesuaikan dengan Package kalian ditambah .MainActivity
    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        app:popupTheme="@style/AppTheme.PopupOverlay" />

    <TextView        android:id="@+id/textView"        android:layout_width="match_parent"        android:layout_height="39dp"        android:text="NAMA WEBSITE KALIAN"        android:textStyle="bold"        android:textAlignment="center"        android:layout_marginLeft="40dp"        android:layout_marginRight="40dp"        android:layout_marginTop="20dp"/>

    <Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="50sp"        android:layout_marginTop="100dp"        android:layout_gravity="top"        android:onClick="JCFT"        android:text="NAMA WEBSITE KALIAN" />



</android.support.design.widget.CoordinatorLayout>

kemudian save activity_main.xml

lalu Buat JCFTActivity.java di Java/Nama_Package_Kalian
Pada tulisan package com.blabla paling atas sendiri jangan dihilangkan tapi dibawahnya paste code ini :

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.FrameLayout;
import android.widget.ProgressBar;

public class JCFTActivity extends Activity {
    private String WebAddres = "http://ALAMAT WEBSITE KALIAN/";
    private WebView WebView;
    private ProgressBar progressBar3;
    private FrameLayout FrameLayoutTop;
    private ProgressBar progressBar4;
    private FrameLayout FrameLayoutCenter;


    @Override    public void onCreate(Bundle belajaractivity) {
        super.onCreate(belajaractivity);
        setContentView(R.layout.jcft);

        WebView = (WebView) this.findViewById(R.id.WebView);
        WebView.getSettings().setJavaScriptEnabled(true);
        WebView.setWebViewClient(new MyBrowser());
        WebView.loadUrl(WebAddres);

        WebView.getSettings().setBuiltInZoomControls(true);
        WebView.getSettings().setSupportZoom(true);
        //Untuk Zoom Saudara-Saudara
        FrameLayoutTop = (FrameLayout) findViewById(R.id.FrameLayoutTop);
        progressBar3 = (ProgressBar) findViewById(R.id.progressBar3);
        progressBar3.setMax(100);

        FrameLayoutCenter = (FrameLayout) findViewById(R.id.FrameLayoutCenter);
        progressBar4 = (ProgressBar) findViewById(R.id.progressBar4);
        progressBar4.setMax(100);

        WebView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                FrameLayoutTop.setVisibility(View.VISIBLE);
                progressBar3.setProgress(progress);
                FrameLayoutCenter.setVisibility(View.VISIBLE);
                progressBar4.setProgress(progress);

                setTitle("Loading...");

                if (progress == 100) {
                    FrameLayoutTop.setVisibility(View.GONE);
                    setTitle(view.getTitle());
                }
                if (progress == 100) {
                    FrameLayoutCenter.setVisibility(View.GONE);
                    setTitle(view.getTitle());
                }
                super.onProgressChanged(view, progress);
            }
        });

        WebView.setVerticalScrollBarEnabled(false);
        WebView.loadUrl(WebAddres);
        progressBar3.setProgress(0);
        progressBar4.setProgress(0);

    }

    private class MyBrowser extends WebViewClient {
        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            FrameLayoutTop.setVisibility(View.VISIBLE);
            FrameLayoutCenter.setVisibility(View.VISIBLE);
            return true;
        }
    }


}

Jika sudah maka kalian save file diatas tersebut.

kemudian buka MainActivity.java yang sudah ada di Java/Nama_Package_Kalian
Pada tulisan paling atas biarkan saja yaitu package blabla, lalu paste dibawahnya code berikut :

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;


public class MainActivity extends AppCompatActivity {

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


    }

    public void JCFT (View v) {
        startActivity(new Intent(MainActivity.this, JCFTActivity.class));
    }

}

Kemudian Save File diatas,

Kemudian buat lagi file bernama jcft.xml di res/layout
Kemudian copy code berikut kemudian paste di file yang tadi anda buat :

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">

    <FrameLayout        android:id="@+id/FrameLayoutTop"        android:layout_width="match_parent"        android:layout_height="7dp"        android:background="@android:color/transparent">

        <ProgressBar            android:id="@+id/progressBar3"            style="?android:attr/progressBarStyleHorizontal"            android:layout_width="match_parent"            android:layout_height="7dp"            android:layout_gravity="top"            android:background="@android:color/transparent"            android:progress="20"            android:progressDrawable="@drawable/custom_progress" />

    </FrameLayout>



    <WebView        android:id="@+id/WebView"        android:layout_width="match_parent"        android:layout_height="match_parent" >

        <FrameLayout            android:id="@+id/FrameLayoutCenter"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="@android:color/transparent">

            <ProgressBar                android:id="@+id/progressBar4"                style="?android:attr/progressBarStyle"                android:layout_width="100dp"                android:layout_height="100dp"                android:layout_gravity="center"                android:background="@android:color/transparent"                android:progress="20" />

        </FrameLayout>

    </WebView>

</LinearLayout>

Kemudian save file diatas tersebut.
maka anda sudah membuat WebView

Untuk membuat kesan loading yang bergerak di bagian atas screen maka buat sebuah file dengan nama custom_progress.xml di direktory res/drawable 
Copykan code berikut ini :

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="3dip"/>
                <solid android:color="#4FC3F7"/>
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dip"/>
                <solid android:color="#4FC3F7"/>
            </shape>
        </clip>
    </item>

</layer-list>

Kemudian save file diatas.

Maka kalian sudah selesai dalam membuat WebView beserta loading pada bagian atas screen saat anda menekan tombol.
Kemudian untuk melihat hasilnya kalian bisa membukanya langsung melalui Run pada aplikasi langsung, atau manual melalui Handphone kalian masing-masing.
Tetapi kalian harus Build dulu.. setelah build barulah ambil file APK kalian di folder project kalian di hardisk.
Lalu kirim ke HP kemudian install di HandPhone kalian.

NB: untuk membukanya kalian harus mempunyai koneksi untuk mengakses website kalian. jika tidak yah tidak akan pernah kebukan website kalian.

Maaf untuk coding XML mungkin menjadi berantakan di blogger, kalian bisa merapikan Enternya di Android Studi sendiri yah.





Mungkin itulah tutorial Cara Membuat WebView Pada Android Studio adapun untuk lebih lagi kalian bisa search ke google atau mengembangkan sendiri.
Semoga dengan adanya artikel saya ini dapat membantu kalian yang ingin membuat aplikasi di Android Studio yaitu WebView.
Sekian dan Terimakasih.