Modifier l'interface utilisateur de navigation

Le SDK Navigation pour Android vous permet de modifier l'expérience utilisateur avec votre carte en déterminant quels sont les éléments et commandes d'interface utilisateur intégrés qui apparaissent sur la carte. Vous pouvez également ajuster l'apparence visuelle de l'UI de navigation. Consultez la page des règles pour connaître les consignes concernant les modifications acceptables apportées à l'UI 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

Commandes de l'interface utilisateur de la carte

Les commandes d'interface utilisateur de la carte sont recommandées pour placer des éléments d'interface utilisateur personnalisés dans la vue de navigation afin de garantir un positionnement correct. Lorsque la mise en page intégrée change, le SDK Navigation pour Android repositionne automatiquement vos commandes personnalisées. Vous ne pouvez définir qu'une seule vue de contrôle personnalisée à la fois pour chaque position. Si votre conception nécessite plusieurs éléments d'interface utilisateur, vous pouvez les placer dans un ViewGroup et les transmettre à la méthode setCustomControl.

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
• FOOTER

Ajouter un sélecteur personnalisé

1. Créez une vue Android avec l'élément d'UI personnalisé ou le ViewGroup.
2. Inflatez le fichier XML ou instanciez la vue personnalisée pour obtenir une instance de la vue.

3. Utilisez NavigationView.setCustomControl ou SupportNavigationFragment.setCustomControl avec la position de commande personnalisée choisie dans l'énumération CustomControlPosition.

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

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

Supprimer un contrôle personnalisé

Pour supprimer une commande personnalisée, appelez la méthode setCustomControl avec un paramètre de vue null et la position de la commande personnalisée choisie.

Par exemple, l'extrait suivant supprime tout en-tête secondaire personnalisé et revient au contenu par défaut:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Positions des commandes personnalisées

En-tête secondaire

Pour utiliser cette position de commande personnalisée, transmettez la position CustomControlPosition.SECONDARY_HEADER à setCustomControl.

Par défaut, les mises en page d'écran en mode navigation fournissent une position pour un en-tête secondaire situé sous l'en-tête principal. Cet en-tête secondaire s'affiche si nécessaire, par exemple avec les indications de 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, recouvert 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 de l'en-tête secondaire personnalisé 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.

Début en bas

Pour utiliser cette position de commande personnalisée, transmettez la position CustomControlPosition.BOTTOM_START_BELOW à setCustomControl.

Cette position de commande personnalisée se trouve dans l'angle inférieur gauche de la carte. Dans portrait mode et landscape mode, il se trouve au-dessus de la fiche d'heure d'arrivée prévue et/ou du pied de page personnalisé (ou en bas de la carte si aucun de ces éléments n'est présent). Les éléments du SDK Nav, y compris le bouton de recentrage et le logo Google, se déplacent vers le haut pour tenir compte de la hauteur de la vue de contrôle personnalisée. Cette commande est positionnée dans les limites visibles de la carte. Par conséquent, toute marge ajoutée aux bords inférieurs ou de début de la carte modifie également la position de cette commande.

Extrémité inférieure

Pour utiliser cette position de commande personnalisée, transmettez la position CustomControlPosition.BOTTOM_END_BELOW à setCustomControl.

Cette position de commande personnalisée se trouve dans l'angle inférieur droit de la carte. Dans portrait mode, il se trouve au-dessus de la fiche d'heure d'arrivée prévue et/ou du pied de page personnalisé (ou en bas de la carte si aucun de ces éléments n'est présent), mais dans landscape mode, il est aligné avec le bas de la carte. Tous les éléments du SDK Nav visibles sur le côté final (côté droit en mode LTR) sont déplacés vers le haut pour tenir compte de la hauteur de la vue de contrôle personnalisée. Cette commande est positionnée dans les limites visibles de la carte. Par conséquent, toute marge ajoutée aux bords inférieurs ou terminaux de la carte modifie également la position de cette commande.

Footer

Pour utiliser cette position de commande personnalisée, transmettez la position CustomControlPosition.FOOTER à setCustomControl.

Cette position de commande personnalisée est conçue pour une vue de pied de page personnalisée. Si la fiche d'heure d'arrivée prévue du SDK Nav est visible, cette commande se trouve au-dessus. Dans le cas contraire, la commande est alignée sur le bas de la carte. Contrairement aux commandes personnalisées BOTTOM_START_BELOW et BOTTOM_END_BELOW, cette commande est positionnée en dehors des limites de la carte visible. Par conséquent, toute marge ajoutée à la carte ne modifie pas sa position.

Dans portrait mode, le pied de page personnalisé occupe toute la largeur. Les commandes personnalisées aux positions CustomControlPosition.BOTTOM_START_BELOW et CustomControlPosition.BOTTOM_END_BELOW, ainsi que les éléments d'interface utilisateur du SDK Nav, comme le bouton de recentrage et le logo Google, sont positionnés au-dessus du pied de page de la commande personnalisée. La position par défaut du chevron tient compte de la hauteur du pied de page personnalisé.

Dans landscape mode, le pied de page personnalisé est à moitié de la largeur et aligné sur le côté de départ (côté gauche en mode LTR), tout comme la fiche ETA du SDK Nav. Les commandes personnalisées à la position CustomControlPosition.BOTTOM_START_BELOW et les éléments d'interface utilisateur du SDK Nav, tels que le bouton de recentrage et le logo Google, sont placés au-dessus du pied de page de la commande personnalisée. Les commandes personnalisées en position CustomControlPosition.BOTTOM_END_BELOW et les éléments d'interface utilisateur du SDK Nav sur le côté opposé (côté droit en LTR) restent alignés avec le bas de la carte. La position par défaut du chevron ne change pas lorsqu'un pied de page personnalisé est présent, car il ne s'étend pas jusqu'au bout de la carte.

Les commandes personnalisées aux positions CustomControlPosition.BOTTOM_START_BELOW et CustomControlPosition.BOTTOM_END_BELOW, ainsi que les éléments d'interface utilisateur du SDK Nav, comme le bouton de recentrage et le logo Google, sont positionnés au-dessus du pied de page de la commande personnalisée.

Accessoires de l'UI de la carte

Le SDK Navigation pour Android fournit des accessoires d'interface utilisateur qui apparaissent 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

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:

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 d'arrêt

Vous pouvez activer les feux de circulation et les panneaux d'arrêt dans l'interface utilisateur de la carte. Grâce à cette fonctionnalité, l'utilisateur peut activer l'affichage de feux de circulation ou d'icônes de panneau d'arrêt le long de son itinéraire, ce qui fournit un meilleur contexte pour des trajets plus efficaces et plus précis.

Par défaut, les feux de circulation et les panneaux d'arrêt sont désactivés dans le SDK Navigation. Pour activer cette fonctionnalité, appelez DisplayOptions pour chaque élément individuellement.

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 limite 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 la limite de vitesse s'affiche dans un coin inférieur pendant la navigation. L'icône indique la limite de vitesse de la route empruntée par le véhicule. L'icône ne s'affiche que dans les zones où des données fiables sur la limite 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.

Activer le mode Nuit

Vous pouvez contrôler le comportement du mode Nuit par programmation. 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 des itinéraires

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 à transmettre les événements de cycle de vie à DirectionsListView, comme vous le faites avec NavigationView. Exemple :

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

Masquer les itinéraires bis

Lorsque l'interface utilisateur est trop chargée d'informations, vous pouvez réduire l'encombrement en affichant moins de routes de substitution que la valeur par défaut (deux) ou en n'affichant aucune route de substitution. Vous pouvez configurer cette option avant d'extraire les itinéraires en appelant la méthode RoutingOptions.alternateRoutesStrategy() avec l'une des valeurs d'énumération suivantes:

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.

Cela permet aux utilisateurs d'anticiper rapidement les problèmes à venir, tels que le trafic, sans avoir à faire un zoom avant. Il peut ensuite modifier l'itinéraire si nécessaire. Si l'utilisateur modifie l'itinéraire, la barre de progression se réinitialise 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.

• Position actuelle : position actuelle de l'utilisateur sur le trajet.

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

• Destination finale : destination finale du trajet.

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