Cara Menghubungkan ProgressBar Dengan WebView Aplikasi Browser Android Melalui Aide

Mungkin setelah anda membaca artikel sebelumnya dalam kategori "Buat Aplikasi Android" yaitu: Cara menambahkan tombol GoTo Url pada aplikasi browser buatan sendiri anda ingin tahu artikel tentang apa lagi yang akan dibahas dalam blog ini, saya juga berpikiran begitu, saya bingung dalam beberapa hari, tentang apa lagi yang akan saya tulis dalam blog ini, akhirnya saya mendapatkan ide setelah saya melihat progressbar yang tampil dibrowser saya saat saya membuka blog saya sendiri :D , yaitu saya akan membuat sebuah artikel tentang cara menghubungkan widget progressbar dengan webview, atau dengan kata lain progressbar akan muncul saat halaman yang ingin kita tuju dalam proses loading (loading page), dan setelah page/halaman tersebut selesai loading maka widget progressbar akan hilang.

ProgressBar terdiri dari 2 bentuk yaitu: bentuk garis lurus mendatar(bentuk ini biasanya dipakai dalam aplikasi browser) dan bentuk melingkar(lingkaran yang berputar-putar, biasanya bentuk ini yang paling sering digunakan dibeberapa aplikasi dan game).ProgressBar juga banyak ditemukan saat proses pengopian/penyalinan, pemindahan, pengiriman dari suatu data ataupun hal yang lain.

Nah, setelah anda mengetahui bentuk-bentuk dari progressbar maka anda juga harus mengetahui fungsi dari progressbar tersebut, sebenarnya tidak ada fungsi yang sangat penting dari progressbar, karena tanpa progressbar pun aplikasi dapat menjalankan suatu proses tanpa adanya kendala(jika memang di script aplikasi tersebut tidak ada kesalahan), jadi apa fungsi dari progressbar?, fungsinya hanyalah agar aplikasi yang kita buat tampak lebih menarik dan berkelas dan juga menambahkan kesan kesenangan terhadap sipembuat aplikasi tersebut.

Dari penjelasan singkat diatas mungkin anda sudah mengerti tentang ProgressBar, Oleh karena itu kita langsung saja masuk ketahap pembuatanya.

Langkah-langkah:

1. Buka aplikasi Aide, kemudian pilih bagian "For Expert", selanjutnya dibagian "Create New Project" pilih "New Android App", maka akan muncul dialog window baru yang berfungsi untuk menentukan nama dan package/paket dari aplikasi tersebut.Dibagian nama, anda isikan nama aplikasi yang akan anda buat(misalnya: WebProgress ), dan dibagian package/paket anda isikan: cym.webprogress  .Setelah anda isikan kedua bagian tersebut, selanjutnya anda tekan tombol "Create".Jika masih bingung anda dapat lihat gambar berikut:
   
2. Setelah itu, anda buka file main.xml dan gantikan semua script yang ada didalamnya dengan ini:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<RelativeLayout
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="48dp"> 

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="45dp"
android:orientation="horizontal">  

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_weight="1"
android:background="#080808"
android:text="https://aaktivitas.blogspot.com"
android:layout_height="fill_parent"
android:hint="Masukkan link disini.."
android:textColor="#00ff19"
android:textSize="15dp"/>  

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GoTo Url"
android:id="@+id/tombol1"/>

</LinearLayout>
 
<ProgressBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/progressBar1"
android:background="#66666666"
android:gravity="center"/>
 
</RelativeLayout>
  
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">

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

</RelativeLayout>
</LinearLayout>
Keterangannya :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
Script diatas berfungsi sebagai layout pertama dari aplikasi tersebut atau dalam kata lain, script tersebutlah yang menampung semua isi/konten yang ada didalamnya.Ukuran lebar dan panjang/tinggi dari layout tersebut diatur sesuai ukuran layar anda (diatur pada bagian script android:layout_width dan android:layout_height .Isi dari layout tersebut juga diatur sejajar secara vertikal/tegak lurus/menurun (dalam script android:orientitation .)

<RelativeLayout
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="48dp">
Script diatas saya buat untuk tempat letak dari masukan text url(Edit Text), tombol GoTo Url (Button), dan sebagai tempat letak progressbar.Layout ini lebarnya diatur penuh lebar layar hp anda, dan tinggi/panjangnya hanya 48dp.Isi layout ini saya buat agar berada ditengah (dibagian script: android:gravity  .)

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="45dp"
android:orientation="horizontal">
Script diatas berfungsi sebagai letak/tempat dari masukan text url(EditText), dan tombol GoTo Url(Button).Layout ini memiliki lebar yang penuh selebar hp anda, dan memiliki tinggi 45dp.Dan isinya diatur sejajar secara horizontal.

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_weight="1"
android:background="#080808"
android:text="https://aaktivitas.blogspot.com"
android:layout_height="fill_parent"
android:hint="Masukkan link disini.."
android:textColor="#00ff19"
android:textSize="15dp"/>
Script diatas berfungsi sebagai memasukkan text Url nantinya (EditText).Text url yang akan dimasukkan/diketik akan berukuran 15dp, text url yang akan dimasukkan akan berwarna hijau(#00ff19), background atau latar belakang dari EditText tersebut adalah hitam(#080808).
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GoTo Url"
android:id="@+id/tombol1"/>
Script diatas berfungsi sebagai tombol untuk pergi atau menuju ke Url yang diketik (GoTo Url).
<ProgressBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/progressBar1"
android:background="#66666666"
android:gravity="center"/>
Script diatas berfungsi sebagai progressbar yang akan dihubungkan ke webview, progressbar tersebut akan berada dibagian tengah atas.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">
Script diatas berfungsi sebagai layout/letak dari webview(tampilan web).
<WebView
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
Script diatas berfungsi sebagai webview(tampilan web), atau dalam kata lain script inilah yang membuat link yang kita tuju terlihat.
3. Setelah anda ubah isi dari file main.xml dengan script diatas, selanjutnya anda buka MainActivity.java dan taruh/paste script dibawah ini dibawah script package (package cym.webprogress; ).
import android.app.*;
import android.os.*;
import android.webkit.*;
import android.widget.*;
import android.view.View.*;
import android.view.*;
import java.security.*;
import android.graphics.*;

public class MainActivity extends Activity 

WebView wv;
ProgressBar pb;
EditText et;
Button bt;

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

wv = (WebView) findViewById(R.id.webView1);
wv.setWebViewClient(new yoel());
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("https://aaktivitas.blogspot.com");

pb = (ProgressBar) findViewById(R.id.progressBar1);

et = (EditText) findViewById(R.id.editText1);

bt = (Button) findViewById(R.id.tombol1);
bt.setOnClickListener(new OnClickListener()
{
public void onClick(View view)
{
String url = et.getText().toString();
wv.loadUrl(url);

});
    }

public class yoel extends WebViewClient

public void onPageStarted(WebView view, String url, Bitmap favicon)
{
super.onPageStarted(view, url, favicon);
pb.setVisibility(View.VISIBLE);


public boolean shouldOverrideUrlLoading(WebView view, String Url)

pb.setVisibility(View.VISIBLE);
view.loadUrl(Url);
return true;


public void onPageFinished(WebView view, String url)


pb.setVisibility(View.GONE);
super.onPageFinished(view, url);

}

@Override
public boolean onKeyDown(int crist, KeyEvent manihuruk)

if((crist == manihuruk.KEYCODE_BACK)&& wv.canGoBack())
{
wv.goBack();
return true;


return super.onKeyDown(crist, manihuruk);
}

}
4. Kemudian anda buka file AndroidManifest.xml dan tambahkan script dibawah ini diatas script <application .Script ini berguna untuk memberikan izin untuk mengakses internet kepada aplikasi tersebut, sehingga aplikasi tersebut dapat membuka/menampilkan web, link/url yang dituju.
<uses-permission
android:name="android.permission.INTERNET"/>
5. Kemudian anda tekan tombol bergambar "resume" dibagian atas sebelah kanan yang berguna untuk mengcompile, membentuk, membangun aplikasi tersebut, tunggu sebentar, lalu pasang/install dan buka aplikasinya, maka tampilan pertamanya adalah seperti ini:
   

(ProgressBar akan tampil dibagian atas, dan hanya tampil saat sedang loading page atau proses loading halaman.)

Source Code:

1.main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<RelativeLayout
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="48dp">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="45dp"
android:orientation="horizontal">

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_weight="1"
android:background="#080808"
android:text="https://aaktivitas.blogspot.com"
android:layout_height="fill_parent"
android:hint="Masukkan link disini.."
android:textColor="#00ff19"
android:textSize="15dp"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GoTo Url"
android:id="@+id/tombol1"/>

</LinearLayout>

<ProgressBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/progressBar1"
android:background="#66666666"
android:gravity="center"/>

</RelativeLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">

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

</RelativeLayout>
</LinearLayout>

2.MainActivity.java

package cym.webprogress;

import android.app.*;
import android.os.*;
import android.webkit.*;
import android.widget.*;
import android.view.View.*;
import android.view.*;
import java.security.*;
import android.graphics.*;

public class MainActivity extends Activity 

WebView wv;
ProgressBar pb;
EditText et;
Button bt;

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

wv = (WebView) findViewById(R.id.webView1);
wv.setWebViewClient(new yoel());
wv.getSettings().setJavaScriptEnabled(true);
wv.loadUrl("https://aaktivitas.blogspot.com");

pb = (ProgressBar) findViewById(R.id.progressBar1);

et = (EditText) findViewById(R.id.editText1);

bt = (Button) findViewById(R.id.tombol1);
bt.setOnClickListener(new OnClickListener()
{
public void onClick(View view)
{
String url = et.getText().toString();
wv.loadUrl(url);

});
    }

public class yoel extends WebViewClient

public void onPageStarted(WebView view, String url, Bitmap favicon)
{
super.onPageStarted(view, url, favicon);
pb.setVisibility(View.VISIBLE);


public boolean shouldOverrideUrlLoading(WebView view, String Url)

pb.setVisibility(View.VISIBLE);
view.loadUrl(Url);
return true;


public void onPageFinished(WebView view, String url)


pb.setVisibility(View.GONE);
super.onPageFinished(view, url);

}

@Override
public boolean onKeyDown(int crist, KeyEvent manihuruk)

if((crist == manihuruk.KEYCODE_BACK)&& wv.canGoBack())
{
wv.goBack();
return true;


return super.onKeyDown(crist, manihuruk);
}

}

3.AndroidManifest.xml

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

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

</manifest>

Trima Kasih Telah Membaca Artikel Ini, Baca Juga Artikel Lainnya Dari Blog ini ya.