Personnaliser l'interface utilisateur de navigation

Vous pouvez personnaliser les éléments de la carte et de l'interface utilisateur de navigation, et ajouter des repères personnalisés à la carte. Reportez-vous à la page Règles pour connaître les modifications acceptables de l'interface utilisateur Navigation.

Voir le code

Personnaliser l'en-tête de navigation

Utilisez NavigationFragment.setStylingOptions() ou NavigationView.setStylingOptions() pour modifier le thème de l'en-tête de navigation et 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'attributAttributs
Couleur d'arrière-plan
  • Mode Jour principal : couleur diurne de l'en-tête de navigation
  • Mode Jour secondaire : couleur diurne de l'indicateur de route suivante
  • Mode nuit principal : couleur nocturne de l'en-tête de navigation
  • Mode Nuit secondaire : couleur de l'indicateur de route suivant la nuit
Éléments de texte pour les instructions
  • Couleur du texte
  • Font
  • Taille du texte de la première ligne
  • Taille du texte de la deuxième ligne
Éléments de texte pour les étapes suivantes
  • Font
  • Couleur du texte de la valeur de 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 la grande icône de manœuvre
  • Couleur de la petite icône de manœuvre
Indication de voie
  • Couleur des voies ou voies recommandées

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

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) 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 NavigationMap.setTrafficEnabled() pour activer ou désactiver le calque de trafic sur la carte. Ce paramètre affecte les indications de densité du trafic affichées sur la carte dans son ensemble, mais n'a aucune incidence sur celles de l'itinéraire tracé par le navigateur.

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

Ajouter des repères personnalisés

Vous pouvez ajouter des repères personnalisés à la carte afin d'indiquer des points d'intérêt pour votre application ou vos utilisateurs. Par exemple, vous pouvez indiquer le point de départ à la fin de l'itinéraire. Utilisez NavigationMap.addMarker() pour ajouter un repère et NavigationMap.setOnMarkerClickListener() pour écouter les appuis sur un repère.

Le code ci-dessous utilise une icône stockée dans les ressources drawables du projet : R.drawable.ic_person_pin_48dp. Vous pouvez utiliser n'importe quelle image adaptée à votre application.

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

Vous pouvez spécifier une image personnalisée en tant que repère, mais le SDK ne permet actuellement pas d'ajouter des libellés textuels à ces images. Pour en savoir plus, consultez Personnaliser les repères.

Texte flottant

Vous pouvez ajouter du texte flottant n'importe où dans votre application, à condition que l'attribution Google ne soit pas couverte. Le SDK Navigation ne permet pas d'ancrer le texte à une latitude/longitude sur la carte ou à 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 par programmation. Utilisez NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() ou SupportNavigationFragment.setSpeedLimitIconEnabled() pour afficher ou masquer l'icône de limitation 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. L'icône ne s'affiche que dans les endroits où des données fiables sur les limitations de vitesse sont disponibles.

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

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

Définir le mode Nuit

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

  • AUTO permet au SDK Navigation de déterminer le mode approprié en fonction de la position 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 l'itinéraire détaillé

Commencez par créer la vue et ajoutez-la à votre hiérarchie.

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 NaviagtionView. Exemple :

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

Masquage des itinéraires bis

Lorsque l'interface utilisateur est encombrée d'informations trop nombreuses, vous pouvez réduire l'encombrement en affichant moins d'itinéraires bis que le paramètre par défaut (deux) ou en n'affichant aucun autre itinéraire. 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érationDescription
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.

Exemple

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