GULANGGULING.COM | TUTORIAL ANDROID – Halo sobat coding! kali ini kami ingin berbagi cara membuat aplikasi webview android. Bagi anda yang sudah punya website tentu aplikasi ini akan jadi lebih menarik, kenapa begitu? karena pada aplikasi ini kita akan me-load atau mengakses alamat (url) web dari dalam aplikasi Android tersebut, dengan begitu kita bak sudah punya aplikasi Android yang isinya adalah website kita sendiri. Piye? enak tho?
Well mari kita mulai saja ya, untuk dapat membuat aplikasi Android ini tentu kita akan menggunakan componen webview dan tentu saja akses permission Internet. Maka kita deklarasikan kebutuhan permission akan koneksi internet pada manifest.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="androlite.webviewpullrefresh"> <strong><uses-permission android:name="android.permission.INTERNET" /></strong> <strong><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /></strong> <application android:allowBackup="true" 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> |
Selanjutnya kita perlu membuat layoutnya dan tentunya akan menggunakan komponen Webview di dalamnya. Perthatikan file di bawah, Saya menggunakan CoordinatorLayout untuk menampilkan popup messages dalam bentuk snackbar jika devices tidak sedang terkoneksi Internet.
Pada file tersebut juga menggunakan SwipeRefreshLayout untuk memberikan fungsi pull to refresh pada webview. Jadi nanti pada aplikasi ini, kamu tinggal hold dan scroll kebawah untuk melakukan reload halaman websitenya. Keren kan? *Iya in aja deh*
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/container"> <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/swiperefresh" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/activity_main_webview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/progress"/> </android.support.v4.widget.SwipeRefreshLayout> </android.support.design.widget.CoordinatorLayout> |
Setelah punya layout diatas, tentu selanjutnya adalah saatnya menambahkan barisan kode pada class activity. Pada class Activity ini menggunakan extends AppActivity dan memberikan method implement SwipeRefreshLayout untuk fungsi Swipe to refresh.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
package androlite.webviewpullrefresh; import android.content.Context; import android.graphics.Bitmap; import android.net.ConnectivityManager; import android.net.NetworkInfo; import android.os.Bundle; import android.support.design.widget.CoordinatorLayout; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.Menu; import android.view.MenuItem; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener{ private SwipeRefreshLayout swipeRefreshLayout; private WebView mWebView; private CoordinatorLayout coordinatorLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.activity_main_webview); swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swiperefresh); swipeRefreshLayout.setOnRefreshListener(MainActivity.this); coordinatorLayout = (CoordinatorLayout) findViewById(R.id.container); mWebView.setWebViewClient(new WebViewClient() { @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); swipeRefreshLayout.setRefreshing(true); } public void onPageFinished(WebView view, String url) { swipeRefreshLayout.setRefreshing(false); } }); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setAllowFileAccess(true); webSettings.setAppCacheEnabled(true); loadWebsite(); } private void loadWebsite() { ConnectivityManager cm = (ConnectivityManager) getApplication().getSystemService(Context.CONNECTIVITY_SERVICE); NetworkInfo netInfo = cm.getActiveNetworkInfo(); if (netInfo != null && netInfo.isConnectedOrConnecting()) { mWebView.loadUrl("https://gulangguling.com/category/technology-development-design/"); } else { Snackbar snackbar = Snackbar.make(coordinatorLayout, "Please check your internet connection.", Snackbar.LENGTH_LONG); snackbar.show(); swipeRefreshLayout.setRefreshing(false); } } @Override public void onRefresh() { mWebView.reload(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } |
Jika diperhatikan file diatas, ada sebuah fungsi dengan nama loadWebsite(), pada fungsi itulah aplikasi akan mencoba mengakses alamat url website yang sudah ditentukan.
|
1 2 3 4 5 6 7 8 9 10 11 |
private void loadWebsite() { ConnectivityManager cm = (ConnectivityManager) getApplication().getSystemService(Context.CONNECTIVITY_SERVICE); NetworkInfo netInfo = cm.getActiveNetworkInfo(); if (netInfo != null && netInfo.isConnectedOrConnecting()) { mWebView.loadUrl("https://gulangguling.com/category/technology-development-design/"); } else { Snackbar snackbar = Snackbar.make(coordinatorLayout, "Please check your internet connection.", Snackbar.LENGTH_LONG); snackbar.show(); swipeRefreshLayout.setRefreshing(false); } } |
Selanjutnya dengan fungsi-fungsi yang sudah kita buat di atas, maka kita sudah punya aplikasi Android yang membuka atau mengakses url website yang sudah kita tentukan seperti pada video di bawah. Untuk memudahkan membuat aplikasi, silakan download source code nya dari github kami.
Download Source Code Full di Github
Sekian dan Semoga bermanfaat.
Baca Tutorial Android Lainnya :
- Cara Membuat Format Waktu 1 Minutes Ago, Yesterday, 2 Days Ago di Android
- Cara Membuat Form Rating Pada Android Menggunakan Ratingbar
- Membuat Aplikasi Android untuk Membaca Email User
- Cara Membuat Push Notifikasi di Android dengan Firebase Cloud Messaging
- Cara Mengirim Push Notifikasi ke Android dengan PHP & Firebase Cloud Messaging
Gan, mau tanya dong. Gimana caranya supaya webview bisa download file pdf ?
Halo gan. Jika kamu ingin membuat webview bisa download pdf, coba tambahkan koding ini. Semoga membantu
webView.setWebViewClient(new WebViewClient() {public boolean shouldOverrideUrlLoading (WebView view, String url) {
if (url.endsWith(".pdf")) {
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
// if want to download pdf manually create AsyncTask here
// and download file
return true;
}
return false;
}
});
getMenuInflater().inflate(R.menu.menu_main, menu);
Mas..nanya nih..perintah diatas ada “menu_main”, sebenarnya itu fungsinya untuk apa ?
kok disaya ngga dikenal metode menu_main tsb..
thx atas jawabannya
menu_main itu nama file xml untuk membuat menu mas, itu nama saja, dan penamaannya terserah Anda.
Cara pepmbuatannya harus koneksi internet ya? saya offline gagal terus -_-
Yap, harus online dong mas bro, namanya juga webview untuk meload halaman website. Kecuali Anda mau membuat webview yang melakukan load terhadap file local.
Gan gimana caranya web view ini bisa menginputkan foto ke form yang di tampilkan web,
saya ada masalah waktu di klik form insert foto, tidak muncul dialog pilih file.
terima kasih