Tutorials

Tutorial: Website in eine professionelle Android-App verwandeln (Kostenlos + Source Code)

Melden

Hier ist ein ausführliches Tutorial, wie du eine Website in eine professionelle Android-App umwandelst. Wir nutzen dafür Android Studio und die WebView-Technologie.

Diese Anleitung führt dich Schritt für Schritt durch den Prozess, eine responsive Webseite in eine native Android-App zu verpacken.

Voraussetzungen

  • Android Studio (auf deinem PC installiert)
  • Eine funktionierende Website (URL)
  • Ein App-Logo (PNG-Datei)

Schritt 1: Ein neues Projekt erstellen

  1. Öffne Android Studio und klicke auf "New Project".
  2. Wähle "Empty Views Activity" (wichtig: nicht "Empty Activity", wenn du mit XML arbeiten willst).
  3. Klicke auf Next.
  4. Konfiguriere das Projekt:
    • Name: Deine App Name
    • Package Name: com.deindomain.deineapp
    • Language: Java (dieses Tutorial nutzt Java für maximale Kompatibilität)
    • Minimum SDK: API 24 (Android 7.0 oder höher)
  5. Klicke auf Finish.

Schritt 2: Internet-Berechtigungen hinzufügen

Da die App eine Website laden muss, benötigt sie Zugriff auf das Internet.

  1. Öffne im Projekt-Explorer: app -> manifests -> AndroidManifest.xml.
  2. Füge vor dem <application> Tag folgende Zeile ein:
    <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  3. (Optional) Falls deine Website kein SSL (nur http statt https) nutzt, füge im <application> Tag folgendes hinzu:
    android:usesCleartextTraffic="true"

Schritt 3: Das Layout anpassen (UI)

Wir müssen den Bereich definieren, in dem die Website angezeigt wird.

  1. Öffne app -> res -> layout -> activity_main.xml.

  2. Ersetze den gesamten Code durch diesen:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/xml"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Schritt 4: Der Source Code (MainActivity.java)

Hier passiert die eigentliche Magie. Wir sagen der App, welche URL sie laden soll und wie sie sich verhalten soll.

  1. Öffne app -> java -> com.deindomain.deineapp -> MainActivity.java.
  2. Ersetze den Inhalt mit folgendem Code:
package com.deindomain.deineapp; // Achte darauf, dass dein Package Name hier steht

import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private WebView myWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myWebView = findViewById(R.id.myWebView);

        // WebView Einstellungen
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true); // Wichtig für moderne Webseiten
        webSettings.setDomStorageEnabled(true); // Erlaubt lokales Speichern (z.B. Logins)
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setBuiltInZoomControls(false); // Zoom-Buttons ausblenden
        webSettings.setDisplayZoomControls(false);

        // Verhindert, dass die Website im externen Browser (Chrome) geöffnet wird
        myWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                // Hier könnte man einen Ladebalken anzeigen
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                // Ladebalken verstecken
            }
        });

        // DEINE WEBSITE URL HIER EINFÜGEN
        myWebView.loadUrl("https://www.deine-webseite.de");
    }

    // Ermöglicht das Zurückgehen innerhalb der Website mit dem Android-Zurück-Button
    @Override
    public void onBackPressed() {
        if (myWebView.canGoBack()) {
            myWebView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

Schritt 5: Ein professionelles App-Icon hinzufügen

Ohne eigenes Icon sieht die App unfertig aus.

  1. Rechtsklick auf den Ordner app -> New -> Image Asset.
  2. Wähle bei "Path" dein Logo aus.
  3. Passe die Größe an ("Resize"), bis es in den Kreis passt.
  4. Klicke auf Next und dann Finish.

Schritt 6: Splash Screen (Optionaler Profi-Tipp)

Um die App noch professioneller zu machen, kannst du die Statusbar ausblenden oder die Farben an dein Webdesign anpassen.

  • Gehe zu res -> values -> themes.xml.
  • Dort kannst du colorPrimary und colorPrimaryVariant so ändern, dass sie zu deinem Branding passen.

Schritt 7: Die App testen und exportieren

  1. Testen: Schließe dein Android-Handy per USB an oder starte den Emulator und klicke auf den grünen "Run" Button in Android Studio.
  2. Exportieren (APK erstellen):
    • Gehe zu Build -> Build Bundle(s) / APK(s) -> Build APK(s).
    • Sobald fertig, erscheint unten rechts eine Meldung. Klicke auf "locate", um die installierbare .apk Datei zu finden.

Warum ist diese Lösung "Professionell"?

  • Back-Button Support: Die App schließt sich nicht sofort, wenn man "Zurück" drückt, sondern navigiert innerhalb der Website.
  • JavaScript & DOM Storage: Moderne Web-Features (wie Menüs oder Warenkörbe) funktionieren reibungslos.
  • Full Screen: Die Website nutzt das gesamte Display des Smartphones.

Fazit

Du hast nun eine voll funktionsfähige Android-App erstellt, die deine Website spiegelt. Änderungen an deiner Website werden automatisch in der App übernommen, ohne dass du ein neues Update hochladen musst!

0