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 incluye dos interfaces de navegación nativas integradas para que pueda ofrecer una experiencia de navegación tipo app sin tocar su sitio web: un panel de navegación lateral y un pie de navegación inferior Material 3. Ambas son opcionales y pueden combinarse o utilizarse de forma independiente.
1. Panel de navegación lateral
Un botón de menú flotante abre un panel de navegación Material con sus enlaces. Actívelo en Config.java:
static boolean ENABLE_NAVIGATION_DRAWER = true;
Configure las entradas y los iconos en:
app/src/main/res/menu/menu_drawer.xml
Cada <item> se convierte en una fila del panel y, al tocarla, dirige el WebView a la URL que le asocie.
2. Pie de navegación inferior
Una barra de navegación inferior Material 3 se sitúa en la parte inferior de la pantalla y permite alternar entre las secciones principales. Actívela en Config.java:
static boolean ENABLE_NAVIGATION_FOOTER = true;
El mismo archivo (res/menu/menu_drawer.xml) gestiona las entradas: elija de 3 a 5 destinos de nivel superior.
Comportamiento:
- Ambas interfaces respetan automáticamente el modo oscuro o claro del dispositivo.
- Los iconos y las etiquetas provienen de su XML de menú.
- Al tocar una entrada se carga la URL asociada en el WebView principal, por lo que su aplicación web nunca abandona el envoltorio de la app.
Referencia: Directrices de la barra de navegación de Material 3.
Notas de implementación estilo SDK
Trate esta función como una capacidad nativa expuesta a su capa web: mantenga su sitio web de producción o PWA como fuente de verdad y, a continuación, utilice los indicadores de configuración de WebViewGold, los comandos de URL y las llamadas del puente de JavaScript documentados para activar el comportamiento nativo de Android solo donde aporte valor. Este enfoque mantiene su código fácil de mantener, porque la misma aplicación web puede servir a los navegadores, a WebViewGold para Android y a las demás plataformas de WebViewGold con una lógica condicional mínima.
Para obtener resultados fiables, opte por puntos de conexión HTTPS, nombres de ruta estables, estados de éxito/error explícitos en su interfaz y pequeñas funciones auxiliares de JavaScript que envuelvan las llamadas nativas. Por ejemplo, una aplicación web creada con jQuery Mobile, Lovable, Base44, Bolt, WordPress, Bubble, una pila propia de React/Vue/Angular o HTML estático puede exponer un único botón o controlador de eventos que active la API nativa de WebViewGold y, aun así, muestre una alternativa elegante en el navegador.
- Patrón de integración recomendado: detecte el contexto de la app, llame a la API de WebViewGold y luego actualice su interfaz web tras la devolución de llamada nativa o el cambio de ruta.
- Lista de comprobación de pruebas: valide la función en un dispositivo real o en una compilación empaquetada, verifique los permisos y el texto de revisión de la tienda, y confirme que los usuarios que solo usan el navegador siguen recibiendo una alternativa útil.
- Ventaja para el SEO: mantenga las páginas de funciones, los títulos de ruta y el contenido estructurado indexables en su sitio web, mientras WebViewGold ofrece la carcasa nativa de la app para los usuarios de Android.