Cómo modificar la IU de navegación

Con el SDK de Navigation para Android, puedes modificar la experiencia del usuario con tu mapa. Para ello, debes determinar los controles y elementos integrados de la IU que aparecerán en el mapa. También puedes ajustar la apariencia visual de la IU de navegación. Consulta la página de Políticas para obtener instrucciones sobre las modificaciones aceptables en la IU de navegación.

En este documento, se describe cómo modificar la interfaz de usuario de tu mapa de dos maneras:

Controles de la IU del mapa

Para colocar elementos personalizados de la IU en la vista de navegación, usa los controles de la IU del mapa para lograr un posicionamiento adecuado. Cuando cambia el diseño integrado, el SDK de Navigation para Android vuelve a posicionar automáticamente tus controles personalizados. Puedes configurar una vista de control personalizado a la vez para cada posición. Si tu diseño requiere varios elementos de la IU, puedes colocarlos en un ViewGroup y pasarlo al método setCustomControl.

El setCustomControl método proporciona posiciones tal como se definen en la CustomControlPosition enumeración:

  • SECONDARY_HEADER (aparece solo en modo vertical)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
Posiciones de control personalizadas para la orientación vertical.
Posiciones de control personalizado para orientación vertical
Son las posiciones de los controles personalizados para la orientación horizontal.
Posiciones de control personalizado para orientación horizontal

Cómo agregar un control personalizado

  1. Crea una vista de Android con el elemento personalizado de la IU o ViewGroup.
  2. Expande el XML o crea una instancia de la vista personalizada para obtener una instancia de la vista.
  3. Usa NavigationView.setCustomControl o SupportNavigationFragment.setCustomControl con la posición de control personalizado elegida de la CustomControlPosition enumeración.

    En el siguiente ejemplo, se crea un fragmento y se agrega un control personalizado en la posición del encabezado secundario.

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
     ```
    

Cómo quitar un control personalizado

Para quitar un control personalizado, llama al método setCustomControl con un parámetro de vista null y la posición de control personalizado elegida.

Por ejemplo, el siguiente fragmento quita cualquier encabezado secundario personalizado y vuelve al contenido predeterminado:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Posiciones de control personalizado

Encabezado secundario

Posición del control personalizado del encabezado secundario para la orientación vertical.
Posición de control personalizado del encabezado secundario para orientación vertical

Para usar esta posición de control personalizado, pasa la posición CustomControlPosition.SECONDARY_HEADER a setCustomControl.

De forma predeterminada, los diseños de pantalla en modo de navegación proporcionan una posición para un encabezado secundario ubicado debajo del encabezado principal. Este encabezado secundario aparece cuando es necesario, como con la indicación de carril. Tu app puede usar esta posición de encabezado secundario del diseño para contenido personalizado. Cuando usas esta función, tu control cubre cualquier contenido predeterminado del encabezado secundario. Si tu vista de navegación tiene un fondo, este permanece en su lugar, cubierto por el encabezado secundario. Cuando tu app quita el control personalizado, puede aparecer cualquier encabezado secundario predeterminado en su lugar.

La posición personalizada del encabezado secundario alinea su borde superior con el borde inferior del encabezado principal. Esta posición solo se admite en portrait mode. En landscape mode, el encabezado secundario no está disponible y el diseño no cambia.

Inicio inferior

Posición de inicio inferior del control personalizado para la orientación vertical.
Posición de control personalizado del inicio inferior para orientación vertical
Posición del control personalizado de inicio en la parte inferior para la orientación horizontal.
Posición de control personalizado del inicio inferior para orientación horizontal

Para usar esta posición de control personalizado, pasa la posición CustomControlPosition.BOTTOM_START_BELOW a setCustomControl.

Esta posición de control personalizado se encuentra en la esquina inferior izquierda del mapa. En portrait mode y landscape mode, se encuentra sobre la tarjeta de hora de llegada y/o el pie de página personalizado (o en la parte inferior del mapa si no hay ninguno), y los elementos del SDK de Navigation, incluidos el botón de volver a centrar y el logotipo de Google, se mueven hacia arriba para tener en cuenta la altura de la vista de control personalizado. Este control se posiciona dentro de los límites visibles del mapa, por lo que cualquier padding que se agregue a los bordes inferior o izquierdo del mapa también cambiará la posición de este control.

Fin inferior

Posición personalizada del control inferior para la orientación vertical.
Posición de control personalizado del fin inferior para orientación vertical
Posición personalizada del control del extremo inferior para la orientación horizontal.
Posición de control personalizado del fin inferior para orientación horizontal

Para usar esta posición de control personalizado, pasa la posición CustomControlPosition.BOTTOM_END_BELOW a setCustomControl.

Esta posición de control personalizado se encuentra en la esquina inferior derecha del mapa. En portrait mode, se encuentra sobre la tarjeta de hora de llegada y/o el pie de página personalizado (o en la parte inferior del mapa si no hay ninguno), pero en landscape mode, está alineado con la parte inferior del mapa. Cualquier elemento del SDK de Navigation visible a lo largo del lado final (lado derecho en LTR) se mueve hacia arriba para tener en cuenta la altura de la vista de control personalizado. Este control se posiciona dentro de los límites visibles del mapa, por lo que cualquier padding que se agregue a los bordes inferior o derecho del mapa también cambiará la posición de este control.

Posición del control personalizado del pie de página para la orientación vertical.
Posición de control personalizado del pie de página para orientación vertical
Posición del control personalizado del pie de página para la orientación horizontal.
Posición de control personalizado del pie de página para orientación horizontal

Para usar esta posición de control personalizado, pasa la posición CustomControlPosition.FOOTER a setCustomControl.

Esta posición de control personalizado está diseñada para una vista de pie de página personalizado. Si la tarjeta de hora de llegada del SDK de Navigation está visible, este control se encuentra sobre ella. De lo contrario, el control se alinea con la parte inferior del mapa. A diferencia de los controles personalizados BOTTOM_START_BELOW y BOTTOM_END_BELOW, este control se posiciona fuera de los límites visibles del mapa, lo que significa que cualquier padding que se agregue al mapa no cambiará la posición de este control.

En portrait mode, el pie de página personalizado tiene ancho completo. Los controles personalizados en las posiciones CustomControlPosition.BOTTOM_START_BELOW y CustomControlPosition.BOTTOM_END_BELOW, así como los elementos de la IU del SDK de Navigation, como el botón de volver a centrar y el logotipo de Google, se posicionan sobre el pie de página de control personalizado. La posición predeterminada del chevron tiene en cuenta la altura del pie de página personalizado.

En landscape mode, el pie de página personalizado tiene la mitad del ancho y está alineado con el lado inicial (lado izquierdo en LTR), al igual que la tarjeta de hora de llegada del SDK de Navigation. Los controles personalizados en la posición CustomControlPosition.BOTTOM_START_BELOW y los elementos de la IU del SDK de Navigation, como el botón de volver a centrar y el logotipo de Google, se posicionan sobre el pie de página de control personalizado. Los controles personalizados en la posición CustomControlPosition.BOTTOM_END_BELOW y cualquier elemento de la IU del SDK de Navigation a lo largo del lado final (lado derecho en LTR) permanecen alineados con la parte inferior del mapa. La posición predeterminada del chevron no cambia cuando hay un pie de página personalizado, ya que el pie de página no se extiende hasta el lado final del mapa.

Los controles personalizados en las posiciones CustomControlPosition.BOTTOM_START_BELOW y CustomControlPosition.BOTTOM_END_BELOW, así como los elementos de la IU del SDK de Navigation, como el botón de volver a centrar y el logotipo de Google, se posicionan sobre el pie de página de control personalizado.

Accesorios de la IU del mapa

El SDK de Navigation para Android proporciona accesorios de la IU que aparecen durante la navegación de manera similar a los que se encuentran en la aplicación de Google Maps para Android. Puedes ajustar la visibilidad o la apariencia visual de estos controles como se describe en esta sección. Los cambios que realices aquí se reflejarán durante la próxima sesión de navegación.

Consulta la página de Políticas para obtener instrucciones sobre las modificaciones aceptables en la IU de navegación.

Consulta el código

Destacado y entradas de destino

Cuando se crea un destino con un placeID, se destacará el edificio de destino y se mostrará un ícono de entrada, siempre que sea posible. Estas indicaciones visuales ayudan a los usuarios a distinguir su destino y navegar hasta él.

Para crear un destino con un placeID, usa el Waypoint.Builder.setPlaceIdString() método.

Cómo modificar el encabezado de navegación

Usa SupportNavigationFragment.setStylingOptions() o NavigationView.setStylingOptions() para cambiar el tema del encabezado de navegación y el indicador de próximo giro que aparece debajo del encabezado cuando está disponible.

Puedes establecer los siguientes atributos:

Tipo de atributoAtributos
Color de fondo
  • Modo diurno principal: El color diurno del encabezado de navegación
  • Modo diurno secundario: El color diurno del indicador de próximo giro
  • Modo nocturno principal: El color nocturno del encabezado de navegación
  • Modo nocturno secundario: El color nocturno del indicador de próximo giro
Elementos de texto para instrucciones
  • Color del texto
  • Fuente
  • Tamaño del texto de la primera fila
  • Tamaño del texto de la segunda fila
Elementos de texto para los próximos pasos
  • Fuente
  • Color del texto del valor de distancia
  • Tamaño del texto del valor de distancia
  • Color del texto de las unidades de distancia
  • Tamaño del texto de las unidades de distancia
Íconos de maniobra
  • Color del ícono de maniobra grande
  • Color del ícono de maniobra pequeño
Indicación de carril
  • Color del carril o los carriles recomendados

En el siguiente ejemplo, se muestra cómo establecer opciones de estilo:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) getFragmentManager()
  .findFragmentById(R.id.navigation_fragment);

// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
  .primaryDayModeThemeColor(0xff1A237E)
  .secondaryDayModeThemeColor(0xff3F51B5)
  .primaryNightModeThemeColor(0xff212121)
  .secondaryNightModeThemeColor(0xff424242)
  .headerLargeManeuverIconColor(0xffffff00)
  .headerSmallManeuverIconColor(0xffffa500)
  .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerNextStepTextColor(0xff00ff00)
  .headerNextStepTextSize(20f)
  .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
  .headerDistanceValueTextColor(0xff00ff00)
  .headerDistanceUnitsTextColor(0xff0000ff)
  .headerDistanceValueTextSize(20f)
  .headerDistanceUnitsTextSize(18f)
  .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerInstructionsTextColor(0xffffff00)
  .headerInstructionsFirstRowTextSize(24f)
  .headerInstructionsSecondRowTextSize(20f)
  .headerGuidanceRecommendedLaneColor(0xffffa500));

Cómo desactivar la capa de tráfico

Use GoogleMap.setTrafficEnabled() para habilitar o inhabilitar la capa de tráfico en el mapa. Este parámetro de configuración afecta las indicaciones de densidad de tráfico que se muestran en el mapa en su totalidad. Sin embargo, no afecta las indicaciones de tráfico en la ruta trazada por el navegador.

private GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

Cómo habilitar semáforos y señales de alto

Puedes habilitar la visualización de semáforos y señales de alto en el mapa durante la navegación activa, lo que proporciona contexto adicional para las rutas y las maniobras de viaje.

De forma predeterminada, los semáforos y las señales de alto están inhabilitados en el SDK de Navigation. Para habilitar esta función, llama a DisplayOptions para cada función de forma independiente.

En el siguiente ejemplo, se muestra cómo ocultar semáforos y señales de alto:

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

Cómo agregar marcadores personalizados

El SDK de Navigation para Android ahora usa las APIs de Google Maps para los marcadores. Consulta la documentación de la API de Maps para obtener más información.

Texto flotante

Puedes agregar texto flotante en cualquier lugar de tu app, siempre que no cubra la atribución de Google. El SDK de Navigation no admite anclar el texto a una latitud o longitud en el mapa, ni a una etiqueta. Consulta Info windows para obtener más información.

Cómo mostrar el límite de velocidad

Puedes mostrar u ocultar el ícono de límite de velocidad de forma programática. Usa NavigationView.setSpeedLimitIconEnabled() o SupportNavigationFragment.setSpeedLimitIconEnabled() para mostrar u ocultar el ícono de límite de velocidad. Cuando está habilitado, el ícono de límite de velocidad se muestra en una esquina inferior durante la indicación. El ícono muestra el límite de velocidad de la ruta por la que viaja el vehículo. El ícono solo aparece en ubicaciones donde hay datos confiables de límite de velocidad disponibles.

 // Display the Speed Limit icon
 mNavFragment.setSpeedLimitIconEnabled(true);

El ícono de límite de velocidad se oculta temporalmente cuando se muestra el botón de volver a centrar.

Cómo configurar el modo nocturno

Puedes controlar el comportamiento del modo nocturno de forma programática. Usa NavigationView.setForceNightMode() o SupportNavigationFragment.setForceNightMode() para activar o desactivar el modo nocturno, o bien permite que el SDK de Navigation para Android lo controle.

  • AUTO permite que el SDK de Navigation determine el modo adecuado según la ubicación del dispositivo y la hora local.
  • FORCE_NIGHT fuerza el modo nocturno.
  • FORCE_DAY fuerza el modo diurno.

En el siguiente ejemplo, se muestra cómo forzar la activación del modo nocturno dentro de un fragmento de navegación:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

Cómo mostrar la lista de instrucciones sobre cómo llegar

Primero, crea la vista y agrégala a tu jerarquía.

void setupDirectionsListView() {
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

Asegúrate de reenviar los eventos de ciclo de vida a DirectionsListView de la misma manera que lo haces con NavigationView. Por ejemplo:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

Cómo ocultar rutas alternativas

Cuando la interfaz de usuario se desordena con demasiada información, puedes reducir el desorden mostrando menos rutas alternativas que las predeterminadas (dos) o no mostrando ninguna. Puedes configurar esta opción antes de recuperar las rutas llamando al método RoutingOptions.alternateRoutesStrategy() con uno de los siguientes valores de enumeración:

Valor de enumeraciónDescripción
AlternateRoutesStrategy.SHOW_ALL Predeterminado. Muestra hasta dos rutas alternativas.
AlternateRoutesStrategy.SHOW_ONE Muestra una ruta alternativa (si hay una disponible).
AlternateRoutesStrategy.SHOW_NONE Oculta las rutas alternativas.

En el siguiente ejemplo de código, se muestra cómo ocultar las rutas alternativas por completo.

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

Barra de progreso del viaje

Se agregó la barra de progreso del viaje a la navegación.

La barra de progreso del viaje es una barra vertical que aparece en el lado inicial o principal del mapa cuando comienza la navegación. Cuando está habilitada, muestra una descripción general de todo el viaje, junto con el destino del usuario y la posición actual.

El permite a los usuarios anticipar rápidamente cualquier problema próximo, como el tráfico, sin necesidad de acercar la imagen. Luego, pueden cambiar la ruta del viaje si es necesario. Si el usuario cambia la ruta del viaje, la barra de progreso se restablece como si hubiera comenzado un viaje nuevo desde ese punto.

La barra de progreso del viaje muestra los siguientes indicadores de estado:

  • Ruta transcurrida: La parte transcurrida del viaje

  • Posición actual: La ubicación actual del usuario en el viaje

  • Estado del tráfico : El estado del tráfico próximo

  • Destino final: El destino final del viaje

Para habilitar la barra de progreso del viaje, llama al setTripProgressBarEnabled() método en NavigationView o SupportNavigationFragment. Por ejemplo:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);

Posicionamiento de la barra de progreso del viaje

  • El lado izquierdo de la barra se alinea aproximadamente con la izquierda del velocímetro, el logotipo de Google y el botón de volver a centrar (cuando está visible). El ancho es de 12 dp.
  • La barra de progreso del viaje mantiene una altura estática. Para adaptarse a las limitaciones de espacio vertical en dispositivos más pequeños, la visibilidad y la altura de la barra de progreso del viaje se adaptan según los puntos de interrupción especificados en la altura de la pantalla. Estos puntos de interrupción son independientes de la orientación del dispositivo y de la cantidad de espacio que ocupa el mapa en la pantalla:
  • Altura de la pantalla Visibilidad de la barra de progreso del viaje Altura de la barra de progreso del viaje Posición del eje y de la barra de progreso del viaje
    Pequeño: 0 dp - 551 dp No visible N/A N/A
    Mediano: 552 dp - 739 dp Visible 130 dp Sobre los controles del lado inicial (velocímetro, logotipo de Google, botón de volver a centrar)
    Grande: 740 dp y superior Visible 290 dp Sobre los controles del lado inicial (velocímetro, logotipo de Google, botón de volver a centrar)
  • Si la barra de progreso del viaje se superpone con la tarjeta de giro o con otros elementos de la IU de Navigation, aparece debajo de esos otros elementos.

Brújula

El SDK de Navigation proporciona un gráfico de brújula que, en ciertas circunstancias, aparece en la esquina superior derecha del mapa y solo cuando está habilitado. Cuando el usuario hace clic en la brújula, la cámara adopta una posición en la que el rumbo equivale a cero (es decir, la orientación predeterminada), y la brújula se atenúa poco después.

Si la navegación está habilitada y el modo de cámara está configurado como "following", la brújula permanece visible y, si se presiona, se alterna entre las perspectivas de la cámara inclinada y la de descripción general.

Para evitar que el conductor se distraiga, la brújula permanece en la misma posición si el encabezado (en modo vertical) se expande y entra en conflicto con la posición predeterminada de la brújula. Si agregas un control personalizado de encabezado secundario o una vista de accesorio de encabezado, la brújula se oculta para evitar conflictos en la IU.

La brújula admite los modos diurno y nocturno, así como el modo oscuro.

La brújula está habilitada de forma predeterminada. Puedes configurar si la brújula está habilitada con el compassEnabled método en la GoogleMapOptions clase.

Cómo desactivar los edificios 3D

Para dispositivos con restricciones de rendimiento, puedes desactivar la visualización de edificios 3D llamando a GoogleMap.setBuildingsEnabled(false).

API de Prompt Visibility (experimental)

La API de Prompt Visibility te permite evitar conflictos entre los elementos de la IU generados por el SDK de Navigation y tus propios elementos personalizados de la IU. Para ello, agrega un objeto de escucha para recibir una devolución de llamada antes de que esté a punto de aparecer un elemento de la IU del SDK de Navigation y en cuanto se quite el elemento. Para obtener más información, incluidas muestras de código, consulta la sección API de Prompt Visibilityde la página Configura interrupciones en tiempo real.