Cómo modificar la IU de navegación

Con el SDK de Navigation para Android, puedes modificar la experiencia del usuario con tu mapa determinando qué controles y elementos de la IU integrados aparecen en el mapa. También puedes ajustar el aspecto visual de la IU de navegación. Consulta la página de Políticas para obtener lineamientos sobre las modificaciones aceptables de 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
• Accesorios de la IU del mapa

Nota: En la mayoría de los casos, recomendamos usar NavigationFragment, que es un wrapper para NavigationView, en lugar de interactuar directamente con NavigationView. Para obtener más información, consulta las prácticas recomendadas para la interacción con el mapa de navegación .

Controles de la IU del mapa

Nota: Los controles de diseño basados en ranuras que se describen en esta sección, como setCustomControl, dejarán de estar disponibles. En su lugar, se recomienda usar la función experimental de personalización del diseño.

Para colocar elementos de la IU personalizados en la vista de navegación, usa los controles de la IU del mapa para ubicarlos correctamente. Cuando cambia el diseño integrado, el SDK de Navigation para Android vuelve a posicionar automáticamente tus controles personalizados. Puedes establecer una vista de control personalizada 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 método setCustomControl proporciona posiciones según se definen en la enum CustomControlPosition:

• SECONDARY_HEADER (solo aparece en modo Retrato)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW
• FOOTER

Posiciones de controles personalizados para la orientación vertical

Posiciones de control personalizadas para la orientación horizontal

Cómo agregar un control personalizado

1. Crea una vista de Android con el elemento de la IU o el ViewGroup personalizados.
2. Expande el XML o crea una instancia de la vista personalizada para obtener una instancia de la vista.

3. Usa NavigationView.setCustomControl o NavigationFragment.setCustomControl con la posición elegida para el control personalizado desde la enumeración CustomControlPosition.

   Nota: Tu app debe llamar a este método en el subproceso de IU.

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

   Nota: El código del ejemplo tiene saltos de línea para que se vea mejor en la documentación. Asegúrate de quitarlos según corresponda.

    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 del control personalizado elegida.

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

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Posiciones de los controles personalizados

Encabezado secundario

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

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

De forma predeterminada, los diseños de pantalla en el 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 guía de carriles. Tu app puede usar esta posición de encabezado secundario del diseño para el 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 del encabezado secundario personalizado 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.

Bottom start

Posición del control personalizado en la parte inferior izquierda para la orientación vertical

Posición del control personalizado en la parte inferior izquierda para la orientación horizontal

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

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

Extremo inferior

Posición del control personalizado en el extremo inferior para la orientación vertical

Posición del control personalizado en el extremo inferior para la orientación horizontal

Para usar esta posición de control personalizada, 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 ubica sobre la tarjeta de hora de llegada estimada o el pie de página personalizado (o en la parte inferior del mapa si no hay ninguno de los dos), pero en landscape mode se alinea con la parte inferior del mapa. Todos los elementos del SDK de Navigation visibles en el lado final (lado derecho en LTR) se mueven hacia arriba para tener en cuenta la altura de la vista de control personalizada. 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 final del mapa también cambiará la posición de este control.

Pie de página

Función de versión preliminar

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

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

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

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

En portrait mode, el pie de página personalizado tiene el 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 para volver a centrar y el logotipo de Google, se posicionan sobre el pie de página de controles personalizados. La posición predeterminada de la comilla angular tiene en cuenta la altura personalizada del pie de página.

En landscape mode, el pie de página personalizado tiene la mitad del ancho y está alineado con el lado de inicio (lado izquierdo en LTR), al igual que la tarjeta de hora de llegada estimada 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 para volver a centrar y el logotipo de Google, se posicionan sobre el pie de página del control personalizado. Los controles personalizados en la posición CustomControlPosition.BOTTOM_END_BELOW y los elementos de la IU del SDK de Navigation que se encuentran en el lado final (lado derecho en LTR) permanecen alineados con la parte inferior del mapa. La posición predeterminada de la comilla angular no cambia cuando hay un pie de página personalizado, ya que este 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 para volver a centrar y el logotipo de Google, se posicionan sobre el pie de página de controles personalizados.

Accesorios de la IU del mapa

El SDK de Navigation para Android proporciona accesorios de la IU que aparecen durante la navegación, similares a los que se encuentran en la aplicación de Google Maps para Android. Puedes ajustar la visibilidad o el aspecto 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 lineamientos sobre las modificaciones aceptables de la IU de navegación.

Consulta el código

Muestra u oculta el código Java de la actividad de navegación.

package com.example.navsdkcustomization;

import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.CameraPerspective;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.libraries.navigation.AudioGuidanceSettings;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.NavigationFragment;
import com.google.android.libraries.navigation.Navigator;
import com.google.android.libraries.navigation.SimulationOptions;
import com.google.android.libraries.navigation.StylingOptions;
import com.google.android.libraries.navigation.Waypoint;

/** An activity that displays a map and a customized navigation UI. */
public class NavigationActivityCustomization extends AppCompatActivity {

  private static final String TAG = NavigationActivityCustomization.class.getSimpleName();
  private Navigator mNavigator;
  private NavigationFragment mNavFragment;
  private GoogleMap mMap;
  // Define the Sydney Opera House by specifying its place ID.
  private static final String SYDNEY_OPERA_HOUSE = "ChIJ3S-JXmauEmsRUcIaWtf4MzE";
  // Set fields for requesting location permission.
  private static final int PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION = 1;
  private boolean mLocationPermissionGranted;

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

    // Initialize the Navigation SDK.
    initializeNavigationSdk();
  }

  /**
   * Starts the Navigation SDK and sets the camera to follow the device's location. Calls the
   * navigateToPlace() method when the navigator is ready.
   */
  private void initializeNavigationSdk() {
    /*
     * Request location permission, so that we can get the location of the
     * device. The result of the permission request is handled by a callback,
     * onRequestPermissionsResult.
     */
    if (ContextCompat.checkSelfPermission(
            this.getApplicationContext(), android.Manifest.permission.ACCESS_FINE_LOCATION)
        == PackageManager.PERMISSION_GRANTED) {
      mLocationPermissionGranted = true;
    } else {
      ActivityCompat.requestPermissions(
          this,
          new String[] {android.Manifest.permission.ACCESS_FINE_LOCATION},
          PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION);
    }

    if (!mLocationPermissionGranted) {
      displayMessage(
          "Error loading Navigation SDK: " + "The user has not granted location permission.");
      return;
    }

    // Get a navigator.
    NavigationApi.getNavigator(
        this,
        new NavigationApi.NavigatorListener() {
          /** Sets up the navigation UI when the navigator is ready for use. */
          @Override
          public void onNavigatorReady(Navigator navigator) {
            displayMessage("Navigator ready.");
            mNavigator = navigator;
            mNavFragment =
                (NavigationFragment)
                    getSupportFragmentManager().findFragmentById(R.id.navigation_fragment);

            // Get the map.
            mNavFragment.getMapAsync(
                new OnMapReadyCallback() {
                  @Override
                  public void onMapReady(GoogleMap map) {
                    mMap = map;
                    // Navigate to a place, specified by Place ID.
                    navigateToPlace(SYDNEY_OPERA_HOUSE);
                  }
                });
          }

          /**
           * Handles errors from the Navigation SDK.
           *
           * @param errorCode The error code returned by the navigator.
           */
          @Override
          public void onError(@NavigationApi.ErrorCode int errorCode) {
            switch (errorCode) {
              case NavigationApi.ErrorCode.NOT_AUTHORIZED:
                displayMessage(
                    "Error loading Navigation SDK: Your API key is "
                        + "invalid or not authorized to use the Navigation SDK.");
                break;
              case NavigationApi.ErrorCode.TERMS_NOT_ACCEPTED:
                displayMessage(
                    "Error loading Navigation SDK: User did not accept "
                        + "the Navigation Terms of Use.");
                break;
              case NavigationApi.ErrorCode.NETWORK_ERROR:
                displayMessage("Error loading Navigation SDK: Network error.");
                break;
              case NavigationApi.ErrorCode.LOCATION_PERMISSION_MISSING:
                displayMessage(
                    "Error loading Navigation SDK: Location permission " + "is missing.");
                break;
              default:
                displayMessage("Error loading Navigation SDK: " + errorCode);
            }
          }
        });
  }

  /** Customizes the navigation UI and the map. */
  private void customizeNavigationUI() {
    // Set custom colors for the navigator.
    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));

    mMap.setTrafficEnabled(false);

    // Place a marker at the final destination.
    if (mNavigator.getCurrentRouteSegment() != null) {
      LatLng destinationLatLng = mNavigator.getCurrentRouteSegment().getDestinationLatLng();

      Bitmap destinationMarkerIcon =
          BitmapFactory.decodeResource(getResources(), R.drawable.ic_person_pin_48dp);

      mMap.addMarker(
          new MarkerOptions()
              .position(destinationLatLng)
              .icon(BitmapDescriptorFactory.fromBitmap(destinationMarkerIcon))
              .title("Destination marker"));

      // Listen for a tap on the marker.
      mMap.setOnMarkerClickListener(
          new GoogleMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
              displayMessage(
                  "Marker tapped: "
                      + marker.getTitle()
                      + ", at location "
                      + marker.getPosition().latitude
                      + ", "
                      + marker.getPosition().longitude);

              // The event has been handled.
              return true;
            }
          });
    }

    // Set the camera to follow the device location with 'TILTED' driving view.
    mMap.followMyLocation(CameraPerspective.TILTED);
  }

  /**
   * Requests directions from the user's current location to a specific place (provided by the
   * Google Places API).
   */
  private void navigateToPlace(String placeId) {
    Waypoint destination;
    try {
      destination =
          Waypoint.builder().setPlaceIdString(placeId).build();
    } catch (Waypoint.UnsupportedPlaceIdException e) {
      displayMessage("Error starting navigation: Place ID is not supported.");
      return;
    }

    // Create a future to await the result of the asynchronous navigator task.
    ListenableResultFuture<Navigator.RouteStatus> pendingRoute =
        mNavigator.setDestination(destination);

    // Define the action to perform when the SDK has determined the route.
    pendingRoute.setOnResultListener(
        new ListenableResultFuture.OnResultListener<Navigator.RouteStatus>() {
          @Override
          public void onResult(Navigator.RouteStatus code) {
            switch (code) {
              case OK:
                // Hide the toolbar to maximize the navigation UI.
                if (getActionBar() != null) {
                  getActionBar().hide();
                }

                // Customize the navigation UI.
                customizeNavigationUI();

                // Enable voice audio guidance (through the device speaker).
                AudioGuidanceSettings audioSettings =
                    AudioGuidanceSettings.builder()
                        .setGuidanceMode(
                            AudioGuidanceSettings.GuidanceMode.VOICE_ALERTS_AND_GUIDANCE)
                        .build();
                mNavigator.setAudioGuidanceSettings(audioSettings);

                // Simulate vehicle progress along the route for demo/debug builds.
                if (BuildConfig.DEBUG) {
                  mNavigator
                      .getSimulator()
                      .simulateLocationsAlongExistingRoute(
                          new SimulationOptions().speedMultiplier(5));
                }

                // Start turn-by-turn guidance along the current route.
                mNavigator.startGuidance();
                break;
              // Handle error conditions returned by the navigator.
              case NO_ROUTE_FOUND:
                displayMessage("Error starting navigation: No route found.");
                break;
              case NETWORK_ERROR:
                displayMessage("Error starting navigation: Network error.");
                break;
              case ROUTE_CANCELED:
                displayMessage("Error starting navigation: Route canceled.");
                break;
              case ROUTING_TIMEOUT:
                displayMessage("Error starting navigation: Routing timed out.");
                break;
              default:
                displayMessage("Error starting navigation: " + String.valueOf(code));
            }
          }
        });
  }

  /** Handles the result of the request for location permissions. */
  @Override
  public void onRequestPermissionsResult(
      int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    mLocationPermissionGranted = false;
    switch (requestCode) {
      case PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION:
        {
          // If request is canceled, the result arrays are empty.
          if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            mLocationPermissionGranted = true;
          }
        }
    }
  }

  /**
   * Shows a message on screen and in the log. Used when something goes wrong.
   *
   * @param errorMessage The message to display.
   */
  private void displayMessage(String errorMessage) {
    Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show();
    Log.d(TAG, errorMessage);
  }
}

Entradas y destinos destacados

Cuando se crea un destino con un objeto 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 hacia él.

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

Nota: El SDK de Navigation no admite la navegación en interiores. Para los mapas de interiores sin navegación, usa las clases indoorBuilding y indoorLevel del SDK de Maps para Android.

Cómo modificar el encabezado de navegación

Usa NavigationFragment.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.

Nota: La altura predeterminada del encabezado es dinámica y se ajusta según la guía de maniobras que se muestra.

Puedes establecer los siguientes atributos:

Tipo de atributo	Atributos
Color de fondo	Modo diurno principal: Es el color diurno del encabezado de navegación. Modo diurno secundario: Es el color diurno del indicador de próximo giro. Modo nocturno principal: Es el color nocturno del encabezado de navegación. Modo nocturno secundario: Es el color nocturno del indicador de la próxima maniobra.
Elementos de texto para las 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 Es el color del texto del valor de la distancia. Es el tamaño del texto del valor de la distancia. Es el color del texto de las unidades de longitud. Tamaño del texto de las unidades de longitud
Íconos de maniobra	Es el color del ícono de maniobra grande. Es el color del ícono de maniobra pequeño.
Indicación de carril	Es el color de los carriles recomendados.

En el siguiente ejemplo, se muestra cómo configurar las opciones de diseño:

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getSupportFragmentManager()
  .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

Usa 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 del 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));

Semáforos y señales de alto

Durante la navegación activa, el mapa muestra semáforos y señales de alto para brindarles a los usuarios más contexto sobre la ruta y las próximas maniobras. A partir de la versión 8.0.0, no puedes desactivar esta función.

Nota: Es posible que también aparezcan semáforos en el mapa cuando no estés en el modo de navegación.

Agrega marcadores personalizados

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

Texto flotante

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

Muestra el límite de velocidad

Puedes ocultar o mostrar el ícono de límite de velocidad de manera programática. Usa NavigationView.setSpeedLimitIconEnabled() o NavigationFragment.setSpeedLimitIconEnabled() para mostrar u ocultar el ícono de límite de velocidad. Cuando se habilita, el ícono de límite de velocidad aparece en una esquina inferior durante la guía. El ícono muestra el límite de velocidad de la ruta por la que viaja el vehículo. El ícono solo aparece en las ubicaciones en las que hay datos confiables sobre el límite de velocidad.

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

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

Nota: Los usuarios deben seguir todas las señales publicadas en la ruta. Los datos que se muestran en el ícono de límite de velocidad solo sirven como referencia. No se puede garantizar la exactitud de los datos de límites de velocidad. Puedes informar imprecisiones en nuestros datos de límites de velocidad presentando un caso en la página de Atención al cliente de Google Cloud.

Cómo configurar el modo nocturno

Puedes controlar de forma programática el comportamiento del modo nocturno. Usa NavigationView.setForceNightMode() o NavigationFragment.setForceNightMode() para activar o desactivar el modo nocturno, o bien deja 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 la activación del modo nocturno.
• FORCE_DAY fuerza el modo diurno.

En el siguiente ejemplo, se muestra cómo forzar la activación del modo nocturno en 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 tal como lo haces con NavigationView. Por ejemplo:

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

Ocultar rutas alternativas

Advertencia: Esta función no es compatible con la función de ruta más corta o rápida. Si usas ambas funciones al mismo tiempo, se puede producir un comportamiento inesperado.

Cuando la interfaz de usuario se llena de 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ón	Descripció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 por completo las rutas alternativas.

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

Barra de progreso del viaje

Función experimental

La barra de progreso del viaje es una barra vertical que aparece en el lado de inicio o de avance del mapa cuando comienza la navegación. Cuando se habilita, muestra un resumen de un viaje completo, junto con el destino y la posición actual del usuario.

Esto permite que los usuarios anticipen cualquier problema próximo, como el tráfico, sin necesidad de acercar la imagen. Luego, pueden redirigir el viaje si es necesario. Si el usuario cambia la ruta del viaje, la barra de progreso se restablece como si se hubiera iniciado un viaje nuevo desde ese punto.

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

• Ruta transcurrida: Es la parte transcurrida del viaje.

• Posición actual: Es la ubicación actual del usuario en el viaje.

• Estado del tráfico: Es el estado del tráfico próximo.

• Destino final: Es el destino final del viaje.

Para habilitar la barra de progreso del viaje, llama al método setTripProgressBarEnabled() en NavigationView o NavigationFragment. 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 el lado izquierdo del velocímetro, el logotipo de Google y el botón 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 a 551 dp	No visible	N/A	N/A
Medio: 552 dp a 739 dp	Visible	130 dp	Arriba de los controles laterales de inicio (velocímetro, logotipo de Google y botón Volver a centrar)
Grande: 740 dp o más	Visible	290 dp	Arriba de los controles del lado de inicio (velocímetro, logotipo de Google y botón Volver a centrar)

Nota: Los valores de altura de la pantalla que se muestran en la tabla anterior se aplican a las versiones 6.2.1 y posteriores del SDK de Navigation. En la versión 6.2.0, las pantallas pequeñas se definen como de 0 dp a 519 dp; las medianas, de 520 dp a 599 dp, y las grandes, de 600 dp o más. La visibilidad, la altura y la posición en el eje Y de la barra de progreso del viaje son las mismas.
• Si la barra de progreso del viaje se superpone con la tarjeta de giro o con otros elementos de la IU de navegación, aparecerá debajo de esos otros elementos.

Brújula

El SDK de Navigation proporciona un gráfico de brújula que, en ciertas circunstancias y solo cuando está habilitado, aparece en la esquina superior derecha del mapa. 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 en "following", la brújula permanece visible y, cuando la presionas, se alterna entre las perspectivas de cámara inclinada y general.

Para evitar la distracción del conductor, la brújula permanece en la misma posición si el encabezado (en modo Retrato) 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 ocultará 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 establecer si la brújula está habilitada con el método compassEnabled en la clase GoogleMapOptions.

Cómo desactivar los edificios 3D

En el caso de los dispositivos con limitaciones de rendimiento, puedes desactivar la visualización de edificios en 3D llamando a GoogleMap.setBuildingsEnabled(false).

API de Prompt Visibility (experimental)

Función experimental

La API de Prompt Visibility te permite evitar conflictos entre los elementos de la IU que genera el SDK de Navigation y tus propios elementos de la IU personalizados. Para ello, agrega un objeto de escucha que reciba una devolución de llamada antes de que aparezca 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 Visibility de la página Configura interrupciones en tiempo real.