Navigation Drawer & Bottom Navigation Footer
Ship an app-like navigation experience with the built-in Material navigation drawer and Material 3 bottom navigation bar — no changes to your website required.
WebViewGold liefert zwei eingebaute native Navigations-UIs, sodass Sie eine App-artige Navigation ausrollen können, ohne die Website anzufassen: einen seitlichen Navigation-Drawer und eine Material-3-Bottom-Navigation. Beide sind optional und können kombiniert oder einzeln genutzt werden.
1. Seitlicher Navigation-Drawer
Ein schwebender Menü-Button öffnet einen Material-Navigation-Drawer mit Ihren Links. Aktivieren Sie ihn in Config.java:
static boolean ENABLE_NAVIGATION_DRAWER = true;
Konfigurieren Sie die Einträge und Icons in:
app/src/main/res/menu/menu_drawer.xml
Jeder <item> wird zu einer Drawer-Zeile und navigiert beim Tippen den WebView zur zugehörigen URL.
2. Bottom-Navigation-Footer
Eine Material-3-Bottom-Navigation sitzt am unteren Bildschirmrand und wechselt zwischen den Top-Level-Bereichen. Aktivieren Sie sie in Config.java:
static boolean ENABLE_NAVIGATION_FOOTER = true;
Dieselbe Datei (res/menu/menu_drawer.xml) steuert die Einträge – wählen Sie 3–5 Top-Level-Ziele.
Verhalten:
- Beide UIs respektieren automatisch den Dark-/Light-Modus des Geräts.
- Icons und Beschriftungen kommen aus Ihrer Menü-XML.
- Ein Tap auf einen Eintrag lädt die zugehörige URL im Haupt-WebView, sodass Ihre Web-App nicht die App-Hülle verlässt.
Referenz: Material-3-Bottom-Navigation-Richtlinien.
Implementierungshinweise im SDK-Stil
Betrachten Sie diese Funktion als native Fähigkeit, die Ihrer Web-Ebene bereitgestellt wird: Behalten Sie Ihre Produktivwebsite oder PWA als zentrale Quelle bei und nutzen Sie anschließend die dokumentierten WebViewGold-Konfigurationsflags, URL-Befehle und JavaScript-Bridge-Aufrufe, um natives Android-Verhalten nur dort zu aktivieren, wo es einen Mehrwert bietet. So bleibt Ihre Codebasis wartbar, da dieselbe Webanwendung mit minimaler Fallunterscheidung Browser, WebViewGold für Android und die übrigen WebViewGold-Plattformen bedienen kann.
Für zuverlässige Ergebnisse empfehlen sich HTTPS-Endpunkte, stabile Routennamen, explizite Erfolgs-/Fehlerzustände in Ihrer UI sowie kleine JavaScript-Hilfsfunktionen, die native Aufrufe kapseln. Beispielsweise kann eine mit jQuery Mobile, Lovable, Base44, Bolt, WordPress, Bubble, einem eigenen React-/Vue-/Angular-Stack oder statischem HTML erstellte Web-App eine einzelne Schaltfläche oder einen Event-Handler bereitstellen, der die native WebViewGold-API auslöst und dennoch einen sauberen Browser-Fallback zeigt.
- Empfohlenes Integrationsmuster: Erkennen Sie den App-Kontext, rufen Sie die WebViewGold-API auf und aktualisieren Sie anschließend Ihre Web-UI nach dem nativen Callback oder Routenwechsel.
- Test-Checkliste: Prüfen Sie die Funktion auf einem echten Gerät oder in einem paketierten Build, überprüfen Sie Berechtigungen und Store-Prüftexte und stellen Sie sicher, dass reine Browser-Nutzer weiterhin einen sinnvollen Fallback erhalten.
- SEO-Vorteil: Halten Sie Feature-Seiten, Routentitel und strukturierte Inhalte auf Ihrer Website indexierbar, während WebViewGold die native App-Hülle für Android-Nutzer bereitstellt.