Het programmeren van een Android-app die een website laadt in een WebView is een veelvoorkomende taak. Of je nu een app bouwt die fungeert als een wrapper voor een website of webinhoud integreert in je native app. Dit artikel biedt een stapsgewijze handleiding voor het bouwen van zo’n app, van het opzetten van je project tot het implementeren van foutafhandeling.
Als voorbeeld website nemen we de website: https://lucifera.eu
Laatst bijgewerkt op: dinsdag 8 april 2025 om 21:01
Vereisten
- Android Studio geïnstalleerd
- Basiskennis van Kotlin en de structuur van een Android-app
- Een apparaat of emulator om de app op uit te voeren
1. Je Android-project opzetten
Voordat je in de code duikt, moet je een nieuw Android-project aanmaken. Dit doe je met Android Studio:
- Open Android Studio en kies “New Project”
- Kies een geschikt sjabloon (bijvoorbeeld Empty Activity).
- Stel de naam van je project, de pakketnaam, de opslaglocatie, de programmeertaal Kotlin en de minimale SDK in.
- Klik op “Finish” om het project aan te maken.
2. Wijzig App -> Manifest -> AndroidManifest.xml
Voeg de INTERNET-permissie toe zodat je app toegang heeft tot het internet.
<uses-permission android:name="android.permission.INTERNET"/>
3. De WebView toevoegen aan je layout
Klik op App -> res -> rechtermuisknop -> New – > Directory en noem deze layout
Klik met de rechtermuisknop op App – > Res -> layout -> New -> XML – > Layout XML file en noem de Layout File Name: activity_main en Root Tag: RelativeLayout
Klik met de rechtermuisknop aan de linkerkant op component Tree – > RelativeLayout -> go to XML file
En vervang de inhoud met onderstaande tekst:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>Deze layout zorgt ervoor dat de WebView het volledige scherm in beslag neemt.
4. De WebView configureren in je Activity
In je hoofdactiviteitbestand app -> kotlin +java -> MainActivity.kt configureer je de WebView. Dit houdt in dat je de WebView-client instelt, JavaScript inschakelt (indien nodig), en de gewenste URL laadt.
package eu.lucifera.luciferasapp
import android.graphics.Bitmap
import android.net.http.SslError
import android.os.Bundle
import android.webkit.*
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
private lateinit var webView: WebView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
webView = findViewById(R.id.webView)
val webSettings = webView.settings
webSettings.javaScriptEnabled = true
webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
super.onPageStarted(view, url, favicon)
Toast.makeText(applicationContext, "Loading...", Toast.LENGTH_SHORT).show()
}
override fun onReceivedError(
view: WebView?,
request: WebResourceRequest?,
error: WebResourceError?
) {
super.onReceivedError(view, request, error)
Toast.makeText(applicationContext, "Failed to load page", Toast.LENGTH_SHORT).show()
}
override fun onReceivedSslError(
view: WebView?,
handler: SslErrorHandler?,
error: SslError?
) {
// Show error message or proceed anyway (not recommended for production)
handler?.cancel() // Cancel loading on SSL error
Toast.makeText(applicationContext, "SSL Certificate error", Toast.LENGTH_SHORT).show()
}
}
// Load your website
webView.loadUrl("https://lucifera.eu")
}
// Handle back button to go back in web history
override fun onBackPressed() {
if (webView.canGoBack()) {
webView.goBack()
} else {
super.onBackPressed()
}
}
}Selecteer de regel: “import androidx.appcompat.app.AppCompatActivity”
Klik met de rechtermuisknop op de regel -> Show Context Actions -> en selecteer: Add dependency on: androidx.appcompat.app.AppCompatActivity
5. Het thema configureren
Vervang de tekst in App -> res – > values – > themes.xml met:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.LuciferasApp" parent="Theme.AppCompat.Light.NoActionBar"/>
</resources>6. De app uitvoeren
Klik op Run App en start je app op een emulator of een echt apparaat. Als alles correct is ingesteld, zou je website binnen de app moeten laden en worden fouten (zoals verbindings- of SSL-problemen) netjes afgehandeld met Toast-meldingen en zie je Lucifera’s App in de emulator of echte apparaat.
7. App-pictogram toevoegen
Om een app-pictogram toe te voegen aan je Android-app, volg je de onderstaande stappen in Android Studio. Het is belangrijk om ervoor te zorgen dat het pictogram op de juiste manier wordt toegevoegd en geconfigureerd voor verschillende schermformaten en resoluties.
7.1. Voorbereiding van het Pictogram
Het pictogram moet verschillende formaten bevatten, omdat Android apparaten verschillende schermresoluties en pixelgroottes hebben. De meest gebruikelijke formaten zijn:
- 48×48 px voor mdpi (medium densiteit)
- 72×72 px voor hdpi (high densiteit)
- 96×96 px voor xhdpi (extra high densiteit)
- 144×144 px voor xxhdpi (extra extra high densiteit)
- 192×192 px voor xxxhdpi (extra extra extra high densiteit)
Het wordt aanbevolen om een vierkant pictogram te gebruiken (bijvoorbeeld een .png-bestand) en ervoor te zorgen dat het goed eruitziet in de verschillende formaten.
7.2. Toevoegen van een App Icon via Android Studio
Volg de onderstaande stappen in Android Studio om een app-pictogram toe te voegen:
- Open je Android-project in Android Studio.
- In het Project-paneel aan de linkerkant, zoek naar de map res. Dit is de map waarin je de verschillende bronnen (zoals afbeeldingen) van je app opslaat.
- Klik met de rechtermuisknop op de mipmap-map (deze bevindt zich onder de map res). Als deze map niet bestaat, maak dan een nieuwe map aan door rechts te klikken op res en New > Android Resource Directory te selecteren. Kies mipmap als directory type.
- Selecteer New > Image Asset.
- In het Asset Studio-venster kun je nu je pictogram configureren:
- Klik op Image en selecteer het bestand dat je wilt gebruiken als app-pictogram.
- Kies het type pictogram (bijvoorbeeld Launcher Icons (Adaptive and Legacy)).
- Het programma maakt automatisch versies van het pictogram in de juiste resoluties en plaatst ze in de juiste mappen (bijvoorbeeld
mipmap-mdpi,mipmap-hdpi, enz.).
- Klik op Next en daarna op Finish.
Android Studio genereert nu automatisch alle benodigde iconen voor je app en voegt ze toe aan de respectieve mipmap-mappen in je project.
7.3. Wijzig je AndroidManifest.xml
Nu moet je ervoor zorgen dat Android het pictogram herkent. In je AndroidManifest.xml moet je ervoor zorgen dat het pictogram correct wordt ingesteld. Meestal zal Android Studio dit automatisch doen, maar je kunt de volgende regel verifiëren of toevoegen:
<application
android:icon=”@mipmap/ic_launcher”
android:label=”@string/app_name”>
<!– Andere configuraties van je app –>
</application>
Hierbij verwijst @mipmap/ic_launcher naar het pictogram dat je hebt toegevoegd.
7.4. Pictogram Testen
Om te zien of het pictogram goed is ingesteld, kun je de app uitvoeren op een emulator of op een echt apparaat. Het pictogram wordt weergegeven op het startscherm van je apparaat.
Extra tips:
- Adaptive Icons: Vanaf Android 8.0 (Oreo) ondersteunt Android adaptive icons, die de mogelijkheid hebben om het pictogram aan te passen op basis van het apparaat (zoals randen, vormen en animaties). Zorg ervoor dat je een achtergrond en een voorgrond hebt voor het pictogram om van deze functie te profiteren.
- Formaat controleren: Zorg ervoor dat het pictogram goed schaalbaar is. Het gebruik van vectorbestanden zoals SVG kan een goede keuze zijn, omdat deze bestanden goed schalen naar verschillende resoluties zonder kwaliteitsverlies.
Met deze stappen kun je eenvoudig een app-pictogram toevoegen aan je Android-app.
8. Gesigneerde APK maken
Het maken van een gesigneerde APK in Android Studio is een belangrijke stap om je app te kunnen publiceren, bijvoorbeeld in de Google Play Store. Een APK (Android Package) is het installatiebestand van een Android-app. Een gesigneerde APK is ondertekend met een keystore die bewijst dat jij de ontwikkelaar bent. Zonder deze ondertekening kun je de app niet publiceren in de Play Store. Hieronder vind je een duidelijke stap-voor-stap beschrijving om een gesigneerd APK-bestand te maken.
8.1. Open je project in Android Studio
Zorg dat je project helemaal gebouwd is en er geen build errors zijn. Controleer of je klaar bent om de release-versie van je app te bouwen.
8.2. Start het signing-proces
- Klik in Android Studio op: [ALT] + [B] Build > Generate Signed Bundle / APK…
- Kies APK en klik op Next.
8.3. Keystore instellen
Nu moet je je keystore opgeven. Dit is een beveiligd bestand dat je privé houdt en dat je gebruikt om de APK te ondertekenen.
- Klik op Create new en vul het formulier in:
Belangrijk: Bewaar deze gegevens goed. Als je de keystore verliest, kun je geen updates publiceren voor je app in de Play Store.
8.4. Build instellingen
- Selecteer je build variant:
- Kies meestal release (voor distributie).
- Vink aan of je de APK meteen wilt laten verifieren en proguard (minify) wilt gebruiken (voor gevorderden).
- Klik op Finish.
8.5. Wacht tot de APK is gegenereerd
Android Studio gaat nu aan de slag. Na een paar seconden/minuten krijg je een melding:
APK(s) generated successfully.
Je kunt op “locate” klikken om de map te openen waarin het APK-bestand staat.
Standaard wordt je APK opgeslagen in: <project folder>/app/release/app-release.apk
8.6. (Optioneel) Test je gesigneerde APK
Voor je de APK verspreidt, kun je deze installeren op een echt apparaat:
adb install app-release.apk
Of gewoon slepen naar een emulator.
8.7. Klaar om te publiceren!
Je hebt nu een gesigneerde APK die klaar is voor publicatie. Als je je app in de Google Play Console wilt uploaden, kun je daar dit bestand gebruiken.
Extra tips:
- Bewaar je keystore op een veilige plek en maak een back-up.
- Voor moderne apps is het aan te raden om in plaats van APK een Android App Bundle (.aab) te gebruiken voor publicatie in de Play Store. Die kun je op dezelfde manier genereren.
- Gebruik Google Play App Signing als je je keystore-beheer aan Google wilt uitbesteden.
Klik hier om de Android App te downloaden.
Download de broncode van GitHub.com: https://github.com/kmkoster2025/Luciferas-App