Assalamualaikum
Hallo sahabat blogger, ketemu lagi nih di blog NR Informatika. Bagaimana kabarnya? saya harap semua baik dan sehat-sehat... Pada artikel sebelumnya saya membagikan tentang MediaPlayer dan VideoPlayer pada Android Studio, dimana telah dijelaskan penjelasan dan penggunaan cara membuat aplikasi MediaPalyer dan VideoPlayer pada Android Studio. Pada kesempatan ini saya akan membagikan pengalaman pengetahuan tentang Android Studio, dimana artikel ini bisa membatu bagi sahabat blogger yang sedang belajar atau mempelajari Android Studio baik itu pemula atau pro hehe....
Pada artikel ini akan dijelaskan cara memulai WebView dan cara melakukan beberapa hal tambahan, seperti menangani navigasi halaman dan mengikat JavaScript dari halaman web anda ke kode sisi klien di aplikasi android anda.
Jika ingin menyediakan aplikasi web (atau hanya halaman web) sebagai bagian dari aplikasi klien, anda dapat melakukannya menggunakan WebView.
Apa itu WebView????
Ada yang belum tahu ya? nih saya kasih tahu jadi Class WebView adalah ekstensi Class View Android yang memungkinkan anda menampilkan halaman web sebagai bagian dari tata ketak aktivis anda. Class ini tidak menyertakan fitur apapun dari browser web yang dikembangkan sepenuhnya, sperti kontrol navigasi atau kolom URL. Semua yang dilakukan WebView secara default adalah menampilkan halaman web.
Nah gimana sudah paham belum? wah ada yang belum ya, yuk baca teori singkat nya!
Teori Singkat
Skenario umum ketika menggunakan WebView menjadi sangat membantu adalah saat anda ingin memberikan informasi di aplikasi yang mungkin perlu diperbaharui, seperti perjanjian pengguna akhir atau panduan pengguna. Dalam aplikasi Android, anda dapat membuat Activitty yang berisi WebView, lalu menggunakannya untuk menampilkan dokumen anda yang dihosting secara online.
Skenario lain nya yaitu ketika WebView menjadi sangat membantu adalah saat aplikasi anda memberikan data kepada pengguna yang selalu memerlukan koneksi internet untuk mengambil data, seperti e-mail. Dalam kasus ini, anda mungkin menyadari bahwa lebih mudah untuk membuat WebView di aplikasi Android anda yang menampilkan halaman web dengan semua data pengguna. Dari pada membuat permintaan jaringan, lalu mengurangi data, dan merendernya dalam tata letak Android. Sebagai gantinya, anda dapat merancang halaman web yang disesuaikan untuk perangkat Android, lalu menerapkan WebView di aplikasi Android anda yang memuat halaman web.
Bagaimana Cara menambahkan WebView di aplikasi anda?
Menambahkan WebView di Layout aktivitas
Untuk menambahkan WebView ke aplikasi di tata letak, tambahkan kode berikut ke file XML tata letak aktivitas :
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("https://ryeyen08.blogspot.com/");
WebView myWebView = new WebView(activityContext);
setContentView(myWebView);
myWebView.loadUrl("https://ryeyen08.blogspot.com/");
<manifest ... >
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>
- Mengaktifkan dukungan layar penuh dengan WebChromeClient. Class ini juga dipanggil saat WebView memerlukan izin untuk mengubah UI(User Interface) aplikasi host, seperti membuat atau menutup jendela dan mengirim dialog JavaScript kepada pengguna. Untuk mempelajari lebih lanjut proses debug dalam konteks ini baca Proses Debug Aplikasi Web.
- Menangani peristiwa yang memengaruhi perenderan konten, seperti error pada pengiriman formulir atau navigasi dengan WebViewClient. Anda juga dapat menggunakan subclass ini untuk mengintersep pemuatan URL.
- Mengaktifkan JavaScript dengan mengubah WebSettings.
- Menggunakan JavaScript untuk mengakses objek framework Android yang telah anda masukan ke dalam WebView.
- Buka aplikasi Android Studio IDE, lalu pilih project baru dengan klik "Create New Project".
- Pilih "Empty Activity", kemudian "Next".
- Pada Configure Your Project sesuai keterangan, jika sudah terisi semua pilih "Finish".Keterangan :
Name → WebView
Package Name → bisa default saja atau bisa diubah, disini saya menggunakan url blog saya lalu diikuti nama project WebView.
Save Location → Sesuaikan tempat penyimpanan yang anda inginkan.
Language → Java (karena artikel tutorial ini menggunakan bahasa pemrograman java).
Minimum SDK → Level API 16 → "Finish"
- Siapkan sebuah file gambar dengan format .png yang akan digunakan sebagai icon Aplikasi WebView. Lalu kita copy ke dalam forder ../res/drawable/. Ikuti langkah gambar dibawah ini:
- Selanjutnya buka file activity_main.xml, disini kita akan menambahkan progress bar di layout ini supaya ketika proses load website akan menampilkan icon loading. Sebelum ke script, terlebih dahulu ubah Layout-nya menjadi RelativeLayout. Ikuti langkah dibawah ini :
- Setelah diubah Layout-nya, maka ubah script seperti bawah ini:
Tampilan Design + Blueprint dari script di atas :
- Setelah itu, kita akan menambahkan script untuk memanggil url website, object class WebView, dan progress bar pada MainActivity.java, seperti dibawah ini:
package ryeyen08.blogspot.com.webview;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class MainActivity extends AppCompatActivity {
WebView webView;
ProgressBar bar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
bar=(ProgressBar) findViewById(R.id.progressBar2);
webView.setWebViewClient(new myWebclient());
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://ryeyen08.blogspot.com/");
}
private class myWebclient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
bar.setVisibility(View.GONE);
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
@Override public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, url);
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()){
webView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
} - Kemudian, kita meminta izin INTERNET di dalam file AndroidManifest.xml dengan menambahkan uses-permission INTERNET, script nya seperti dibawah ini:
- Agar terlihat lebih menarik User Interface-nya kila hilangkan action bar webview dengan merubah script themes.xml yang ada dalam folder ../res/values/themes, seperti dibawah ini:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.WebView" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
</style>
</resources> - Terakhir coba jalankan aplikasinya pada emulator yang tersedia di Android Studio dengan klik Run App, maka akan tampil seperti video dibawah ini :
0 comments:
Posting Komentar