नेविगेशन यूज़र इंटरफ़ेस (यूआई) में बदलाव करना

Android के लिए Navigation SDK की मदद से, मैप पर दिखने वाले यूज़र इंटरफ़ेस (यूआई) के कंट्रोल और एलिमेंट तय करके, मैप के साथ उपयोगकर्ता के अनुभव में बदलाव किया जा सकता है. नेविगेशन यूज़र इंटरफ़ेस (यूआई) के विज़ुअल लुक में भी बदलाव किया जा सकता है. नेविगेशन यूज़र इंटरफ़ेस (यूआई) में किए जा सकने वाले बदलावों के बारे में दिशा-निर्देश पाने के लिए, नीतियों वाला पेज देखें.

इस दस्तावेज़ में, मैप के यूज़र इंटरफ़ेस (यूआई) में दो तरीकों से बदलाव करने का तरीका बताया गया है:

• मैप के यूज़र इंटरफ़ेस (यूआई) के कंट्रोल
• मैप के यूज़र इंटरफ़ेस (यूआई) के ऐक्सेसरी व्यू

ध्यान दें: ज़्यादातर मामलों में, हमारा सुझाव है कि NavigationView के साथ सीधे इंटरैक्ट करने के बजाय, SupportNavigationFragment का इस्तेमाल करें. यह NavigationView के लिए रैपर है. ज़्यादा जानकारी के लिए, नेविगेशन मैप के साथ इंटरैक्ट करने के सबसे सही तरीके देखें .

मैप के यूज़र इंटरफ़ेस (यूआई) के कंट्रोल

नेविगेशन व्यू पर, यूज़र इंटरफ़ेस (यूआई) के कस्टम एलिमेंट जोड़ने के लिए, मैप के यूज़र इंटरफ़ेस (यूआई) के कंट्रोल का इस्तेमाल करें, ताकि उन्हें सही पोज़िशन पर सेट किया जा सके. बिल्ट-इन लेआउट में बदलाव होने पर, Android के लिए Navigation SDK, आपके कस्टम कंट्रोल को अपने-आप नई पोज़िशन पर सेट कर देता है. हर पोज़िशन के लिए, एक बार में यूज़र इंटरफ़ेस (यूआई) का एक कस्टम कंट्रोल सेट किया जा सकता है. अगर आपके डिज़ाइन के लिए, यूज़र इंटरफ़ेस (यूआई) के कई एलिमेंट की ज़रूरत है, तो उन्हें ViewGroup में जोड़ा जा सकता है. इसके बाद, उन्हें setCustomControl तरीके से पास किया जा सकता है.

The setCustomControl तरीका , CustomControlPosition enum में तय की गई पोज़िशन दिखाता है:

• SECONDARY_HEADER (यह सिर्फ़ पोर्ट्रेट मोड में दिखता है)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW
• FOOTER

पोर्ट्रेट ओरिएंटेशन के लिए, कस्टम कंट्रोल की पोज़िशन

लैंडस्केप ओरिएंटेशन के लिए, कस्टम कंट्रोल की पोज़िशन

कस्टम कंट्रोल जोड़ना

1. यूज़र इंटरफ़ेस (यूआई) के कस्टम एलिमेंट या ViewGroup की मदद से, Android व्यू बनाएं.
2. व्यू का इंस्टेंस पाने के लिए, एक्सएमएल को इन्फ़्लेट करें या कस्टम व्यू को इंस्टैंशिएट करें.

3. NavigationView.setCustomControl या SupportNavigationFragment.setCustomControl का इस्तेमाल करें, चुने गए कस्टम कंट्रोल की पोज़िशन के साथ, CustomControlPosition enum से.

   **ध्यान दें:** आपका ऐप्लिकेशन, यूज़र इंटरफ़ेस (यूआई) थ्रेड पर इस तरीके को कॉल करे.

   यहां दिए गए उदाहरण में, एक फ़्रैगमेंट बनाया गया है और सेकंडरी हेडर की पोज़िशन में एक कस्टम कंट्रोल जोड़ा गया है.

   ध्यान दें: उदाहरण में दिए गए कोड में, दस्तावेज़ में दिखने के लिए लाइन ब्रेक जोड़े गए हैं. ज़रूरत के हिसाब से, इन्हें हटाना न भूलें.

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

कस्टम कंट्रोल हटाना

कस्टम कंट्रोल हटाने के लिए, setCustomControl तरीके को कॉल करें. इसके लिए, व्यू पैरामीटर के तौर पर null और चुनी गई कस्टम कंट्रोल की पोज़िशन का इस्तेमाल करें.

उदाहरण के लिए, यहां दिए गए स्निपेट से, सेकंडरी हेडर का कोई भी कस्टम कंट्रोल हट जाता है और डिफ़ॉल्ट कॉन्टेंट दिखने लगता है:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

कस्टम कंट्रोल की पोज़िशन

सेकंडरी हेडर

पोर्ट्रेट ओरिएंटेशन के लिए, सेकंडरी हेडर की कस्टम कंट्रोल पोज़िशन

कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, setCustomControl को पोज़िशन CustomControlPosition.SECONDARY_HEADER पास करें.

नेविगेशन मोड में, स्क्रीन लेआउट डिफ़ॉल्ट रूप से सेकंडरी हेडर के लिए एक पोज़िशन उपलब्ध कराते हैं. यह पोज़िशन, प्राइमरी हेडर के नीचे होती है. सेकंडरी हेडर तब दिखता है, जब इसकी ज़रूरत होती है. जैसे, लेन गाइड के साथ. आपका ऐप्लिकेशन, कस्टम कॉन्टेंट के लिए लेआउट की सेकंडरी हेडर पोज़िशन का इस्तेमाल कर सकता है. इस सुविधा का इस्तेमाल करने पर, आपका कंट्रोल, सेकंडरी हेडर के डिफ़ॉल्ट कॉन्टेंट को कवर कर लेता है. अगर आपके नेविगेशन व्यू का कोई बैकग्राउंड है, तो वह बैकग्राउंड अपनी जगह पर बना रहता है. हालांकि, वह सेकंडरी हेडर से कवर हो जाता है. जब आपका ऐप्लिकेशन, कस्टम कंट्रोल हटाता है, तो उसकी जगह सेकंडरी हेडर का कोई डिफ़ॉल्ट कॉन्टेंट दिख सकता है.

सेकंडरी हेडर की कस्टम पोज़िशन, अपने सबसे ऊपर वाले किनारे को प्राइमरी हेडर के सबसे नीचे वाले किनारे के साथ अलाइन करती है. यह पोज़िशन, सिर्फ़ portrait mode में काम करती है. In landscape mode, सेकंडरी हेडर उपलब्ध नहीं होता. साथ ही, लेआउट में कोई बदलाव नहीं होता .

सबसे नीचे बाईं ओर

पोर्ट्रेट ओरिएंटेशन के लिए, सबसे नीचे बाईं ओर की कस्टम कंट्रोल पोज़िशन

लैंडस्केप ओरिएंटेशन के लिए, सबसे नीचे बाईं ओर की कस्टम कंट्रोल पोज़िशन

कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, setCustomControl को पोज़िशन CustomControlPosition.BOTTOM_START_BELOW पास करें.

कस्टम कंट्रोल की यह पोज़िशन, मैप के सबसे नीचे बाईं ओर वाले कोने में होती है. portrait mode और landscape mode दोनों में, यह ईटीए कार्ड और/या कस्टम फ़ुटर के ऊपर होती है. अगर ये दोनों मौजूद नहीं हैं, तो यह मैप के सबसे नीचे होती है. साथ ही, Nav SDK के एलिमेंट, जैसे कि बीच में लाने वाला बटन और Google का लोगो, कस्टम कंट्रोल व्यू की ऊंचाई के हिसाब से ऊपर की ओर चले जाते हैं. यह कंट्रोल, मैप की दिखने वाली सीमाओं के अंदर सेट होता है. इसलिए, मैप के सबसे नीचे या बाईं ओर के किनारों में जोड़ा गया कोई भी पैडिंग, इस कंट्रोल की पोज़िशन में भी बदलाव करेगा.

सबसे नीचे दाईं ओर

पोर्ट्रेट ओरिएंटेशन के लिए, सबसे नीचे दाईं ओर की कस्टम कंट्रोल पोज़िशन

लैंडस्केप ओरिएंटेशन के लिए, सबसे नीचे दाईं ओर की कस्टम कंट्रोल पोज़िशन

कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, setCustomControl को पोज़िशन CustomControlPosition.BOTTOM_END_BELOW पास करें.

कस्टम कंट्रोल की यह पोज़िशन, मैप के सबसे नीचे दाईं ओर वाले कोने में होती है. portrait mode में, यह ईटीए कार्ड और/या कस्टम फ़ुटर के ऊपर होती है. अगर ये दोनों मौजूद नहीं हैं, तो यह मैप के सबसे नीचे होती है. वहीं, landscape mode में, यह मैप के सबसे नीचे अलाइन होती है. दाईं ओर (एलटीआर में) दिखने वाले Nav SDK के एलिमेंट, कस्टम कंट्रोल व्यू की ऊंचाई के हिसाब से ऊपर की ओर चले जाते हैं. यह कंट्रोल, मैप की दिखने वाली सीमाओं के अंदर सेट होता है. इसलिए, मैप के सबसे नीचे या दाईं ओर के किनारों में जोड़ा गया कोई भी पैडिंग, इस कंट्रोल की पोज़िशन में भी बदलाव करेगा.

फ़ुटर

झलक दिखाने वाली सुविधा

पोर्ट्रेट ओरिएंटेशन के लिए, फ़ुटर की कस्टम कंट्रोल पोज़िशन

लैंडस्केप ओरिएंटेशन के लिए, फ़ुटर की कस्टम कंट्रोल पोज़िशन

कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, setCustomControl को पोज़िशन CustomControlPosition.FOOTER पास करें.

कस्टम कंट्रोल की यह पोज़िशन, फ़ुटर के कस्टम व्यू के लिए डिज़ाइन की गई है. अगर Nav SDK का ईटीए कार्ड दिखता है, तो यह कंट्रोल उसके ऊपर होता है. अगर ऐसा नहीं है, तो कंट्रोल, मैप के सबसे नीचे अलाइन होता है. BOTTOM_START_BELOW और BOTTOM_END_BELOW के कस्टम कंट्रोल के उलट, यह कंट्रोल, मैप की दिखने वाली सीमाओं के बाहर सेट होता है. इसका मतलब है कि मैप में जोड़ा गया कोई भी पैडिंग, इस कंट्रोल की पोज़िशन में बदलाव नहीं करेगा.

portrait mode में, कस्टम फ़ुटर पूरी चौड़ाई में दिखता है. CustomControlPosition.BOTTOM_START_BELOW और CustomControlPosition.BOTTOM_END_BELOW पोज़िशन में मौजूद कस्टम कंट्रोल के साथ-साथ, Nav SDK के यूज़र इंटरफ़ेस (यूआई) के एलिमेंट, जैसे कि बीच में लाने वाला बटन और Google का लोगो, कस्टम कंट्रोल फ़ुटर के ऊपर सेट होते हैं. शेवरॉन की डिफ़ॉल्ट पोज़िशन, कस्टम फ़ुटर की ऊंचाई को ध्यान में रखती है.

landscape mode में, कस्टम फ़ुटर आधी चौड़ाई में दिखता है और यह बाईं ओर (एलटीआर में) अलाइन होता है. यह Nav SDK के ईटीए कार्ड की तरह ही होता है. CustomControlPosition.BOTTOM_START_BELOW पोज़िशन में मौजूद कस्टम कंट्रोल और Nav SDK के यूज़र इंटरफ़ेस (यूआई) के एलिमेंट, जैसे कि बीच में लाने वाला बटन और Google का लोगो, कस्टम कंट्रोल फ़ुटर के ऊपर सेट होते हैं. CustomControlPosition.BOTTOM_END_BELOW पोज़िशन में मौजूद कस्टम कंट्रोल और दाईं ओर (एलटीआर में) दिखने वाले Nav SDK के यूज़र इंटरफ़ेस (यूआई) के एलिमेंट, मैप के सबसे नीचे अलाइन रहते हैं. कस्टम फ़ुटर मौजूद होने पर, शेवरॉन की डिफ़ॉल्ट पोज़िशन में कोई बदलाव नहीं होता. ऐसा इसलिए, क्योंकि फ़ुटर, मैप के दाईं ओर तक नहीं फैला होता.

CustomControlPosition.BOTTOM_START_BELOW और CustomControlPosition.BOTTOM_END_BELOW पोज़िशन में मौजूद कस्टम कंट्रोल के साथ-साथ, Nav SDK के यूज़र इंटरफ़ेस (यूआई) के एलिमेंट, जैसे कि बीच में लाने वाला बटन और Google का लोगो, कस्टम कंट्रोल फ़ुटर के ऊपर सेट होते हैं.

मैप के यूज़र इंटरफ़ेस (यूआई) के ऐक्सेसरी व्यू

Android के लिए Navigation SDK, यूज़र इंटरफ़ेस (यूआई) के ऐक्सेसरी व्यू उपलब्ध कराता है. ये ऐक्सेसरी व्यू, नेविगेशन के दौरान दिखते हैं. ये Google Maps के Android ऐप्लिकेशन में दिखने वाले ऐक्सेसरी व्यू की तरह ही होते हैं. इस सेक्शन में बताए गए तरीके से, इन कंट्रोल की विज़िबिलिटी या विज़ुअल लुक में बदलाव किया जा सकता है. यहां किए गए बदलाव, नेविगेशन के अगले सेशन के दौरान दिखते हैं.

नेविगेशन यूज़र इंटरफ़ेस (यूआई) में किए जा सकने वाले बदलावों के बारे में दिशा-निर्देश पाने के लिए, नीतियों वाला पेज देखें.

कोड देखना

नेविगेशन गतिविधि के लिए, Java कोड दिखाएं/छिपाएं.

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

मंज़िल को हाइलाइट करना और एंट्री पॉइंट दिखाना

जब placeID की मदद से कोई मंज़िल बनाई जाती है, तो मंज़िल वाली बिल्डिंग को हाइलाइट किया जाता है. साथ ही, एंट्री पॉइंट का आइकॉन दिखाया जाता है. हालांकि, ऐसा तब किया जाता है, जब यह मुमकिन हो. इन विज़ुअल क्लू की मदद से, उपयोगकर्ता अपनी मंज़िल की पहचान कर पाते हैं और वहां तक नेविगेट कर पाते हैं.

placeID की मदद से कोई मंज़िल बनाने के लिए, Waypoint.Builder.setPlaceIdString() तरीके का इस्तेमाल करें.

ध्यान दें: Navigation SDK, इनडोर नेविगेशन की सुविधा नहीं देता. नेविगेशन के बिना इनडोर मैप के लिए, Android के लिए Maps SDK की indoorBuilding और indoorLevel क्लास का इस्तेमाल करें.

नेविगेशन हेडर में बदलाव करना

नेविगेशन हेडर की थीम और अगले मोड़ का इंडिकेटर बदलने के लिए, SupportNavigationFragment.setStylingOptions() या NavigationView.setStylingOptions() का इस्तेमाल करें. यह इंडिकेटर, उपलब्ध होने पर हेडर के नीचे दिखता है.

ध्यान दें: हेडर की डिफ़ॉल्ट ऊंचाई डाइनैमिक होती है. यह ऊंचाई, दिखाए जा रहे मैन्युवर गाइडेंस के हिसाब से तय होती है.

इन एट्रिब्यूट को सेट किया जा सकता है:

एट्रिब्यूट का टाइप	एट्रिब्यूट
बैकग्राउंड का रंग	दिन के मोड का प्राइमरी कलर - नेविगेशन हेडर का दिन के समय दिखने वाला रंग दिन के मोड का सेकंडरी कलर - अगले मोड़ के इंडिकेटर का दिन के समय दिखने वाला रंग रात के मोड का प्राइमरी कलर - नेविगेशन हेडर का रात के समय दिखने वाला रंग रात के मोड का सेकंडरी कलर - अगले मोड़ के इंडिकेटर का रात के समय दिखने वाला रंग
निर्देशों के लिए टेक्स्ट एलिमेंट	टेक्स्ट का रंग फ़ॉन्ट पहली लाइन के टेक्स्ट का साइज़ दूसरी लाइन के टेक्स्ट का साइज़
अगले चरणों के लिए टेक्स्ट एलिमेंट	फ़ॉन्ट दूरी की वैल्यू के टेक्स्ट का रंग दूरी की वैल्यू के टेक्स्ट का साइज़ दूरी की इकाइयों के टेक्स्ट का रंग दूरी की इकाइयों के टेक्स्ट का साइज़
मैन्युवर के आइकॉन	मैन्युवर के बड़े आइकॉन का रंग मैन्युवर के छोटे आइकॉन का रंग
लेन गाइड	सुझाई गई लेन या लेन का रंग

यहां दिए गए उदाहरण में, स्टाइलिंग के विकल्प सेट करने का तरीका बताया गया है:

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

ट्रैफ़िक की लेयर बंद करना

मैप पर ट्रैफ़िक की लेयर को चालू या बंद करने के लिए, GoogleMap.setTrafficEnabled() का इस्तेमाल करें. इस सेटिंग का असर, मैप पर दिखने वाले ट्रैफ़िक की डेंसिटी के इंडिकेटर पर पड़ता है. हालांकि, इसका असर, नेविगेटर की ओर से प्लॉट किए गए रास्ते पर दिखने वाले ट्रैफ़िक के इंडिकेटर पर नहीं पड़ता.

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

ट्रैफ़िक लाइट और स्टॉप साइन की सुविधा चालू करना

ऐक्टिव नेविगेशन के दौरान, मैप पर ट्रैफ़िक लाइट और स्टॉप साइन दिखाने की सुविधा चालू की जा सकती है. इससे, रास्तों और यात्रा के मैन्युवर के बारे में ज़्यादा जानकारी मिलती है.

Navigation SDK में, ट्रैफ़िक लाइट और स्टॉप साइन की सुविधा डिफ़ॉल्ट रूप से बंद होती है. इस सुविधा को चालू करने के लिए, DisplayOptions हर सुविधा के लिए अलग-अलग कॉल करें.

ध्यान दें: नेविगेशन के अलावा दूसरे मोड में भी, मैप पर ट्रैफ़िक लाइट दिख सकती हैं. DisplayOptions का इस्तेमाल करके, ट्रैफ़िक लाइट दिखाने की सुविधा को कॉन्फ़िगर करने का विकल्प, सिर्फ़ ऐक्टिव नेविगेशन मोड में दिखने वाली ट्रैफ़िक लाइट पर असर डालता है.

यहां दिए गए उदाहरण में, ट्रैफ़िक लाइट और स्टॉप साइन को छिपाने का तरीका बताया गया है:

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

showTrafficLights(boolean) और showStopSigns(boolean) के तरीके अब काम नहीं करते. इन्हें अगले बड़े रिलीज़ में हटा दिया जाएगा. इसके बाद, ट्रैफ़िक लाइट और स्टॉप साइन डिफ़ॉल्ट रूप से दिखेंगे.

कस्टम मार्कर जोड़ना

Android के लिए Navigation SDK अब मार्कर के लिए, Google Maps API का इस्तेमाल करता है. ज़्यादा जानकारी के लिए, Maps API का दस्तावेज़ देखें.

फ़्लोटिंग टेक्स्ट

आपके पास अपने ऐप्लिकेशन में, कहीं भी फ़्लोटिंग टेक्स्ट जोड़ने का विकल्प है. हालांकि, यह Google के एट्रिब्यूशन को कवर न करे. Navigation SDK, मैप पर अक्षांश/देशांतर या लेबल के साथ टेक्स्ट को ऐंकर करने की सुविधा नहीं देता. ज़्यादा जानकारी के लिए, जानकारी देने वाली विंडो देखें.

रफ़्तार की सीमा दिखाना

आपके पास, प्रोग्राम के ज़रिए रफ़्तार की सीमा का आइकॉन दिखाने या छिपाने का विकल्प है. रफ़्तार की सीमा का आइकॉन दिखाने या छिपाने के लिए, NavigationView.setSpeedLimitIconEnabled() या SupportNavigationFragment.setSpeedLimitIconEnabled() का इस्तेमाल करें. चालू होने पर, रफ़्तार की सीमा का आइकॉन, गाइडेंस के दौरान सबसे नीचे वाले कोने में दिखता है. यह आइकॉन, उस सड़क की रफ़्तार की सीमा दिखाता है जिस पर वाहन चल रहा है. यह आइकॉन, सिर्फ़ उन जगहों पर दिखता है जहां रफ़्तार की सीमा का सटीक डेटा उपलब्ध होता है.

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

बीच में लाने वाला बटन दिखने पर, रफ़्तार की सीमा का आइकॉन कुछ समय के लिए छिप जाता है.

ध्यान दें: उपयोगकर्ताओं को सड़क पर लगे सभी साइन का पालन करना होगा. रफ़्तार की सीमा के आइकॉन में दिखने वाला डेटा, सिर्फ़ रेफ़रंस के तौर पर होता है. रफ़्तार की सीमा के डेटा के सटीक होने की गारंटी नहीं दी जा सकती. रफ़्तार की सीमा के डेटा में गड़बड़ियां होने पर, Google Cloud के सहायता पेज पर जाकर शिकायत दर्ज की जा सकती है.

नाइट मोड सेट करना

आपके पास, प्रोग्राम के ज़रिए नाइट मोड के काम करने के तरीके को कंट्रोल करने का विकल्प है. नाइट मोड को चालू या बंद करने या Android के लिए Navigation SDK को इसे कंट्रोल करने की अनुमति देने के लिए, NavigationView.setForceNightMode() या SupportNavigationFragment.setForceNightMode() का इस्तेमाल करें.

• AUTO से, Navigation SDK को डिवाइस की जगह और स्थानीय समय के हिसाब से सही मोड तय करने की अनुमति मिलती है.
• FORCE_NIGHT से, नाइट मोड को चालू किया जाता है.
• FORCE_DAY से, डे मोड को चालू किया जाता है.

यहां दिए गए उदाहरण में, नेविगेशन फ़्रैगमेंट में नाइट मोड को चालू करने का तरीका बताया गया है:

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

दिशा-निर्देशों की सूची दिखाना

सबसे पहले, व्यू बनाएं और उसे अपने क्रम में जोड़ें.

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

DirectionsListView को लाइफ़साइकल इवेंट फ़ॉरवर्ड करना न भूलें. ठीक उसी तरह जैसे NavigationView के साथ किए जाते हैं. उदाहरण के लिए:

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

वैकल्पिक रास्ते छिपाना

चेतावनी: यह सुविधा, सबसे छोटे/तेज़ रास्ते की सुविधा के साथ काम नहीं करती. एक ही समय पर दोनों सुविधाओं का इस्तेमाल करने से, डिवाइस के काम करने के तरीके में गड़बड़ी हो सकती है.

जब यूज़र इंटरफ़ेस (यूआई) में बहुत ज़्यादा जानकारी दिखने लगती है, तो डिफ़ॉल्ट रूप से दिखने वाले दो वैकल्पिक रास्तों के मुकाबले कम वैकल्पिक रास्ते दिखाकर या कोई भी वैकल्पिक रास्ता न दिखाकर, यूज़र इंटरफ़ेस (यूआई) में दिखने वाली जानकारी को कम किया जा सकता है. रास्ते फ़ेच करने से पहले, इस विकल्प को कॉन्फ़िगर किया जा सकता है. इसके लिए, RoutingOptions.alternateRoutesStrategy() तरीके को कॉल करें. साथ ही, इन्यूमरेशन की इनमें से कोई वैल्यू इस्तेमाल करें:

इन्यूमरेशन वैल्यू	ब्यौरा
AlternateRoutesStrategy.SHOW_ALL	डिफ़ॉल्ट. इसमें ज़्यादा से ज़्यादा दो वैकल्पिक रास्ते दिखते हैं.
AlternateRoutesStrategy.SHOW_ONE	इसमें एक वैकल्पिक रास्ता दिखता है. हालांकि, यह तब दिखता है, जब कोई वैकल्पिक रास्ता उपलब्ध हो.
AlternateRoutesStrategy.SHOW_NONE	इसमें वैकल्पिक रास्ते नहीं दिखते.

यहां दिए गए कोड के उदाहरण में, वैकल्पिक रास्तों को पूरी तरह से छिपाने का तरीका बताया गया है.

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

यात्रा का प्रोग्रेस बार

एक्सपेरिमेंटल सुविधा

यात्रा का प्रोग्रेस बार, एक वर्टिकल बार होता है. यह नेविगेशन शुरू होने पर, मैप के बाईं ओर/सबसे ऊपर दिखता है. चालू होने पर, यह पूरी यात्रा की खास जानकारी दिखाता है. साथ ही, इसमें उपयोगकर्ता की मंज़िल और मौजूदा पोज़िशन भी दिखती है.

इसकी मदद से, उपयोगकर्ता ज़ूम इन किए बिना, ट्रैफ़िक जैसी आने वाली समस्याओं का अनुमान लगा पाते हैं. इसके बाद, ज़रूरत पड़ने पर वे यात्रा का रास्ता बदल सकते हैं. अगर उपयोगकर्ता यात्रा का रास्ता बदलता है, तो प्रोग्रेस बार रीसेट हो जाता है. ऐसा लगता है कि उस पॉइंट से कोई नई यात्रा शुरू हुई है.

यात्रा का प्रोग्रेस बार, ये स्टेटस इंडिकेटर दिखाता है:

• तय किया गया रास्ता— यात्रा का तय किया गया हिस्सा.

• मौजूदा पोज़िशन— यात्रा में उपयोगकर्ता की मौजूदा जगह.

• ट्रैफ़िक का स्टेटस— आने वाले ट्रैफ़िक का स्टेटस.

• आखिरी मंज़िल— यात्रा की आखिरी मंज़िल.

यात्रा का प्रोग्रेस बार चालू करने के लिए, setTripProgressBarEnabled() तरीके को NavigationView या SupportNavigationFragment पर कॉल करें. उदाहरण के लिए:

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

यात्रा के प्रोग्रेस बार की पोज़िशन

• बार की बाईं ओर, स्पीडोमीटर, Google के लोगो, और बीच में लाने वाले बटन (दिखने पर) की बाईं ओर के साथ अलाइन होती है. इसकी चौड़ाई 12 dp होती है.
• यात्रा के प्रोग्रेस बार की ऊंचाई स्थिर रहती है. छोटे डिवाइसों में वर्टिकल स्पेस की सीमाओं के हिसाब से, यात्रा के प्रोग्रेस बार की विज़िबिलिटी और ऊंचाई, स्क्रीन की ऊंचाई में तय किए गए ब्रेकपॉइंट के हिसाब से बदलती है. ये ब्रेकपॉइंट, डिवाइस के ओरिएंटेशन और स्क्रीन पर मैप के लिए इस्तेमाल की गई जगह से अलग होते हैं:

स्क्रीन की ऊंचाई	यात्रा के प्रोग्रेस बार की विज़िबिलिटी	यात्रा के प्रोग्रेस बार की ऊंचाई	यात्रा के प्रोग्रेस बार की y-ऐक्सिस पोज़िशन
छोटा: 0 dp - 551 dp	नहीं दिख रहा है	लागू नहीं	लागू नहीं
मीडियम: 552 dp - 739 dp	दिख रहा है	130 dp	बाईं ओर के कंट्रोल (स्पीडोमीटर / Google का लोगो / बीच में लाने वाला बटन) के ऊपर
बड़ा: 740 dp और उससे ज़्यादा	दिख रहा है	290 dp	बाईं ओर के कंट्रोल (स्पीडोमीटर / Google का लोगो / बीच में लाने वाला बटन) के ऊपर

ध्यान दें: ऊपर दी गई टेबल में, स्क्रीन की ऊंचाई की जो वैल्यू दिखाई गई हैं वे Navigation SDK के 6.2.1 और उसके बाद के वर्शन पर लागू होती हैं. वर्शन 6.2.0 के लिए, छोटी स्क्रीन 0 dp - 519 dp, मीडियम स्क्रीन 520 dp - 599 dp, और बड़ी स्क्रीन 600 dp और उससे ज़्यादा की होती हैं. यात्रा के प्रोग्रेस बार की विज़िबिलिटी, ऊंचाई, और y-ऐक्सिस पोज़िशन एक जैसी होती हैं.
• अगर यात्रा का प्रोग्रेस बार, मोड़ की जानकारी देने वाले कार्ड या नेविगेशन यूज़र इंटरफ़ेस (यूआई) के अन्य एलिमेंट के साथ ओवरलैप होता है, तो यह उन अन्य एलिमेंट के नीचे दिखता है.

कंपास

Navigation SDK, कंपास का ग्राफ़िक उपलब्ध कराता है. यह ग्राफ़िक, कुछ खास स्थितियों में और सिर्फ़ चालू होने पर, मैप के ऊपरी दाएं कोने में दिखता है. जब उपयोगकर्ता कंपास पर क्लिक करता है, तो कैमरा, ज़ीरो बेयरिंग (डिफ़ॉल्ट ओरिएंटेशन) वाली पोज़िशन पर वापस आ जाता है. इसके कुछ समय बाद, कंपास दिखने बंद हो जाता है.

अगर नेविगेशन चालू है और कैमरे का मोड "फ़ॉलोइंग" पर सेट है, तो कंपास दिखता रहता है. साथ ही, कंपास पर टैप करने से, झुके हुए और खास जानकारी वाले कैमरे के पर्सपेक्टिव के बीच टॉगल होता है.

ड्राइवर का ध्यान भटकने से बचाने के लिए, कंपास उसी पोज़िशन में बना रहता है. ऐसा तब होता है, जब हेडर (पोर्ट्रेट मोड में) बड़ा होता है और कंपास की डिफ़ॉल्ट पोज़िशन के साथ टकराव होता है. अगर सेकंडरी हेडर का कस्टम कंट्रोल या हेडर ऐक्सेसरी व्यू जोड़ा जाता है, तो यूज़र इंटरफ़ेस (यूआई) में टकराव से बचने के लिए, कंपास छिप जाता है.

कंपास, डे और नाइट मोड के साथ-साथ, डार्क मोड में भी काम करता है.

कंपास, डिफ़ॉल्ट रूप से चालू होता है. कंपास चालू हो या नहीं, यह सेट करने के लिए GoogleMapOptions क्लास पर compassEnabled तरीके का इस्तेमाल किया जा सकता है.

3D बिल्डिंग की सुविधा बंद करना

परफ़ॉर्मेंस से जुड़ी सीमाओं वाले डिवाइसों के लिए, 3D बिल्डिंग दिखाने की सुविधा बंद की जा सकती है. इसके लिए, GoogleMap.setBuildingsEnabled(false) को कॉल करें.

प्रॉम्प्ट विज़िबिलिटी एपीआई (एक्सपेरिमेंटल)

एक्सपेरिमेंटल सुविधा

प्रॉम्प्ट विज़िबिलिटी एपीआई की मदद से, Navigation SDK से जनरेट किए गए यूज़र इंटरफ़ेस (यूआई) के एलिमेंट और यूज़र इंटरफ़ेस (यूआई) के आपके कस्टम एलिमेंट के बीच टकराव से बचा जा सकता है. इसके लिए, एक लिसनर जोड़ा जाता है. यह लिसनर, Navigation SDK के यूज़र इंटरफ़ेस (यूआई) का कोई एलिमेंट दिखने से पहले और एलिमेंट के हटते ही, कॉलबैक पाने के लिए जोड़ा जाता है. ज़्यादा जानकारी के लिए, जिसमें कोड के उदाहरण भी शामिल हैं, देखें प्रॉम्प्ट विज़िबिलिटी एपीआई सेक्शन, जो रीयल-टाइम में होने वाली रुकावटों को कॉन्फ़िगर करना पेज पर है.