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. 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RelativeLayout ke Panel Component Tree dibawah FrameLayout. Drag and
Drop Palette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 button dengan properties android
android:layout_below="@id/btnRefresh"

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.

astimen@gmail.com - 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.

<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">

<!-- TODO: Update blank fragment layout -->

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:text="Refresh"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btnRefresh" />

<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/btnRefresh"
android:id="@+id/wvAflowz" />
</RelativeLayout>
</FrameLayout>

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.

astimen@gmail.com - IndonesiaKu Cemerlang (IKC)

3| Membuat WebView pada Fragment Android

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);
}
});

}
}

astimen@gmail.com - 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 :

<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" >

<!-- tambahan permission jika akses internet -->

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

<application
android:allowBackup="true"

astimen@gmail.com - IndonesiaKu Cemerlang (IKC)

5| Membuat WebView pada Fragment Android

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>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</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resdrawableinternetdisc.png .

Copy gambar tersebut yang anda pilih dari internet explorer dan langsung paste di folder
Android Studio appresdrawable

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 java MainActivity appjavacomMainActivity.java

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");

astimen@gmail.com - IndonesiaKu Cemerlang (IKC)

6| Membuat WebView pada Fragment Android

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 gradle melakukan building aplikasi dan menginstallnya ke gadget
AVD dan menampilkan fragment frg_welcome dengan webview mengakses web url
http://aflowz.com.

astimen@gmail.com - IndonesiaKu Cemerlang (IKC)

7| Membuat WebView pada Fragment Android

18. Jika koneksi terputus maka menampilkan pesan sebagai berikut:

19. Semangat mencoba semoga berhasil selalu sabahabat ASIC ....

astimen@gmail.com - IndonesiaKu Cemerlang (IKC)

8| Membuat WebView pada Fragment Android

astimen@gmail.com - IndonesiaKu Cemerlang (IKC)

9| Membuat WebView pada Fragment Android

20. Semangat mencoba dan suskses selalu ...

astimen@gmail.com - IndonesiaKu Cemerlang (IKC)