Cara Membuat Aplikasi Browser Sederhana di Aide

Assalamu'alaikum Wr. Wb
Pada kesempatan ini saya akan share tutorial buat aplikasi webview dengan aide. Apa itu webview? Webview adalah sebuah class pada android yang menampilkan dan menjalankan aplikasi mobile berbasis web.

Webview itu seperti browser yang ada di android tetapi tidak mempunyai address bar untuk memasukkan url / link.

Proses pembuatan aplikasi ini sangat mudah, disini kita akan membuat aplikasi WebView + ProgressBar + Button. WebView sebagai browser, ProgressBar sebagai loading, dan Button sebagai Refresh. Kita akan membuat 3 Button yaitu Back (Kembali kehalaman sebelumnya), Refresh (Me-Reload halaman), Dan Next (Maju Kehalaman web yang sudah di kunjungi).
Langsung saja kita menuju ke tutorialnya, Simak baik2...

Cara Buat Aplikasi WebView Di Aide

1. Buatlah project

• Name: WebView
• Package Name: com.alfiyt.webview

2. Buka Main.xml, Kita akan menambahkan WebView, ProgressBar, dan Button. Copy code di bawah ini lalu pastekan semua ke Main.xml

<?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">

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

<Button
android:layout_height="wrap_content"
android:text="Next"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:id="@+id/next"/>

<Button
android:layout_height="wrap_content"
android:text="Refresh"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:id="@+id/refresh"/>

<Button
android:layout_height="wrap_content"
android:text="Back"
android:layout_width="wrap_content"
android:id="@+id/back"/>

</RelativeLayout>

<ProgressBar
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:id="@+id/progressbar"/>

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

</LinearLayout>

3. Buka MainActivity.java, copy code di bawah ini lalu pastekan semua

package com.alfiyt.webview;

import android.app.*;
import android.os.*;
import android.widget.*;
import android.webkit.*;
import android.view.View.*;
import android.view.*;

public class MainActivity extends Activity 
{
Button Back,Next,Reload;
WebView wb;
WebSettings ws;
ProgressBar pb;

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

wb = (WebView)findViewById(R.id.webview);
ws = wb.getSettings();
ws.supportZoom();
ws.setDisplayZoomControls(true);
ws.setJavaScriptEnabled(true);
ws.setLoadsImagesAutomatically(true);

wb.loadUrl("https://trikkerenn.blogspot.com");

wb.setWebViewClient(new LoadBlog());
wb.setWebChromeClient(new LoadUrlnya());


Back =(Button)findViewById(R.id.back);
Reload =(Button)findViewById(R.id.refresh);
Next =(Button)findViewById(R.id.next);
//Aksi button
Back.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View p1)
{
wb.canGoBack();
Toast.makeText(MainActivity.
this,"Kembali ke halaman sebelumnya",
Toast.LENGTH_LONG).show();
}
});

Reload.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View p1)
{
wb.reload();
Toast.makeText(MainActivity.
this,"Mereload halaman",
Toast.LENGTH_LONG).show();
}
});
Next.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View p1)
{
wb.canGoForward();
Toast.makeText(MainActivity.
this,"Next ke halaman yang sudah di kunjungi",
Toast.LENGTH_LONG).show();
}
});

pb =(ProgressBar)findViewById(R.id.progressbar);
pb.setMax(100);
}

private class LoadUrlnya extends WebChromeClient
{
@Override
public void onProgressChanged(WebView web,int newProgress){
MainActivity.this.setValue(newProgress);
super.onProgressChanged(web,newProgress);
}
}
public void setValue(int progress)
{
this.pb.setProgress(progress);
}

private class LoadBlog extends WebViewClient
{

@Override      
public boolean shouldOverrideUrlLoading(WebView view, String url) 
{
view.loadUrl(url);          
return super.shouldOverrideUrlLoading(view, url);    
}

}
}

4. Buka AndroidManifest.xml, Tambahkan code

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

Di atas tag <application>
Tepatnya seperti code di bawah ini

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

<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"
android:resizeableActivity = "true">
<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>

Jika semuanya sudah selesai kita tinggal Run projectnya, jika tidak error maka tampilannya akan seperti di bawah ini

Cukup sekian tutor dari saya, semoga bermanfaat
Jangan lupa share ke teman-temanmu

Wassalamu'alaikum Wr. Wb

Berlangganan artikel terbaru dari blog ini langsung via email.

Your name
Your email