Modifier l'interface utilisateur de navigation

À l'aide du SDK Navigation pour Android, vous pouvez modifier l'expérience utilisateur avec votre carte en déterminant quels éléments et commandes d'interface utilisateur intégrés apparaissent sur la carte. Vous pouvez également ajuster l'apparence visuelle de l'UI de navigation. Consultez la page Règles pour connaître les modifications acceptables de l'interface utilisateur de navigation.

Ce document explique comment modifier l'interface utilisateur de votre carte de deux manières :

• Commandes de l'interface utilisateur de la carte
• Accessoires de l'interface utilisateur de la carte

Remarque : Dans la plupart des cas, nous vous recommandons d'utiliser SupportNavigationFragment, qui est un wrapper pour NavigationView, plutôt que d'interagir directement avec NavigationView. Pour en savoir plus, consultez les bonnes pratiques d'interaction avec la carte de navigation.

Attention : Le SDK Navigation Android n'est pas compatible avec les styles de cartes basés dans le cloud avec des ID de carte.

Commandes d'interface utilisateur de la carte

Les commandes de l'UI de la carte se trouvent au-dessus de la vue de navigation. Le SDK Navigation pour Android repositionne automatiquement vos commandes personnalisées lorsque la mise en page intégrée change. Pour chaque position de la mise en page, vous pouvez définir une commande personnalisée. La commande personnalisée peut être un seul élément d'interface utilisateur ou, si votre conception en nécessite plus, vous pouvez utiliser un ViewGroup avec plusieurs éléments d'interface utilisateur.

La méthode setCustomControl fournit les positions définies dans l'énumération CustomControlPosition :

• SECONDARY_HEADER (s'affiche en mode Portrait uniquement)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW

Les images ci-dessous présentent des exemples de différentes positions d'une commande d'interface utilisateur qui informent un conducteur de covoiturage de la position du passager lors de la prise en charge.

Ajouter un en-tête secondaire personnalisé

Par défaut, les mises en page d'écran en mode de navigation fournissent une position pour un en-tête secondaire situé sous l'en-tête principal. Cet en-tête secondaire apparaît en cas de nécessité, par exemple en cas de guidage sur la voie. Votre application peut utiliser cette position d'en-tête secondaire de la mise en page pour le contenu personnalisé. Lorsque vous utilisez cette fonctionnalité, votre contrôle couvre tout contenu d'en-tête secondaire par défaut. Si votre vue de navigation comporte un arrière-plan, celui-ci reste en place, couvert par l'en-tête secondaire. Lorsque votre application supprime la commande personnalisée, n'importe quel en-tête secondaire par défaut peut apparaître à sa place.

La position d'en-tête secondaire personnalisée aligne son bord supérieur sur le bord inférieur de l'en-tête principal. Cette position n'est compatible qu'avec portrait mode. Dans landscape mode, l'en-tête secondaire n'est pas disponible et la mise en page ne change pas.

1. Créez une vue Android avec l'élément d'interface utilisateur personnalisé ou le ViewGroup.
2. Inflatez le fichier XML ou instanciez la vue personnalisée pour obtenir une instance de la vue à ajouter en tant qu'en-tête secondaire.

3. Utilisez NavigationView.setCustomControl ou SupportNavigationFragment.setCustomControl avec CustomControlPosition comme SECONDARY_HEADER.

   Remarque :Votre application doit appeler cette méthode sur le thread UI.

   L'exemple ci-dessous crée un fragment et ajoute un contrôle personnalisé à la position de l'en-tête secondaire.

   Remarque :Le code de l'exemple contient des sauts de ligne pour plus de visibilité dans la documentation. Veillez à les supprimer si nécessaire.

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

Supprimer un en-tête secondaire

Pour supprimer l'en-tête secondaire et revenir au contenu par défaut, utilisez la méthode setCustomControl.

Définissez la vue sur null pour la supprimer.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Ajouter un contrôle personnalisé en bas de la vue de navigation

Votre application peut spécifier une commande personnalisée alignée sur le bord inférieur de la vue de navigation. Lorsque votre application ajoute la commande personnalisée, le bouton de recentrage et le logo Google se déplacent vers le haut pour s'y adapter.

1. Créez une vue Android avec l'élément d'UI ou le groupe de vues que vous souhaitez ajouter.
2. Créez la vue ou le fragment de navigation.
3. Appelez la méthode setCustomControl sur la vue ou le fragment de navigation, et spécifiez la commande et la position à utiliser.

Remarque : Votre application doit appeler cette méthode sur le thread UI.

L'exemple suivant montre un View personnalisé ajouté à 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);

Supprimer un contrôle personnalisé

Pour supprimer la commande personnalisée, utilisez la méthode setCustomControl et spécifiez sa position.

Définissez la vue sur null pour cette position.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Accessoires de l'UI de la carte

Le SDK Navigation pour Android fournit des accessoires d'interface utilisateur qui s'affichent pendant la navigation, semblables à ceux que l'on trouve dans l'application Google Maps pour Android. Vous pouvez ajuster la visibilité ou l'apparence visuelle de ces commandes, comme décrit dans cette section. Les modifications que vous apportez ici s'appliquent lors de la prochaine session de navigation.

Consultez la page des règles pour connaître les modifications acceptables apportées à l'UI de navigation.

Afficher le code

Afficher/Masquer le code Java de l'activité de navigation

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.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
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 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 =
                (SupportNavigationFragment)
                    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).
                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);
  }
}

Modifier l'en-tête de navigation

Utilisez SupportNavigationFragment.setStylingOptions() ou NavigationView.setStylingOptions() pour modifier le thème de l'en-tête de navigation et de l'indicateur de virage suivant qui s'affiche sous l'en-tête lorsqu'il est disponible.

Vous pouvez définir les attributs suivants :

Type d'attribut	Attributs
Couleur de l'arrière-plan	Mode Jour principal : couleur du titre de navigation en journée Mode Jour secondaire : couleur de jour de l'indicateur de passage suivant. Mode nuit principal : couleur de l'en-tête de navigation en mode nuit Mode Nuit secondaire : couleur nocturne de l'indicateur de passage suivant
Éléments de texte pour les instructions	Couleur du texte Police Taille du texte de la première ligne Taille du texte de la deuxième ligne
Éléments de texte pour les étapes suivantes	Police Couleur du texte de la valeur de la distance Taille du texte de la valeur de distance Couleur du texte des unités de distance Taille du texte des unités de distance
Icônes de manœuvre	Couleur de l'icône de manœuvre de grande taille Couleur de la petite icône de manœuvre
Assistant de voies de circulation	Couleur des voies recommandées

L'exemple suivant montre comment définir des options de style :

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

Désactiver le calque de trafic

Utilisez GoogleMap.setTrafficEnabled() pour activer ou désactiver le calque de trafic sur la carte. Ce paramètre affecte les indications de densité de trafic affichées sur la carte dans son ensemble. Toutefois, cela n'a aucune incidence sur les indications de trafic sur l'itinéraire tracé par le navigateur.

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

Activer les feux de circulation et les panneaux stop

Vous pouvez activer les feux de circulation et les panneaux stop dans l'UI de la carte. Grâce à cette fonctionnalité, l'utilisateur peut activer l'affichage de feux de circulation ou d'icônes de panneaux stop sur son itinéraire, fournissant ainsi un meilleur contexte pour des trajets plus efficaces et précis.

Par défaut, les feux de circulation et les panneaux stop sont désactivés dans le SDK Navigation. Pour activer cette fonctionnalité, appelez DisplayOptions pour chaque fonctionnalité indépendamment.

Remarque : Les feux de signalisation et les panneaux Stop ne peuvent être affichés que pendant la navigation active.

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

Ajouter des repères personnalisés

Le SDK Navigation pour Android utilise désormais les API Google Maps pour les repères. Pour en savoir plus, consultez la documentation de l'API Maps.

Texte flottant

Vous pouvez ajouter du texte flottant n'importe où dans votre application, à condition qu'il ne recouvre pas l'attribution Google. Le SDK Navigation n'est pas compatible avec l'ancrage du texte à une latitude/longitude sur la carte ni à un libellé. Pour en savoir plus, consultez la section Fenêtres d'informations.

Afficher la limitation de vitesse

Vous pouvez afficher ou masquer l'icône de limitation de vitesse de manière programmatique. Utilisez NavigationView.setSpeedLimitIconEnabled() ou SupportNavigationFragment.setSpeedLimitIconEnabled() pour afficher ou masquer l'icône de limite de vitesse. Lorsque cette option est activée, l'icône de limitation de vitesse s'affiche dans un coin inférieur pendant le guidage. Cette icône affiche la limitation de vitesse de la route sur laquelle le véhicule circule. Cette icône n'apparaît que dans les endroits pour lesquels des données fiables sur les limitations de vitesse sont disponibles.

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

L'icône de limite de vitesse est temporairement masquée lorsque le bouton de recentrage s'affiche.

Remarque : Les utilisateurs doivent respecter tous les panneaux routiers. Les données publiées sur l'icône de limitation de vitesse ne servent que de référence. La précision des données de limitation de vitesse ne peut pas être garantie. Vous pouvez signaler les inexactitudes dans nos données sur les limites de vitesse en envoyant une demande sur la page d'assistance Google Cloud.

Définir le mode Nuit

Vous pouvez contrôler de manière programmatique le comportement du mode Nuit. Utilisez NavigationView.setForceNightMode() ou SupportNavigationFragment.setForceNightMode() pour activer ou désactiver le mode Nuit, ou laissez le SDK Navigation pour Android le contrôler.

• AUTO Permet au SDK Navigation de déterminer le mode approprié en fonction de l'emplacement de l'appareil et de l'heure locale.
• FORCE_NIGHT force l'activation du mode Nuit.
• FORCE_DAY force l'activation du mode Jour.

L'exemple suivant montre comment forcer l'activation du mode Nuit dans un fragment de navigation:

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

Afficher la liste de l'itinéraire

Commencez par créer la vue et l'ajouter à votre hiérarchie.

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

Veillez à transférer les événements de cycle de vie à DirectionsListView comme ils le sont avec NavigationView. Exemple :

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

Masquer les itinéraires bis

Avertissement : Cette fonctionnalité n'est actuellement pas compatible avec la fonctionnalité d'itinéraire le plus court/le plus rapide. L'utilisation simultanée de ces deux fonctionnalités peut produire un comportement inattendu.

Lorsque l'interface utilisateur devient surchargée d'informations, vous pouvez la réduire en affichant moins de routes alternatives que la route par défaut (deux) ou en n'affichant aucune alternative. Vous pouvez configurer cette option avant de récupérer les routes en appelant la méthode RoutingOptions.alternateRoutesStrategy() avec l'une des valeurs d'énumération suivantes:

Valeur d'énumération	Description
AlternateRoutesStrategy.SHOW_ALL	Par défaut. Affiche jusqu'à deux itinéraires bis.
AlternateRoutesStrategy.SHOW_ONE	Affiche un itinéraire bis (le cas échéant).
AlternateRoutesStrategy.SHOW_NONE	Masque les itinéraires bis.

L'exemple de code suivant montre comment masquer complètement les itinéraires bis.

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

Barre de progression du trajet

La barre de progression du trajet est une barre verticale qui s'affiche sur le bord droit de la carte lorsque la navigation commence. Lorsqu'il est activé, il affiche une vue d'ensemble de l'ensemble du trajet, ainsi que la destination et la position actuelle de l'utilisateur.

Elle permet aux utilisateurs d'anticiper rapidement les problèmes à venir, tels que le trafic, sans avoir à zoomer. Ils peuvent ensuite modifier l'itinéraire si nécessaire. Si l'utilisateur recalcule l'itinéraire, la barre de progression est réinitialisée comme si un nouveau trajet avait commencé à partir de ce point.

La barre de progression du trajet affiche les indicateurs d'état suivants :

• Durée du trajet : durée du trajet.

• Current position (Position actuelle) : position actuelle de l'utilisateur pendant le trajet.

• État du trafic : état du trafic à venir.

• Destination finale : la destination finale du voyage.

Remarque :La barre de progression du trajet n'est visible qu'en mode Portrait.

Activez la barre de progression du trajet en appelant la méthode setTripProgressBarEnabled() sur NavigationView ou SupportNavigationFragment. Exemple :

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