Изменить интерфейс навигации

Используя Navigation SDK для Android, вы можете изменить взаимодействие пользователя с вашей картой, определив, какие из встроенных элементов управления и элементов пользовательского интерфейса будут отображаться на карте. Вы также можете настроить внешний вид пользовательского интерфейса навигации. На странице «Политики» приведены рекомендации по допустимым изменениям пользовательского интерфейса навигации.

В этом документе описывается, как изменить пользовательский интерфейс карты двумя способами:

• Элементы управления пользовательским интерфейсом карты
• Аксессуары пользовательского интерфейса карты

Элементы управления пользовательским интерфейсом карты

Элементы управления пользовательским интерфейсом карты — это рекомендуемый способ размещения пользовательских элементов пользовательского интерфейса в представлении навигации, чтобы обеспечить правильное расположение. При изменении встроенного макета Navigation SDK для Android автоматически меняет положение ваших пользовательских элементов управления. Вы можете установить один пользовательский вид элемента управления для каждой позиции. Если для вашего дизайна требуется несколько элементов пользовательского интерфейса, вы можете поместить их в ViewGroup и передать ее методу setCustomControl .

Метод setCustomControl предоставляет позиции, определенные в перечислении CustomControlPosition :

• SECONDARY_HEADER (отображается только в портретном режиме)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW
• FOOTER

Добавить пользовательский элемент управления

1. Создайте представление Android с помощью пользовательского элемента пользовательского интерфейса или ViewGroup.
2. Разверните XML или создайте экземпляр пользовательского представления, чтобы получить экземпляр представления.

3. Используйте NavigationView.setCustomControl или SupportNavigationFragment.setCustomControl с выбранной позицией пользовательского элемента управления из перечисления CustomControlPosition .

   В приведенном ниже примере создается фрагмент и добавляется пользовательский элемент управления в позицию вторичного заголовка.

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

Удаление пользовательского элемента управления

Чтобы удалить настраиваемый элемент управления, вызовите метод setCustomControl с null параметром представления и выбранной позицией настраиваемого элемента управления.

Например, следующий фрагмент удаляет любой пользовательский вторичный заголовок и возвращает содержимое по умолчанию:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Пользовательские позиции управления

Вторичный заголовок

Чтобы использовать эту позицию пользовательского элемента управления, передайте позицию CustomControlPosition.SECONDARY_HEADER в setCustomControl .

По умолчанию макеты экрана в режиме навигации предусматривают положение вторичного заголовка, расположенного под основным заголовком. Этот вторичный заголовок появляется при необходимости, например, при указании полосы движения. Ваше приложение может использовать эту вторичную позицию заголовка макета для пользовательского контента. Когда вы используете эту функцию, ваш элемент управления охватывает любое содержимое вторичного заголовка по умолчанию. Если у вашего представления навигации есть фон, этот фон остается на месте, покрытый вторичным заголовком. Когда ваше приложение удаляет настраиваемый элемент управления, на его месте может появиться любой вторичный заголовок по умолчанию.

Положение настраиваемого вторичного заголовка выравнивает его верхний край с нижним краем основного заголовка. Это положение поддерживается только в portrait mode . В landscape mode вторичный заголовок недоступен, а макет не меняется.

Нижнее начало

Чтобы использовать эту позицию пользовательского элемента управления, передайте позицию CustomControlPosition.BOTTOM_START_BELOW в setCustomControl .

Эта настраиваемая позиция элемента управления находится в нижнем стартовом углу карты. Как в portrait mode , так и landscape mode он располагается над карточкой расчетного прибытия и/или пользовательским нижним колонтитулом (или внизу карты, если ни один из них отсутствует), а элементы Nav SDK, включая кнопку повторного центрирования и логотип Google, перемещаются вверх к учетной записи. для высоты представления пользовательского элемента управления. Этот элемент управления расположен внутри видимых границ карты, поэтому любое дополнение, добавленное к нижнему или начальному краю карты, также изменит положение этого элемента управления.

Нижний конец

Чтобы использовать эту позицию пользовательского элемента управления, передайте позицию CustomControlPosition.BOTTOM_END_BELOW в setCustomControl .

Эта настраиваемая позиция элемента управления находится в нижнем углу карты. В portrait mode он располагается над карточкой расчетного прибытия и/или пользовательским нижним колонтитулом (или вдоль нижней части карты, если ни один из них отсутствует), но в landscape mode он выравнивается по нижней части карты. Любые элементы Nav SDK, видимые вдоль конечной стороны (правая сторона в LTR), перемещаются вверх, чтобы учесть высоту представления пользовательского элемента управления. Этот элемент управления расположен внутри видимых границ карты, поэтому любое дополнение, добавленное к нижнему или конечному краю карты, также изменит положение этого элемента управления.

Нижний колонтитул

Чтобы использовать эту позицию пользовательского элемента управления, передайте позицию CustomControlPosition.FOOTER в setCustomControl .

Это настраиваемое положение элемента управления предназначено для пользовательского вида нижнего колонтитула. Если карта Nav SDK ETA видна, этот элемент управления находится над ней. В противном случае элемент управления выравнивается по нижней части карты. В отличие от настраиваемых элементов управления BOTTOM_START_BELOW и BOTTOM_END_BELOW , этот элемент управления расположен за пределами видимых границ карты, что означает, что любые поля, добавленные к карте, не изменят положение этого элемента управления.

В portrait mode пользовательский нижний колонтитул имеет полную ширину. Пользовательские элементы управления в позициях CustomControlPosition.BOTTOM_START_BELOW и CustomControlPosition.BOTTOM_END_BELOW , а также элементы пользовательского интерфейса Nav SDK, такие как кнопка повторного центрирования и логотип Google, расположены над нижним колонтитулом пользовательского элемента управления. Положение шеврона по умолчанию учитывает пользовательскую высоту нижнего колонтитула.

В landscape mode пользовательский нижний колонтитул имеет половину ширины и выравнивается по начальной стороне (левая сторона в LTR), как и карта Nav SDK ETA. Настраиваемые элементы управления в позиции CustomControlPosition.BOTTOM_START_BELOW и элементы пользовательского интерфейса Nav SDK, такие как кнопка повторного центрирования и логотип Google, расположены над нижним колонтитулом настраиваемых элементов управления. Пользовательские элементы управления в позиции CustomControlPosition.BOTTOM_END_BELOW и любые элементы пользовательского интерфейса Nav SDK вдоль конечной стороны (правая сторона в LTR) остаются на одной линии с нижней частью карты. Положение шеврона по умолчанию не меняется при наличии пользовательского нижнего колонтитула, поскольку нижний колонтитул не доходит до конечной стороны карты.

Пользовательские элементы управления в позициях CustomControlPosition.BOTTOM_START_BELOW и CustomControlPosition.BOTTOM_END_BELOW , а также элементы пользовательского интерфейса Nav SDK, такие как кнопка повторного центрирования и логотип Google, расположены над нижним колонтитулом пользовательского элемента управления.

Аксессуары пользовательского интерфейса карты

Навигационный SDK для Android предоставляет аксессуары пользовательского интерфейса, которые появляются во время навигации, аналогично тем, которые есть в приложении Google Maps для Android. Вы можете настроить видимость или внешний вид этих элементов управления, как описано в этом разделе. Изменения, внесенные вами здесь, отразятся во время следующего сеанса навигации.

На странице «Политики» приведены рекомендации по допустимым изменениям пользовательского интерфейса навигации.

Посмотреть код

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

Изменить заголовок навигации

Используйте 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 =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

Добавить пользовательские маркеры

Навигационный SDK для Android теперь использует API Google Maps для маркеров. Дополнительную информацию можно найти в документации API Карт .

Плавающий текст

Вы можете добавить плавающий текст в любое место вашего приложения, при условии, что он не содержит атрибуции Google. Navigation SDK не поддерживает привязку текста к широте и долготе на карте или к метке. Перейдите к информационным окнам для получения дополнительной информации.

Отображение ограничения скорости

Вы можете программно показать или скрыть значок ограничения скорости. Используйте NavigationView.setSpeedLimitIconEnabled() или SupportNavigationFragment.setSpeedLimitIconEnabled() чтобы отобразить или скрыть значок ограничения скорости. Если эта функция включена, во время навигации в нижнем углу отображается значок ограничения скорости. Значок отображает ограничение скорости дороги, по которой движется автомобиль. Значок появляется только в тех местах, где доступны надежные данные об ограничении скорости.

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

Значок ограничения скорости временно скрыт, когда отображается кнопка возврата в центр.

Установить ночной режим

Вы можете программно управлять поведением ночного режима. Используйте NavigationView.setForceNightMode() или SupportNavigationFragment.setForceNightMode() , чтобы включить или выключить ночной режим, или позвольте навигационному SDK для Android управлять им.

• AUTO Позволяет навигационному 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() с одним из следующих значений перечисления:

В следующем примере кода показано, как полностью скрыть альтернативные маршруты.

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