Mengubah UI navigasi

Dengan Navigation SDK for Android, Anda dapat mengubah pengalaman pengguna dengan peta Anda dengan menentukan kontrol dan elemen UI bawaan yang muncul di peta. Anda juga dapat menyesuaikan tampilan visual UI navigasi. Lihat halaman Kebijakan untuk mengetahui panduan tentang modifikasi yang dapat diterima pada UI navigasi.

Dokumen ini menjelaskan cara mengubah antarmuka pengguna peta Anda dengan dua cara:

• Kontrol UI peta
• Aksesori UI peta

Kontrol UI peta

Untuk menempatkan elemen UI kustom pada tampilan navigasi, gunakan Kontrol UI peta untuk penempatan yang tepat. Saat tata letak bawaan berubah, Navigation SDK for Android akan otomatis memosisikan ulang kontrol kustom Anda. Anda dapat menetapkan satu tampilan kontrol kustom dalam satu waktu untuk setiap posisi. Jika desain Anda memerlukan beberapa elemen UI, Anda dapat menempatkannya di ViewGroup dan meneruskannya ke metode setCustomControl.

Metode setCustomControl menyediakan posisi seperti yang ditentukan dalam CustomControlPosition enum:

• SECONDARY_HEADER (hanya muncul dalam mode potret)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW
• FOOTER

Menambahkan kontrol kustom

1. Buat Tampilan Android dengan elemen UI kustom atau ViewGroup.
2. Perluas XML atau buat instance tampilan kustom untuk mendapatkan instance tampilan.

3. Gunakan NavigationView.setCustomControl atau SupportNavigationFragment.setCustomControl dengan posisi kontrol kustom yang dipilih dari CustomControlPosition enum.

   Contoh di bawah membuat fragmen dan menambahkan kontrol kustom di posisi header sekunder.

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

Menghapus kontrol kustom

Untuk menghapus kontrol kustom, panggil metode setCustomControl dengan parameter tampilan null dan posisi kontrol kustom yang dipilih.

Misalnya, cuplikan berikut menghapus header sekunder kustom dan kembali ke konten default:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Posisi kontrol kustom

Header sekunder

Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.SECONDARY_HEADER ke setCustomControl.

Secara default, tata letak layar dalam mode navigasi menyediakan posisi untuk header sekunder yang terletak di bawah header utama. Header sekunder ini muncul jika diperlukan, seperti dengan panduan jalur. Aplikasi Anda dapat menggunakan posisi header sekunder tata letak ini untuk konten kustom. Saat Anda menggunakan fitur ini, kontrol Anda akan mencakup konten header sekunder default. Jika tampilan navigasi Anda memiliki latar belakang, latar belakang tersebut akan tetap ada, yang ditutupi oleh header sekunder. Saat aplikasi Anda menghapus kontrol kustom, header sekunder default dapat muncul di tempatnya.

Posisi header sekunder kustom menyelaraskan tepi atasnya dengan tepi bawah header utama. Posisi ini hanya didukung dalam portrait mode. Dalam landscape mode, header sekunder tidak tersedia, dan tata letak tidak berubah.

Awal bawah

Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.BOTTOM_START_BELOW ke setCustomControl.

Posisi kontrol kustom ini berada di sudut awal bawah peta. Dalam portrait mode dan landscape mode, posisi ini berada di atas kartu PWT dan/atau footer kustom (atau di sepanjang bagian bawah peta jika tidak ada), dan elemen Nav SDK termasuk tombol pusat ulang dan logo Google akan bergerak ke atas untuk memperhitungkan tinggi tampilan kontrol kustom. Kontrol ini diposisikan di dalam batas peta yang terlihat, sehingga padding yang ditambahkan ke tepi bawah atau awal peta juga akan mengubah posisi kontrol ini.

Akhir bawah

Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.BOTTOM_END_BELOW ke setCustomControl.

Posisi kontrol kustom ini berada di sudut akhir bawah peta. Dalam portrait mode, posisi ini berada di atas kartu PWT dan/atau footer kustom (atau di sepanjang bagian bawah peta jika tidak ada), tetapi dalam landscape mode posisi ini sejajar dengan bagian bawah peta. Elemen Nav SDK yang terlihat di sepanjang sisi akhir (sisi kanan dalam LTR) akan bergerak ke atas untuk memperhitungkan tinggi tampilan kontrol kustom. Kontrol ini diposisikan di dalam batas peta yang terlihat, sehingga padding yang ditambahkan ke tepi bawah atau akhir peta juga akan mengubah posisi kontrol ini.

Footer

Untuk menggunakan posisi kontrol kustom ini, teruskan posisi CustomControlPosition.FOOTER ke setCustomControl.

Posisi kontrol kustom ini dirancang untuk tampilan footer kustom. Jika kartu PWT Nav SDK terlihat, kontrol ini akan berada di atasnya. Jika tidak, kontrol akan sejajar dengan bagian bawah peta. Tidak seperti kontrol kustom BOTTOM_START_BELOW dan BOTTOM_END_BELOW, kontrol ini diposisikan di luar batas peta yang terlihat, yang berarti bahwa padding yang ditambahkan ke peta tidak akan mengubah posisi kontrol ini.

Dalam portrait mode, footer kustom memiliki lebar penuh. Kontrol kustom di posisi CustomControlPosition.BOTTOM_START_BELOW dan CustomControlPosition.BOTTOM_END_BELOW, serta elemen UI Nav SDK seperti tombol pusat ulang dan logo Google, diposisikan di atas footer kontrol kustom. Posisi default chevron memperhitungkan tinggi footer kustom.

Dalam landscape mode, footer kustom memiliki lebar setengah dan sejajar dengan sisi awal (sisi kiri dalam LTR), seperti kartu PWT Nav SDK. Kontrol kustom di posisi CustomControlPosition.BOTTOM_START_BELOW dan elemen UI Nav SDK seperti tombol pusat ulang dan logo Google diposisikan di atas footer kontrol kustom. Kontrol kustom di posisi CustomControlPosition.BOTTOM_END_BELOW dan elemen UI Nav SDK di sepanjang sisi akhir (sisi kanan dalam LTR) tetap sejajar dengan bagian bawah peta. Posisi default chevron tidak berubah saat footer kustom ada karena footer tidak diperluas ke sisi akhir peta.

Kontrol kustom di posisi CustomControlPosition.BOTTOM_START_BELOW dan CustomControlPosition.BOTTOM_END_BELOW, serta elemen UI Nav SDK seperti tombol pusat ulang dan logo Google diposisikan di atas footer kontrol kustom.

Aksesori UI peta

Navigation SDK for Android menyediakan aksesori UI yang muncul selama navigasi, mirip dengan yang ada di aplikasi Google Maps untuk Android. Anda dapat menyesuaikan visibilitas atau tampilan visual kontrol ini seperti yang dijelaskan di bagian ini. Perubahan yang Anda lakukan di sini akan diterapkan selama sesi navigasi berikutnya.

Lihat halaman Kebijakan untuk mengetahui panduan tentang modifikasi yang dapat diterima pada UI navigasi.

Melihat kode

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

Penyorotan dan pintu masuk tujuan

Saat tujuan dibuat dengan a placeID, bangunan tujuan akan disorot dan ikon pintu masuk akan ditampilkan, jika memungkinkan. Petunjuk visual ini membantu pengguna membedakan dan menavigasi ke tujuan mereka.

Untuk membuat tujuan dengan placeID, gunakan Waypoint.Builder.setPlaceIdString() metode.

Mengubah header navigasi

Gunakan SupportNavigationFragment.setStylingOptions() atau NavigationView.setStylingOptions() untuk mengubah tema header navigasi dan indikator belokan berikutnya yang muncul di bawah header jika tersedia.

Anda dapat menetapkan atribut berikut:

Contoh berikut menunjukkan cara menetapkan opsi gaya:

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

Menonaktifkan lapisan lalu lintas

Use GoogleMap.setTrafficEnabled() untuk mengaktifkan atau menonaktifkan lapisan lalu lintas di peta. Setelan ini memengaruhi indikasi kepadatan lalu lintas yang ditampilkan di peta secara keseluruhan. Namun, setelan ini tidak memengaruhi indikasi lalu lintas pada rute yang diplot oleh navigator.

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

Mengaktifkan lampu lalu lintas dan rambu berhenti

Anda dapat mengaktifkan tampilan lampu lalu lintas dan rambu berhenti di peta selama navigasi aktif, yang memberikan konteks tambahan untuk rute dan manuver perjalanan.

Secara default, lampu lalu lintas dan rambu berhenti dinonaktifkan di Navigation SDK. Untuk mengaktifkan fitur ini, panggil DisplayOptions untuk setiap fitur secara terpisah.

Contoh berikut menunjukkan cara menyembunyikan lampu lalu lintas dan rambu berhenti:

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

Menambahkan penanda kustom

Navigation SDK for Android kini menggunakan Google Maps API untuk penanda. Buka dokumentasi Maps API untuk mengetahui informasi selengkapnya.

Teks mengambang

Anda dapat menambahkan teks mengambang di mana saja dalam aplikasi Anda, asalkan tidak menutupi atribusi Google. Navigation SDK tidak mendukung penjangkaran teks ke lintang/bujur di peta, atau ke label. Buka Jendela info untuk mengetahui informasi selengkapnya.

Menampilkan batas kecepatan

Anda dapat menampilkan atau menyembunyikan ikon batas kecepatan secara terprogram. Gunakan NavigationView.setSpeedLimitIconEnabled() atau SupportNavigationFragment.setSpeedLimitIconEnabled() untuk menampilkan atau menyembunyikan ikon batas kecepatan. Jika diaktifkan, ikon batas kecepatan akan ditampilkan di sudut bawah selama panduan. Ikon ini menampilkan batas kecepatan jalan yang dilalui kendaraan. Ikon hanya muncul di lokasi yang memiliki data batas kecepatan yang andal.

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

Ikon batas kecepatan disembunyikan sementara saat tombol pusat ulang ditampilkan.

Menetapkan mode malam

Anda dapat mengontrol perilaku mode malam secara terprogram. Gunakan NavigationView.setForceNightMode() atau SupportNavigationFragment.setForceNightMode() untuk mengaktifkan atau menonaktifkan mode malam, atau biarkan Navigation SDK for Android mengontrolnya.

• AUTO memungkinkan Navigation SDK menentukan mode yang sesuai menurut lokasi perangkat dan waktu setempat.
• FORCE_NIGHT memaksa mode malam diaktifkan.
• FORCE_DAY memaksa mode siang diaktifkan.

Contoh berikut menunjukkan cara memaksa mode malam diaktifkan dalam fragmen navigasi:

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

Menampilkan daftar rute

Pertama, buat tampilan dan tambahkan ke hierarki Anda.

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

Pastikan untuk meneruskan peristiwa siklus proses ke DirectionsListView seperti halnya dengan NavigationView. Contoh:

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

Menyembunyikan rute alternatif

Jika antarmuka pengguna menjadi tidak rapi karena terlalu banyak informasi, Anda dapat mengurangi ketidakrapian dengan menampilkan lebih sedikit rute alternatif daripada default (dua), atau dengan tidak menampilkan rute alternatif sama sekali. Anda dapat mengonfigurasi opsi ini sebelum mengambil rute dengan memanggil metode RoutingOptions.alternateRoutesStrategy() dengan salah satu nilai enumerasi berikut:

Contoh kode berikut menunjukkan cara menyembunyikan rute alternatif sepenuhnya.

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

Status progres perjalanan

Status progres perjalanan adalah kolom vertikal yang muncul di sisi awal/utama peta saat navigasi dimulai. Jika diaktifkan, status ini akan menampilkan ringkasan untuk seluruh perjalanan, beserta tujuan dan posisi pengguna saat ini.

Status ini memberi pengguna kemampuan untuk mengantisipasi masalah yang akan datang dengan cepat, seperti lalu lintas, tanpa perlu memperbesar. Kemudian, mereka dapat mengubah rute perjalanan jika diperlukan. Jika pengguna mengubah rute perjalanan, status progres akan direset seolah-olah perjalanan baru telah dimulai dari titik tersebut.

Status progres perjalanan menampilkan indikator status berikut:

• Rute yang telah berlalu—bagian perjalanan yang telah berlalu.

• Posisi saat ini—lokasi pengguna saat ini dalam perjalanan.

• Status lalu lintas—status lalu lintas yang akan datang.

• Tujuan akhir—tujuan akhir perjalanan.

Aktifkan status progres perjalanan dengan memanggil metode setTripProgressBarEnabled() method on NavigationView or SupportNavigationFragment. Contoh:

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

Pemosisian status progres perjalanan

• Sisi kiri kolom sejajar dengan sisi kiri speedometer, logo Google, dan tombol Pusat Ulang (jika terlihat). Lebarnya adalah 12 dp.
• Status progres perjalanan mempertahankan tinggi statis. Untuk beradaptasi dengan batasan ruang vertikal di perangkat yang lebih kecil, visibilitas dan tinggi status progres perjalanan akan beradaptasi berdasarkan titik henti yang ditentukan dalam tinggi layar. Titik henti ini tidak bergantung pada orientasi perangkat dan seberapa banyak ruang yang sebenarnya digunakan peta di layar:

Tinggi layar	Visibilitas status progres perjalanan	Tinggi status progres perjalanan	Posisi sumbu y status progres perjalanan
Kecil: 0 dp - 551 dp	Tidak terlihat	T/A	T/A
Sedang: 552 dp - 739 dp	Terlihat	130 dp	Di atas kontrol sisi awal (speedometer / logo Google / tombol Pusat Ulang)
Besar: 740 dp dan yang lebih tinggi	Terlihat	290 dp	Di atas kontrol sisi awal (speedometer / logo Google / tombol Pusat Ulang)

• Jika status progres perjalanan tumpang tindih dengan kartu belokan atau elemen UI Navigasi lainnya, status tersebut akan muncul di bawah elemen lainnya.

Kompas

Navigation SDK menyediakan gambar kompas yang muncul di sudut kanan atas peta dalam keadaan tertentu dan hanya jika diaktifkan. Jika pengguna mengklik kompas, kamera akan beranimasi kembali ke posisi dengan arah nol (orientasi default) dan kompas menghilang tidak lama kemudian.

Jika navigasi diaktifkan dan mode kamera ditetapkan ke "mengikuti", kompas akan tetap terlihat dan mengetuk kompas akan beralih antara perspektif kamera miring dan ringkasan.

Untuk menghindari gangguan pengemudi, kompas tetap berada di posisi yang sama jika header (dalam mode potret) diperluas dan bertentangan dengan posisi default kompas. Jika Anda menambahkan kontrol kustom header sekunder atau tampilan aksesori header, kompas akan disembunyikan untuk menghindari konflik UI.

Kompas mendukung mode siang dan malam, serta mode gelap.

Kompas diaktifkan secara default. Anda dapat menetapkan apakah kompas diaktifkan menggunakan compassEnabled metode di class GoogleMapOptions.

Menonaktifkan bangunan 3D

Untuk perangkat dengan performa terbatas, Anda dapat menonaktifkan tampilan bangunan 3D dengan memanggil GoogleMap.setBuildingsEnabled(false).

Prompt Visibility API (Eksperimental)

Prompt Visibility API memungkinkan Anda menghindari konflik antara elemen UI yang dihasilkan oleh Navigation SDK dan elemen UI kustom Anda sendiri dengan menambahkan pemroses untuk menerima callback sebelum elemen UI Navigation SDK akan muncul dan segera setelah elemen dihapus. Untuk mengetahui informasi selengkapnya, termasuk contoh kode, lihat bagian Prompt Visibility API di halaman Mengonfigurasi gangguan real-time.