Personalizar a interface do usuário de navegação

Você pode personalizar elementos da interface do usuário e o mapa, além de adicionar marcadores personalizados a ele. Consulte a página Políticas para ver diretrizes sobre modificações aceitáveis na interface de navegação.

Confira o código

Personalize o cabeçalho de navegação

Use NavigationFragment.setStylingOptions() ou NavigationView.setStylingOptions() para mudar o tema do cabeçalho de navegação e o indicador da próxima curva que aparece abaixo do cabeçalho, quando disponível.

Você pode definir os seguintes atributos:

Tipo de atributoAtributos
Cor do plano de fundo
  • Modo diurno principal: a cor diurna do cabeçalho de navegação
  • Modo diurno secundário: a cor diurna do indicador da próxima curva
  • Modo noturno principal: a cor noturna do cabeçalho de navegação
  • Modo noturno secundário: a cor noturna do indicador da próxima curva
Elementos de texto para instruções
  • Cor do texto
  • Fonte
  • Tamanho do texto da primeira linha
  • Tamanho do texto da segunda linha
Elementos de texto para as próximas etapas
  • Fonte
  • Cor do texto do valor da distância
  • Tamanho do texto do valor da distância
  • Cor do texto das unidades de distância
  • Tamanho do texto das unidades de distância
Ícones de manobra
  • Cor do ícone da manobra grande
  • Cor do ícone da manobra pequena
Orientação de pista
  • Cor da faixa ou faixa recomendada

O exemplo abaixo mostra como definir as opções de estilo:

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

Desativar a camada de trânsito

Use NavigationMap.setTrafficEnabled() para ativar ou desativar a camada de trânsito no mapa. Essa configuração afeta as indicações de densidade do trânsito mostradas no mapa como um todo, mas não afeta as indicações de trânsito no trajeto traçado pelo navegador.

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

Adicionar marcadores personalizados

Você pode adicionar marcadores personalizados ao mapa para indicar pontos de interesse para seu aplicativo ou usuários. Por exemplo, você pode indicar o ponto de embarque no fim do trajeto. Use NavigationMap.addMarker() para adicionar um marcador e NavigationMap.setOnMarkerClickListener() para detectar toques em um marcador.

O código abaixo usa um ícone armazenado nos recursos drawable do projeto, R.drawable.ic_person_pin_48dp. É possível usar qualquer imagem adequada ao app.

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

Você pode especificar uma imagem personalizada como marcador, mas o SDK ainda não aceita a rotulagem dessas imagens com texto. Para mais informações, consulte Como personalizar marcadores.

Texto flutuante

É possível adicionar texto flutuante em qualquer lugar do app, desde que a atribuição do Google não seja abordada. O SDK do Navigation não tem suporte para fixar o texto em uma latitude/longitude no mapa ou em um rótulo. Para mais informações, consulte Janelas de informações.

Mostrar o limite de velocidade

Você pode mostrar ou ocultar o ícone do limite de velocidade de forma programática. Use NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() ou SupportNavigationFragment.setSpeedLimitIconEnabled() para mostrar ou ocultar o ícone de limite de velocidade. Quando ativado, o ícone de limite de velocidade é mostrado em um canto inferior durante a orientação. Ele mostra o limite de velocidade da via em que o veículo está viajando. Ele só aparece em locais onde dados confiáveis de limite de velocidade estão disponíveis.

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

O ícone de limite de velocidade fica temporariamente oculto quando o botão "Centralizar" é exibido.

Definir modo noturno

É possível controlar o comportamento do modo noturno de forma programática. Use NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode() ou SupportNavigationFragment.setForceNightMode() para ativar ou desativar o modo noturno ou permitir que ele seja controlado pelo SDK do Navigation.

  • AUTO Permite que o SDK do Navigation determine o modo apropriado de acordo com a localização do dispositivo e o horário local.
  • FORCE_NIGHT força o modo noturno a ser ativado.
  • FORCE_DAY força o modo diário ativado.

O exemplo a seguir mostra como forçar a ativação do modo noturno em um fragmento de navegação:

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

Mostrar lista de rotas

Primeiro, crie a visualização e a adicione à sua hierarquia.

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

Encaminhe eventos de ciclo de vida para o DirectionsListView da mesma forma que eles fazem com o NaviagtionView. Exemplo:

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

Ocultando trajetos alternativos

Quando a interface do usuário fica desorganizada com muitas informações, é possível reduzir a sobrecarga mostrando menos rotas alternativas do que o padrão (duas) ou não mostrando rotas alternativas. É possível configurar essa opção antes de buscar as rotas chamando o método RoutingOptions.alternateRoutesStrategy() com um dos seguintes valores de enumeração:

Valor de enumeraçãoDescrição
AlternateRoutesStrategy.SHOW_ALL Padrão. Mostra até duas rotas alternativas.
AlternateRoutesStrategy.SHOW_ONE Mostra um trajeto alternativo (se houver um disponível).
AlternateRoutesStrategy.SHOW_NONE Oculta trajetos alternativos.

Exemplo

O exemplo de código a seguir demonstra como ocultar completamente rotas alternativas.

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