Tutorial Android Studio : Membuat Web Browser Menggunakan WebView –Pada kesempatan kali ini,kita akan mencoba membuat web browser sederhana menggunakan WebView. WebView merupakan salah satu class pada Android Studio yang biasa digunakan untuk menjalankan aplikasi mobile berbasis web seperti HTML5,menampilkan Jquery,JavaScript dll.Ketika menggunakan WebView,maka kita akan menggunakan beberapa class Webkit,seperti WebViewClient,WebSetting.
Sebelum memulai membuat web browser,pastikan bahwa anda telah memahami beberapa dasar-dasar penggunakaan Android Studio,seperti bagaimana membuat project,membuat Activity dan melakukan run/debugging pada aplikasi.Ok,langsung saja,berikut langkah-langkah membuat aplikasi web browser sederhana di Android Studio menggunakan WebView.
1.Buat project terlebih dahulu,klik File >New Project,kemudian masukkan nama project/aplikasi,kemudian Klik Next
pilih minimun SDK perangkat yang akan digunakan,klik Next
Pilih Empty Activity,kemudian klik Next ,kemudian beri nama Activity atau biarkan default,kemudian klik Finish
2.Buat desain UI(User Interface) atau tampilan web browser yang akan dibuat,misalnya seperti gambar di bawah
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="oc.startup.ra.progressbarwebview.MainActivity">
<WebView
android:id="@+id/webView1"
android:layout_width="330dp"
android:layout_height="450dp"
android:background="?android:attr/colorBackground"
android:layout_alignStart="@+id/edturl"
android:layout_below="@+id/edturl"
android:layout_alignEnd="@+id/btnGo"></WebView>
<EditText
android:id="@+id/edturl"
android:layout_width="250dp"
android:layout_height="44dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:background="@android:color/background_light"
android:hint=" Masukkan URL"
android:layout_alignParentStart="true" />
<ProgressBar
android:id="@+id/progbar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_alignStart="@+id/edturl"
android:layout_below="@+id/btnGo"
android:background="@android:color/background_light"
android:progressBackgroundTint="@android:color/holo_green_light"
android:layout_alignEnd="@+id/webView1" />
<ImageButton
android:id="@+id/btnGo"
android:layout_width="50dp"
android:layout_height="40dp"
android:background="?android:attr/colorButtonNormal"
android:onClick="gotoUrl"
ads:srcCompat="?android:attr/actionModeWebSearchDrawable"
android:layout_alignParentTop="true"
android:layout_toEndOf="@+id/edturl" />
</RelativeLayout>
3.Selanjutnya,buat desain/layout menu refresh,stop,back,forward,dan setting nya.
Buat direktori baru dengan nama “menu”,letakkan di dalam direktori res,kemudian buat file xml layout baru di dalam direktori menu,dengan nama file main_menu.xml
main_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="10dp"
android:layout_width="10dp"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity" >
<item android:id="@+id/action_settings"
android:title="setting"
android:orderInCategory="100" app:showAsAction="never" />
<item android:id="@+id/btn_refresh"
android:title="refresh"
android:onClick="goRefresh"/>
<item android:id="@+id/btn_stop"
android:title="stop"
android:onClick="goStop"/>
<item android:id="@+id/btn_goback"
android:title="back"
android:onClick="goBack"/>
<item android:id="@+id/btn_gofoward"
android:title="forward"
android:onClick="goForward"/>
</menu>
4.Kemudian ,edit/konfigurasi file MainActivity.java
MainActivity.java
package com.otodidaker.root.webbrowserotodidakercom;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebSettings;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.EditText;
import android.view.View;
import android.widget.ProgressBar;
public class MainActivity extends ActionBarActivity{
public WebView webView;
ProgressBar loadprobar;
String URL;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView =(WebView) findViewById(R.id.webView1);
webView.setWebViewClient(new WebViewClient());
WebSettings websett =webView.getSettings();
websett.setJavaScriptEnabled(true);//Source code progress bar
loadprobar=(ProgressBar) findViewById(R.id.progbar1);
webView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
loadprobar.setProgress(newProgress);
if (newProgress == 100) {
loadprobar.setVisibility(View.GONE);
} else {
loadprobar.setVisibility(View.VISIBLE);
}
}
});
}//Source code menu
public void goRefresh(MenuItem item) {
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
webView.reload();
}
public void goStop(MenuItem item) {
webView.stopLoading();
}
public void goBack(MenuItem item) {
webView.goBack();
}
public void goForward(MenuItem item) {
webView.goForward();
}//Source code pencarian
public void gotoUrl(View view){
EditText editturl =(EditText) findViewById(R.id.edturl);
URL = editturl.getText().toString();
webView.loadUrl("http://www.google.com/search?q=" + URL.trim());
}
}
5.Edit file AndroidManifest.xml,dengan menambahkan script di bawah
<uses-permission android:name="android.permission.INTERNET"/>
sehingga menjadi
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.otodidaker.root.webbrowserotodidakercom">
<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.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Terakhir,lakukan running test untuk melihat hasilnya.
Hasilnya :
Jika aplikasi berhasil menampilkan hasil pencarian (browsing/searching) dan menu berfungsi dengan baik,berarti aplikasi telah berjalan dengan baik.
Demikian postingan saya kali ini tentang Tutorial Android Studio : Membuat Web Browser Menggunakan WebView,semoga bermanfaat,sampai ketemu di tutorial Android Studio berikutnya,terima kasih.
0 komentar: