Modificar a IU de navegação

Com o SDK do Navigation para Android, você pode modificar a experiência do usuário com seu mapa determinando quais elementos e controles de IU integrados aparecem no mapa. Você também pode ajustar a aparência da interface de navegação. Consulte a página Políticas para ver diretrizes sobre modificações aceitáveis na interface de navegação.

Este documento descreve como modificar a interface do usuário do seu mapa de duas maneiras:

Controles de interface do mapa

Os controles de interface do mapa ficam na parte superior da visualização de navegação. O SDK do Navigation para Android reposiciona automaticamente os controles personalizados quando o layout integrado muda. Para cada posição do layout, você pode definir um controle personalizado. O controle personalizado pode ser um elemento da interface ou, se o design exigir mais, você pode usar uma ViewGroup com vários elementos da interface.

O método setCustomControl fornece posições conforme definido no enum CustomControlPosition:

  • SECONDARY_HEADER (aparece apenas em modo retrato)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

A imagem mostra exemplos de várias posições de um controle de interface que informa o local de um passageiro ao motorista.

Posições de controle personalizadas

Adicionar um cabeçalho secundário personalizado

Por padrão, os layouts de tela no modo de navegação fornecem uma posição para um cabeçalho secundário, localizado abaixo do cabeçalho principal. Esse cabeçalho secundário aparece quando necessário, como na orientação de faixa. Seu app pode usar essa posição de cabeçalho secundária do layout para conteúdo personalizado. Quando você usa esse recurso, seu controle abrange qualquer conteúdo de cabeçalho secundário padrão. Se a visualização de navegação tiver um segundo plano, ele permanecerá no lugar, coberto pelo cabeçalho secundário. Quando o app remove o controle personalizado, qualquer cabeçalho secundário padrão pode aparecer no lugar dele.

A posição personalizada do cabeçalho secundário alinha a borda superior à borda inferior do cabeçalho principal. Esta posição só é suportada em portrait mode. Em landscape mode, o cabeçalho secundário não está disponível, e o layout não muda.

  1. Crie uma visualização do Android com o elemento de interface personalizada ou um ViewGroup.
  2. Infle o XML ou instancie a visualização personalizada para acessar uma instância da visualização e adicioná-la como um cabeçalho secundário.

  3. Use NavigationView.setCustomControl ou SupportNavigationFragment.setCustomControl com CustomControlPosition como SECARY_HEADER.

    O exemplo abaixo cria um fragmento e adiciona um controle personalizado na posição do cabeçalho secundário.

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

Remover um cabeçalho secundário

Para remover o cabeçalho secundário e retornar ao conteúdo padrão, use o método setCustomControl.

Defina a visualização como null para removê-la.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Adicionar um controle personalizado à parte de baixo da visualização de navegação

Seu app pode especificar um controle personalizado alinhado à borda de baixo da visualização de navegação. Quando o app adiciona o controle personalizado, o botão recentralizar e o logotipo do Google se movem para acomodá-lo.

  1. Crie uma visualização do Android com o elemento da interface ou o grupo de visualizações que você quer adicionar.
  2. Criar a visualização ou o fragmento de navegação.
  3. Chame o método setCustomControl na visualização ou no fragmento de navegação e especifique o controle e a posição a serem usados.

O exemplo a seguir mostra um View personalizado adicionado a um SupportNavigationFragment:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
  getFragmentManager().findFragmentById(R.id.navigation_fragment);

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

Remover um controle personalizado

Para remover o controle personalizado, use o método setCustomControl e especifique a posição do controle que você quer remover.

Defina a visualização como null para essa posição.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Acessórios de interface do usuário do mapa

O SDK do Navigation para Android oferece acessórios de interface que aparecem durante a navegação de forma semelhante aos encontrados no app Google Maps para Android. Você pode ajustar a visibilidade ou a aparência desses controles, conforme descrito nesta seção. As mudanças feitas aqui são refletidas na próxima viagem do motorista.

Consulte a página Políticas para ver diretrizes sobre modificações aceitáveis na interface de navegação.

Ver o código

Modificar o cabeçalho de navegação

Use SupportNavigationFragment.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 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));

Desativar a camada de trânsito

Use GoogleMap.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. No entanto, isso não afeta as indicações de trânsito na rota plotada pelo navegador.

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

Ativar semáforos e sinais de parada

Você pode ativar semáforos e sinais de parada na interface do mapa. Com esse recurso, o motorista pode ativar a exibição de semáforos ou ícones de sinais de parada ao longo do trajeto, oferecendo um contexto melhor para viagens mais eficientes e precisas.

Por padrão, semáforos e sinais de parada são desativados no SDK do Navigation. Para ativar esse recurso, chame DisplayOptions para cada recurso de forma independente.

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

Adicionar marcadores personalizados

O SDK do Navigation para Android agora usa as APIs Google Maps para marcadores. Acesse a documentação da API Maps para mais informações.

Texto flutuante

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

Mostrar o limite de velocidade

Você pode mostrar ou ocultar o ícone do limite de velocidade de forma programática. Use 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 NavigationView.setForceNightMode() ou SupportNavigationFragment.setForceNightMode() para ativar ou desativar o modo noturno ou permitir que ele seja controlado pelo SDK do Navigation para Android.

  • 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.

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

Encaminhe eventos de ciclo de vida para o DirectionsListView da mesma forma que eles são feitos com NavigationView. 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.

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

Barra de progresso da viagem

Barra de progresso da viagem adicionada à navegação.

A barra de progresso da viagem é uma barra vertical que aparece na borda direita final do mapa quando a navegação é iniciada. Quando ativada, ela exibe uma visão geral de uma viagem inteira, com o destino e a posição atual do motorista.

Com isso, os motoristas podem prever rapidamente problemas futuros, como o trânsito, sem precisar aumentar o zoom. Eles podem redirecionar a viagem, se necessário. Quando o motorista redireciona a viagem, a barra de progresso é redefinida como se uma nova viagem começasse daquele ponto.

A barra de progresso da viagem mostra os seguintes indicadores de status:

  • Trajeto decorrido: a parte decorrido da viagem.

  • Posição atual: a localização atual do motorista na viagem.

  • Status do trânsito: o status do trânsito futuro.

  • Destino final: o destino final da viagem.

Ative a barra de progresso da viagem chamando o método setTripProgressBarEnabled() em NavigationView ou SupportNavigationFragment. Exemplo:

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