08 Membuat WebView Pada Fragment

(1)

MEMBUAT WEBVIEW PADA FRAGMENT ANDROID MEMBUAT WEBVIEW PADA FRAGMENT ANDROID

1.

1. Pada Modul Latihan ini kita akan membuat sebuah WebView yang menampilkan halaman webPada 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 dengan URL tertentu pada fragment Android. Fragment frg_welcome yang telah kita buat akan ditampilkan pertama kali dan langsung menampilkan halaman web

ditampilkan pertama kali dan langsung menampilkan halaman web http://aflowz.comhttp://aflowz.com.. Jika Jika hubungan internet terputus akan ada pesan gambar pada webview berupa image disconnected. hubungan internet terputus akan ada pesan gambar pada webview berupa image disconnected.

2.

2. Open file layout xml frg_welcome di folderOpen file layout xml frg_welcome di folder appapp

Delete komponen layout TextView sehingga bersih tersisa FrameLayout saja. Drag and drop Delete komponen layout TextView sehingga bersih tersisa FrameLayout saja. Drag and drop

Palette

Palette Drag andDrag and

Drop

Drop PalettePalette

terakhir Drag and drop

terakhir Drag and dropPalettePalette

3.

3. Beri nama id untuk Button btnRefresh dan Text Beri nama id untuk Button btnRefresh dan Text nya “Refresh”, WebView wvAflowz. Tambahkannya “Refresh”, WebView wvAflowz. Tambahkan

properties wvAflowz relative dibawah button dengan properties android properties wvAflowz relative dibawah button dengan properties android android

android :layout_below=:layout_below="@id/btnRefresh""@id/btnRefresh" 4.

4. Untuk Button buat width nya match_parent agar penuh melebar kesamping. Dan height nyaUntuk 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 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 height nya match_parent sehingga memenuhi sisa space layout karena akan menampilkan halaman web.

halaman web.

res

res layoutlayout fragment_frg_welcome.xml.fragment_frg_welcome.xml.

Layouts

Layouts RelativeLayoutRelativeLayout ke Panel Comp ke Panel Component Tree dibawah onent Tree dibawah FrameLayout. FrameLayout.

Widgets

Widgets ButtonButton ke Panel Component Tree dibawah RelativeLayout dan ke Panel Component Tree dibawah RelativeLayout dan

Containers

(2)

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.

<FrameLayout xmlns:android ="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

android :layout_width="match_parent" android :layout_height="match_parent"

tools:context="com.example.astimen.myapplication.fragment.frg_welcome">

6. Sekarang kita akan menambah kode program java di frg_welcome. Buka file java

app

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.

(3)

class myikc extends AsyncTask<String, String, String> { @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 ...", Toast.LENGTH_SHORT ).show();

WebView wv =(WebView) getView().findViewById(R.id.wvAflowz ); wv.loadDataWithBaseURL("file:///android_asset/" , "<img

src=\"file:///android_res/drawable/internetdisc.png \"/>", "text/html", "utf-8", null); }

}); }

(4)

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 :

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

Sehingga code file xml AndroidManifest.xml menjadi :

<?xml version="1.0" encoding="utf-8"?> <

manifest xmlns:android ="http://schemas.android.com/apk/res/android" package="com.example.astimen.myapplication" >

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

<application

(5)

android :icon="@mipmap/ic_launcher" android :label="@string/app_name" android :supportsRtl= "true"

android :theme="@style/AppTheme" > <activity android :name=".MainActivity" android :label="@string/app_name" android :theme="@style/AppTheme.NoActionBar" > <intent-filter >

</activity> </application> </ manifest>

12. Terakhir kita membuat informasi terkait koneksi internet jika hubungan terputus sehingga user pengguna dapat mengaktifkan koneksinya terlebih dahulu. Jika koneksi putus maka halaman web tidak menampilkan error tetapi menampilkan sebuah gambar ilustrasi koneksi bermasalah. Disertai Informasi Toast“Mohon periksa koneksi internet anda ....”.

wv.setWebViewClient(new WebViewClient() {

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

Toast.makeText(getActivity(), "Mohon periksa koneksi data internet anda ...", Toast.LENGTH_SHORT ).show();

WebView wv =(WebView) getView().findViewById(R.id.wvAflowz ); wv.loadDataWithBaseURL("file:///android_asset/" , "<img

src=\"file:///android_res/drawable/internetdisc.png \"/>", "text/html", "utf-8", null); }

}); }

13. Gambar yang akan ditampilkan berada pada folder app .

Copy gambar tersebut yang anda pilih dari internet explorer dan langsung paste di folder Android Studioapp

14. Agar supaya fragment frg_welcome ditampilkan ketika aplikasi pertama kali dibuka maka kita perlua mengcopy code inisiasi fragment frg_welcome di menu drawer ke class inisiasi MainActivity. Buka file javaMainActivity app

15. Copy code di class onNavigationItemSelected() untuk case id nav_camera :

getSupportFragmentManager() .beginTransaction()

.replace(R.id.frm_utama, frg_welcome.newInstance("0","0")) .commit();

getSupportActionBar().setTitle("Welcome AflowZ");

res drawable internetdisc.png

res drawable

(6)

16. Pastekan ke bagian akhir fungsi inisiasi MainActivity onCreate menjadi :

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar ); setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab ); fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "Replace with your own action" , Snackbar.LENGTH_LONG ) .setAction("Action", null).show();

} });

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(

this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

drawer.setDrawerListener(toggle); toggle.syncState();

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view ); navigationView.setNavigationItemSelectedListener( this);

getSupportFragmentManager() .beginTransaction()

.replace(R.id.frm_utama, frg_welcome.newInstance("0","0")) .commit();

getSupportActionBar().setTitle("Welcome AflowZ"); }

17. Jalankan Button Build App agar gr adle melakukan building aplikasi dan menginstallnya ke gadget AVD dan menampilkan fragment frg_welcome dengan webview mengakses web url http://aflowz.com.

(7)

18. Jika koneksi terputus maka menampilkan pesan sebagai berikut:

(8)

(9)