Cara Membuat Apk WebView Untuk Website Di Android Studio
Indiepers
6 Januari 2023 07:00
.
8 min read
Selamat datang untuk para pembaca, semoga artikel ini sesuai dengan apa yang kamu butuhkan dan semoga juga tidak ada kendala yang ditemui saat melakukan implementasi.
Bagi orang seperti kita yang tertarik dengan teknologi, mulai dari membuat website dan melakukan kustomisasi, lambat laun pasti menginginkan website kita dibuat menjadi sebuah apk atau aplikasi android.
Yang mana harapannya nanti bisa berada di playstore, keren kan. Untuk sampai pada tahap tersebut sangat panjang, pertama yang harus kamu pelajari ada cara membuat Apk WebView untuk Website menggunakan Android Studio.
Pada tutorial ini saya akan memberikan source code yang dibutuhkan untuk membuat apk webview untuk website kamu nantinya. Jika kamu tidak mempunya perangkat komputer yang memadai, saya secara pribadi menawarkan untuk membuatkannya.
Tidak ada biaya untuk menggunakan jasanya, saya harap kita bisa saling mendukung perkembangan website masing-masing dengan saling memberikan backlink, jika bersedia silahkan hubungi saya melalui telegram.
Langsung saja pada pembahasan cara membuat apk webview untuk website menggunakan android studio. Tidak perlu disimak dengan baik cukup salin saja source code yang saya bagikan dan tempelkan pada file yang tepat.
Create Project Android Studio
Langkap pertama yang harus kamu lakukan adalah membuat sebuah project pada android studio dan beri nama webview. Jika sudah silahkan bukan ketiga file yang dibutuhkan untuk kita edit nantinya.
Silahkan buka terlebih dahulu file activity_main.xml, MainActivity.java dan AndroidManifest.xml.
Edit activity_main.xml
Silahkan salin semua kode dibawah ini dan tempelkan pada file activity_main.xml.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/webView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
tools:ignore="MissingConstraints" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>Kode di atas ini berfungsi untuk membuat sebuah tampilan webview dengan memberikan fungsi refresh pada webview.
Edit MainActivity.java
Selanjutnya salin semua kode dibawah ini dan tempelkan pada file MainActivity.java. Kode ini berfungsi untuk menjalankan fitur-fitur yang akan ada nantinya pada apk webview.
package com.indiepers.webview;
import android.Manifest;
import android.app.AlertDialog;
import android.app.DownloadManager;
import android.content.Context;
import android.content.DialogInterface;
import android.content.pm.PackageManager;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.os.Environment;
import android.util.Log;
import android.webkit.CookieManager;
import android.webkit.DownloadListener;
import android.webkit.URLUtil;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
public class MainActivity extends AppCompatActivity {
String websiteURL = "https://indiepers.com"; // sets web url
private WebView webview;
SwipeRefreshLayout mySwipeRefreshLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if( ! CheckNetwork.isInternetAvailable(this)) //returns true if internet available
{
//if there is no internet do this
setContentView(R.layout.activity_main);
//Toast.makeText(this,"No Internet Connection, Chris",Toast.LENGTH_LONG).show();
new AlertDialog.Builder(this) //alert the person knowing they are about to close
.setTitle("No internet connection available")
.setMessage("Please Check you're Mobile data or Wifi network.")
.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
finish();
}
})
//.setNegativeButton("No", null)
.show();
}
else
{
//Webview stuff
webview = findViewById(R.id.webView);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
webview.loadUrl(websiteURL);
webview.setWebViewClient(new WebViewClientDemo());
}
//Swipe to refresh functionality
mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);
mySwipeRefreshLayout.setOnRefreshListener(
new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
webview.reload();
}
}
);
if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M){
if(checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE) == PackageManager.PERMISSION_DENIED){
Log.d("permission","permission denied to WRITE_EXTERNAL_STORAGE - requesting it");
String[] permissions = {Manifest.permission.WRITE_EXTERNAL_STORAGE};
requestPermissions(permissions,1);
}
}
//handle downloading
webview.setDownloadListener(new DownloadListener() {
@Override
public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimeType, long contentLength) {
DownloadManager.Request request = new DownloadManager.Request(Uri.parse(url));
request.setMimeType(mimeType);
String cookies = CookieManager.getInstance().getCookie(url);
request.addRequestHeader("cookie",cookies);
request.addRequestHeader("User-Agent",userAgent);
request.setDescription("Downloading file....");
request.setTitle(URLUtil.guessFileName(url,contentDisposition,mimeType));
request.allowScanningByMediaScanner();
request.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);
request.setDestinationInExternalPublicDir(Environment.DIRECTORY_DOWNLOADS,URLUtil.guessFileName(url, contentDisposition, mimeType));
DownloadManager dm = (DownloadManager) getSystemService(DOWNLOAD_SERVICE);
dm.enqueue(request);
Toast.makeText(getApplicationContext(),"Downloading File",Toast.LENGTH_SHORT).show();
}
});
}
private class WebViewClientDemo extends WebViewClient {
@Override
//Keep webview in app when clicking links
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
mySwipeRefreshLayout.setRefreshing(false);
}
}
//set back button functionality
@Override
public void onBackPressed() { //if user presses the back button do this
if (webview.isFocused() && webview.canGoBack()) { //check if in webview and the user can go back
webview.goBack(); //go back in webview
} else { //do this if the webview cannot go back any further
new AlertDialog.Builder(this) //alert the person knowing they are about to close
.setTitle("EXIT")
.setMessage("Are you sure. You want to close this app?")
.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
finish();
}
})
.setNegativeButton("No", null)
.show();
}
}
}
class CheckNetwork {
private static final String TAG = CheckNetwork.class.getSimpleName();
public static boolean isInternetAvailable(Context context)
{
NetworkInfo info = (NetworkInfo) ((ConnectivityManager)
context.getSystemService(Context.CONNECTIVITY_SERVICE)).getActiveNetworkInfo();
if (info == null)
{
Log.d(TAG,"no internet connection");
return false;
}
else
{
if(info.isConnected())
{
Log.d(TAG," internet connection available...");
return true;
}
else
{
Log.d(TAG," internet connection");
return true;
}
}
}
}Fungsi yang akan berjalan menggunakan kode di atas ini antara lain:
- Fungsi Back & Exit WebView.
- Fungsi Swipe Down to Refresh.
- Fungsi Screen Rotation.
- Fungsi Internet Connection Error.
- Fungsi Download in Webview.
Edit AndroidManifest.xml
Langkah terakhir, salin kode dibawah ini dan tempelkan pada file AndroidManifest.xml.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
android:allowBackup="true"
android:dataExtractionRules="@xml/data_extraction_rules"
android:fullBackupContent="@xml/backup_rules"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.IndiePers"
tools:targetApi="31">
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<meta-data
android:name="android.app.lib_name"
android:value="" />
</activity>
</application>
</manifest>Kode di atas ini berfungsi untuk memberikan access permission webview saat dipasang di hp android nantinya.
Edit themes.xml
Melakukan perubahan pada file themes.xml adalah opsional, jika kamu ingin merubah warna pada status bar aplikasi webview silahkan untuk berkreasi.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.IndiePers" 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>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>kode di atas ini adalah yang saya gunakan jika ingin mengikutinya silahkan di salin saja.
Add Icon WebView
Biar aplikasi webview terlihat lebih bagus dan profesional saat di instal, kamu perlu menyiapkan sebuah gambar atau logo dengan format png untuk digunakan sebagai icon aplikasi.
Caranya mudah, klik kanan pada menu project disebelah kiri dan pilih res>New>Image Asset. Kamu bisa ikuti langkah sesuai gambar dibawah ini.
Build APK
Kamu bisa coba menjalankannya secara langsung dengan mencolokan hp android dengan kabel data pada laptop atau komputer sampai terdeteksi, kemudian tekan icon play. Secara otomatis aplikasi webview akan terinstal pada hp.
Jika kamu ingin langsung mem-build project ini menjadi sebuah file .apk, silahkan pilih menu Build > Build Bundle(s)/ APK(s) > Build APK(s).
Tunggu beberapa detik sampai saya mengucapkan selamat karena kamu sudah berhasil membuat Apk WebView untuk Website menggunakan Android Studio.
Untuk melihat lokasi file .apk yang sudah di-build tadi, kamu bisa langsung mengeklik locate seperti pada gambar dibawah atau langsung membuka folder project\app\build\outputs\apk\debug.
Semoga tutorial cara membuat Apk WebView untuk Website menggunakan Android Studio ini bermanfaat, jika berkenan tolong dukung website IndiePers dengan cara berkomentar dan membagikan artikel ini di sosial media.
