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 cuáles de los controles y elementos integrados de la IU aparecerán 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 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
• Accesorios de la IU de Maps

Precaución: El SDK de Navigation de Android no admite el diseño de mapas basado en Cloud con IDs de mapa.

Controles de la IU del mapa

Los controles de la IU del mapa se sitúan en la parte superior de la vista de navegación. El SDK de Navigation para Android reposiciona automáticamente tus controles personalizados cuando cambia el diseño integrado. Para cada posición del diseño, puedes configurar un control personalizado. El control personalizado puede ser un elemento de la IU o, si tu diseño requiere más, puedes usar un ViewGroup con varios elementos de la IU.

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

• SECONDARY_HEADER (solo aparece en modo vertical)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW

En las siguientes imágenes, se muestran ejemplos de varias posiciones de un control de IU que informan a un conductor de transporte compartido sobre la ubicación del pasajero durante un recogida.

Agregar un encabezado secundario personalizado

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, por ejemplo, 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 abarca cualquier contenido de encabezado secundario predeterminado. Si tu vista de navegación tiene un fondo, ese fondo permanece en su lugar y cubierto por el encabezado secundario. Cuando tu app quita el control personalizado, cualquier encabezado secundario predeterminado puede aparecer 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.

1. Crea una vista de Android con el elemento de IU personalizado o ViewGroup.
2. Aumenta el XML o crea una instancia de la vista personalizada para obtener una instancia de la vista y agregarla como encabezado secundario.

3. Usa NavigationView.setCustomControl o SupportNavigationFragment.setCustomControl con CustomControlPosition como SECONDARY_HEADER.

   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 obtener visibilidad 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 encabezado secundario

Para quitar el encabezado secundario y volver al contenido predeterminado, usa el método setCustomControl.

Establece la vista en null para quitarla.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Agrega un control personalizado en la parte inferior de la vista de navegación

Tu app puede especificar un control personalizado alineado con el borde inferior de la vista de navegación. Cuando tu app agrega el control personalizado, el botón para volver a centrar y el logotipo de Google se mueven hacia arriba para ajustarlos.

1. Crea una vista de Android con el elemento de IU o el grupo de vistas que quieras agregar.
2. Crea la vista de navegación o el fragmento.
3. Llama al método setCustomControl en el fragmento o la vista de navegación, y especifica el control y la posición que se usará.

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

En el siguiente ejemplo, se muestra un View personalizado agregado a un SupportNavigationFragment:

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

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

Cómo quitar un control personalizado

Para quitar el control personalizado, usa el método setCustomControl y especifica la posición del control que deseas quitar.

Establece la vista en null para esa posición.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Accesorios de IU de mapas

El SDK de Navigation para Android proporciona accesorios de 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 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 en la IU de navegación.

Consulta el código

Mostrar/ocultar el código Java para 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.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import com.google.android.libraries.navigation.Camera;
import com.google.android.libraries.navigation.LatLng;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.Marker;
import com.google.android.libraries.navigation.MarkerOptions;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.NavigationMap;
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.SupportNavigationFragment;
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 SupportNavigationFragment mNavFragment;
    private NavigationMap 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 = (SupportNavigationFragment) getFragmentManager()
                                .findFragmentById(R.id.navigation_fragment);

                        // 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));
        // Get the map.
        mMap = mNavFragment.getMap();
        // Turn off the traffic layer on the map.
        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(destinationMarkerIcon)
                    .title("Destination marker"));

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


        // Set the camera to follow the device location with 'TILTED' driving view.
        mNavFragment.getCamera().followMyLocation(Camera.Perspective.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.fromPlaceId(placeId, null);
        } 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).
                                mNavigator.setAudioGuidance(
                                        Navigator.AudioGuidance.VOICE_ALERTS_AND_GUIDANCE);

                                // 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;
                            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);
    }
}

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 atributo	Atributos
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ña
Indicación de carril	Color del carril o carriles recomendados

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

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

Desactiva 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 la 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));

Habilitar semáforos y señales de alto

Puedes habilitar los semáforos y las señales de alto en la IU del mapa. Con esta función, el usuario puede habilitar que se muestren los semáforos o los íconos de señales de alto a lo largo de su ruta, lo que proporciona un mejor contexto para viajes más eficientes y precisos.

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.

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

Agrega 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 Google Maps para obtener más información.

Texto flotante

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

Cómo mostrar el límite de velocidad

Puedes ocultar o mostrar de manera programática el ícono de límite de velocidad. Usa NavigationView.setSpeedLimitIconEnabled() o SupportNavigationFragment.setSpeedLimitIconEnabled() para ocultar o mostrar el ícono de límite de velocidad. Cuando se habilita, el ícono de límite de velocidad se muestra 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 ubicaciones donde hay datos de límites de velocidad confiables disponibles.

// Muestra el ícono de Límite de velocidad mNavFragment.setSpeedLimitIconEnabled(true);

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

Nota: Los usuarios deben seguir todas las señales colocadas en la ruta. Los datos publicados en el ícono de límite de velocidad sirven solo como referencia. No se puede garantizar la exactitud de los datos sobre límites de velocidad. Puedes informar sobre errores en nuestros datos sobre límites de velocidad. Para ello, presenta un caso en la página de asistencia de Google Cloud.

Configurar modo nocturno

Puedes controlar de manera programática el comportamiento del modo nocturno. 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);

Mostrar 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 hacen con NavigationView. Por ejemplo:

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

Ocultando rutas alternativas

Advertencia: Por el momento, esta función no es compatible con la característica de la ruta más corta y rápida. Usar ambas funciones al mismo tiempo puede producir un comportamiento inesperado.

Cuando la interfaz de usuario se satura con demasiada información, puedes reducir el desorden mostrando menos rutas alternativas que la predeterminada (dos) o no mostrando ninguna ruta alternativa. Para configurar esta opción antes de recuperar las rutas, llama 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 las rutas alternativas por completo.

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

Barra de progreso del viaje

La barra de progreso del viaje es una barra vertical que aparece en el borde derecho final del mapa cuando se inicia la navegación. Cuando está habilitada, muestra una descripción general de todo un viaje, junto con el destino y la posición actual del usuario.

Ofrece a los usuarios la posibilidad de anticipar rápidamente cualquier problema futuro, como el tráfico, sin necesidad de acercar la imagen. Luego, pueden redirigir el viaje si es necesario. Si el usuario redirige el viaje, la barra de progreso se restablece como si hubiera comenzado un viaje nuevo a partir de 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: La ubicación actual del usuario en el viaje.

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

• Destino final: el destino final del viaje.

Nota: La barra de progreso del viaje solo se puede ver en modo vertical.

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

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