1| Membuat WebView pada Fragment Android
MEMBUAT WEBVIEW PADA FRAGMENT ANDROID
1. Pada Modul Latihan ini kita akan membuat sebuah WebView yang menampilkan halaman web dengan URL tertentu pada fragment Android. Fragment frg_welcome yang telah kita buat akan ditampilkan pertama kali dan langsung menampilkan halaman web http://aflowz.com http://aflowz.com.. Jika hubungan internet terputus akan ada pesan gambar pada webview berupa image disconnected. 2. Open file layout xml frg_welcome di folder app
res
layout
fragment_frg_welcome.xml.
Delete komponen layout TextView sehingga bersih tersisa FrameLayout saja. Drag and drop Palette
Layouts
Drop Palette
Component Tree dibawah FrameLayout. Drag and RelativeLayout ke Panel Component
Widgets
Button ke Panel Component Tree dibawah RelativeLayout dan
terakhir Drag and drop Palette
Containers
WebView ke bawah Button.
3. Beri nama id untuk Button btnRefresh dan Text nya “Refresh”, WebView wvAflowz. Tambahkan properties wvAflowz relative dibawah android :layout_below="@id/btnRefresh" :layout_below="@id/btnRefresh"
button
dengan
properties
android
4. Untuk Button buat width nya match_parent agar penuh melebar kesamping. Dan height nya wrap_content sesuai tingga default sebuah button. Untuk WebView wvAflowz buat width dan height nya match_parent sehingga memenuhi sisa space layout karena akan menampilkan halaman web.
[email protected] [email protected] - IndonesiaKu Cemerlang (IKC)
2| Membuat WebView pada Fragment Android
5. File layout fragment frg_welcome secara lengkap ditampilkan dibawah ini. Untuk Text Button dan komponen lain yang memiliki Text sebaiknya dibuat di variable string, bukan diseting langsung di layout. Hal tersebut diperlukan ketika kita membuat aplikasi android multi language dengan banyak bahasa. Dengan membuatnya di variable string.xml maka akan dibuat grup-grup elemen xml untuk setiap bahasa yang berbeda tanpa mengganggu file layout xml.
WebView < android :layout_width="match_parent" android :layout_height="match_parent" android :layout_below="@id/btnRefresh" android :id="@+id/wvAflowz" />
6. Sekarang kita akan menambah kode program java di frg_welcome. Buka file java app java
com
fragment
frg_welcome.java. Tambahkan class AsyncTask myikc() di Public
View onCreateVeiew agar memiliki proses thread yang berbeda dengan MainAcitivity yang menjalankan drawer sehingga keduanya dapat berjalan bersama. @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment
new myikc().execute();
return inflater.inflate(R.layout.fragment_frg_welcome, container, false); }
7. Tambahkan class myikc() dan kita akan menambahkan proses inisiasi komponen layout di fungsi OnPostExecute di bagian akhir badan program frg_welcome.
[email protected] - IndonesiaKu Cemerlang (IKC)
3| Membuat WebView pada Fragment Android
class myikc extends AsyncTask { @Override protected void onPreExecute() { super.onPreExecute(); }
protected String doInBackground(String... args) { return null ; }
protected void onPostExecute(String file_url) {
Button btnHome=(Button) getView().findViewById(R.id. btnRefresh ); btnHome.setText( "Selamat Datang di Home" ); btnHome.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // do something
Toast. makeText (getActivity(), "Loading Home" , Toast.LENGTH_LONG ).show(); new myikc().execute(); } });
WebView wv =(WebView) getView().findViewById(R.id. wvAflowz ); wv.getSettings().setJavaScriptEnabled( true ); wv.getSettings().setDefaultZoom(WebSettings.ZoomDensity. FAR ); String url="http://aflowz.com" ; wv.loadUrl(url); wv.setWebViewClient( new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true ; } });
wv.setWebViewClient( new WebViewClient() { public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { Toast. makeText (getActivity(), "Mohon periksa koneksi data internet anda ).show(); ...", Toast.LENGTH_SHORT WebView wv =(WebView) getView().findViewById(R.id. wvAflowz ); wv.loadDataWithBaseURL( "file:///android_asset/" , "", "text/html" , "utf-8" , null); } }); } }
[email protected] - IndonesiaKu Cemerlang (IKC)
4| Membuat WebView pada Fragment Android
8. Ketika fragment frg_welcome diload kita akan merubah Text pada Button btnRefresh dengan text “Selamat Datang di Home” dengan methode setText(“text”) sbb : Button btnWf=(Button) getView().findViewById(R.id. btnRefresh ); btnWf.setText( "Selamat Datang di Home" );
9. Selanjutnya kita akan menambahkan event onClick btnHome untuk menjalankan execute() kembali class myikc() sehingga fragment akan diload ulang dengan menampilkan informasi TOAST “Loading Home” sbb: btnHome.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // do something
Toast. makeText (getActivity(), "Loading Home" , Toast.LENGTH_LONG ).show(); new myikc().execute(); } });
10. WebView wvAflowz akan kita setting untuk menampilkan URL sebuah Web dengan address http://aflowz.com dencan code sbb : WebView wv =(WebView) getView().findViewById(R.id. wvAflowz ); wv.getSettings().setJavaScriptEnabled( true ); wv.getSettings().setDefaultZoom(WebSettings.ZoomDensity. FAR ); String url="http://aflowz.com" ; wv.loadUrl(url); wv.setWebViewClient( new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true ; } });
11. Karena kita mengakses sebuah web di internet maka perlu ditambahkan setting internet di file app
manifests
AndroidManifest.xml dengan code :
Sehingga code file xml AndroidManifest.xml menjadi :
:name="android.permission.INTERNET" />
