Perkenalan webview
Webview adalah sebuah komponen system yang di dukung chrome (peramban web yang sering kita sebut mesin penelusur) untuk dapat menampilkan content web pada komponen Webview. Webview sendiri adalah salah satu class dari webkit. Webkit adalah sebuah mesin layout yang digunakan untuk merender halaman web, webkit menjadi dasar dari penelusuran seperti chome, safari dll. Webkit sendiri masuk layer libraries pada arsitekture Android. Webkit juga merekam halaman yang baru saja dikunjungi , tautan yang diklik oleh user serta mengatur kembali majunya histori yang sudah dibuka oleh pengguna.
Dalam dunia pemrograman khususnya android studio , webview sering di gunakan untuk :
1. Merender halaman web yang ada di external host, misalkan : membuat aplikasi dengan menampilkan begitu saja sebuah website pada webview .
2. Merender kode html pada internal host, bisanya menaruh kode html pada asset kemudian menampilkan pada webview.
Menampilkan Web Browser Sederhana Dengan Webview
1. Buat project di android studio
2. Buka layout kemudian pasang kode webview seperti ini :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:padding="20dp"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:layout_width="match_parent"
android:text="Load Url"
android:id="@+id/btnloadurl"
android:layout_height="wrap_content" />
<Button
android:layout_width="match_parent"
android:text="Load Internal"
android:id="@+id/btnloadinternal"
android:layout_height="wrap_content" />
</LinearLayout> |
3. Buat layout dengan nama webview dan masukan kode seperti dibawah ini
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<EditText
android:layout_width="match_parent"
android:hint="Telusuri disini.."
android:inputType="text"
android:id="@+id/edttelusuri"
android:layout_height="wrap_content" />
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout> |
4. Kemudian masuk ke MainActivity.java buat variable dan deklarasikan seperti script di bawah ini
package com.belicode.webviewandroid;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
Button btnExternal,btnInternal;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnInternal = (Button) findViewById(R.id.btnloadinternal);
btnExternal = (Button) findViewById(R.id.btnloadurl);
btnInternal.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, InternalLoad.class);
startActivity(intent);
}
});
btnExternal.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, ExternalLoad.class);
startActivity(intent);
}
});
}
}
|
5. Buat Activity baru dengan nama ExternalLoad.java untuk membuat webbrowser nya nanti dan buat InternalLoad.java untuk menampilkan data html dari asset
6. Buka ExternalLoad.java dan masukan script seperti ini
package com.belicode.webviewandroid;
import android.app.ProgressDialog;
import android.app.SearchManager;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.SearchView;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.Toast;
public class ExternalLoad extends AppCompatActivity {
WebView mWebView;
ProgressDialog progressDialog;
EditText edttelusuri;
String telusuri;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
edttelusuri=(EditText)findViewById(R.id.edttelusuri);
progressDialog=new ProgressDialog(this);
progressDialog.setMessage("Silakan tunggu");
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAppCacheEnabled(true);
mWebView.setWebViewClient(new WebViewClient()
{
@Override
public void onPageFinished(WebView view, String url) {
if (progressDialog.isShowing()) {
progressDialog.dismiss();
}
super.onPageFinished(view, url);
}
});
edttelusuri.setOnKeyListener(new View.OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
(keyCode == KeyEvent.KEYCODE_ENTER)) {
telusuri=edttelusuri.getText().toString();
mWebView.loadUrl("https://www.google.co.id/search?q="+telusuri);
progressDialog.show();
return true;
}
return false;
}
});
}
}
|
7. Di InternalLoad.java kita masukan scripti seperti ini:
package com.belicode.webviewandroid;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
public class InternalLoad extends AppCompatActivity
{
WebView mWebView;
EditText edttelusuri;
private ProgressDialog progressDialog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
edttelusuri=(EditText)findViewById(R.id.edttelusuri);
edttelusuri.setVisibility(View.GONE);
progressDialog=new ProgressDialog(this);
progressDialog.setMessage("Silakan tunggu");
progressDialog.show();
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAppCacheEnabled(true);
mWebView.loadUrl("file:///android_asset/index.html");
mWebView.setWebViewClient(new WebViewClient()
{
@Override
public void onPageFinished(WebView view, String url) {
if (progressDialog.isShowing()) {
progressDialog.dismiss();
}
super.onPageFinished(view, url);
}
});
}
}
|
8. Setelah itu masuk ke Manifest.xml beri akses internet pada aplikasi dan deklarasikan activity pada manifest.xml seperti ini :
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.belicode.webviewandroid">
<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>
<activity android:name=".ExternalLoad"/>
<activity android:name=".InternalLoad"/>
</application>
</manifest> |
9. Buat folder asset dan buat file html misalkan index.html
10. Buka file index.html kemudian masukan kode html yang akan di tampilkan , jika kesulitan membuat kode html silakan gunakan tools text to html generator milik belicode di sini :
https://belicode.com/html-editor-online.php11. Kita Run project
Source Code Web Browser Android Studio Bisa Di unduh di sini :
WebViewAndroidNah itu sekilas tentang Webview di android studio, semoga artikel ini bermanfaat dan menambah wawasan agan semua. Kedepannya kita akan membahas hal hal dasar lagi . jika ingin request artikel silakan tulis di kolom komentar di bawah ini.
Share This
45
5939