Personalizar o layout de navegação

Este produto ou recurso é experimental (pré-GA). Os produtos e recursos pré-GA têm suporte limitado, e é possível que as mudanças neles não sejam compatíveis com versões anteriores. As Soluções pré-GA são cobertas pelos Termos de Serviço da Plataforma Google Maps. Para mais detalhes, consulte as descrições da fase de lançamento.

Use a personalização do layout para controlar a hierarquia de visualização e o posicionamento da tela para as visualizações fornecidas pelo Google e as visualizações comerciais personalizadas.

Em vez de adicionar visualizações personalizadas a slots de cabeçalho ou rodapé predefinidos, implemente um delegado de layout para gerenciar o layout de toda a tela. Durante as transições de estado de navegação, o delegado de layout recebe os componentes fornecidos pelo Google, como o card de curva, o cartão HEC e os botões. Posicione esses elementos ao lado do seu conteúdo personalizado usando sistemas de layout padrão do Android, como ConstraintLayout, CoordinatorLayout ou LinearLayout.

Use essa estrutura para posicionar informações comerciais personalizadas, como o status do pedido ou instruções de coleta, com precisão na tela, evitando que as visualizações se sobreponham.

Como funciona a personalização do layout

A personalização do layout usa um padrão de design de delegação. Em vez de desenhar ou posicionar automaticamente os componentes da interface na tela, o SDK os transmite diretamente para uma classe personalizada que você escreve: o delegado de layout.

Para personalizar o layout, crie uma classe que estenda a classe abstrata NavigationLayoutDelegate e atribua uma instância ao NavigationView ou SupportNavigationFragment. Sempre que o estado de navegação muda, como ao passar do mapa de base para a navegação guiada ativa, o SDK executa os métodos de callback no delegado e fornece os componentes da interface disponíveis para esse estado específico.

Para oferecer uma experiência do usuário integrada e perfeita, essa estrutura estabelece uma separação clara de responsabilidade entre o app e o SDK. Use o delegado de layout para personalizar o seguinte:

• Criar a hierarquia de visualização:escolha exatamente quais componentes do Google e visualizações comerciais personalizadas serão adicionados à tela para cada estado da interface.
• Posicionar cada elemento:defina âncoras, margens e posicionamento de layout precisos na tela. Evite aplicar restrições de largura ou altura personalizadas aos componentes do Google, porque eles calculam as próprias dimensões internas.
• Enquadrar o mapa de base:defina os limites visíveis da câmera do mapa usando as coordenadas do componente da janela de visualização.
• Camadas da tela:decida se as visualizações personalizadas flutuam acima, abaixo ou ao lado dos controles integrados do Google.

Enquanto isso, não é possível personalizar os seguintes componentes do Google com o delegado de layout:

• Dimensões do componente:o tamanho e as dimensões internas dos componentes fornecidos pelo Google, que o SDK calcula automaticamente.
• Condições de acionamento:quando alertas ou avisos dinâmicos aparecem com base em dados de rota em tempo real.

Princípios de implementação

Ao escrever um delegado de layout, lembre-se das seguintes regras para evitar bugs de layout ou falhas de execução:

• O padrão é uma tela vazia:os componentes fornecidos pelo Google só aparecem se o delegado os adicionar explicitamente à hierarquia de visualização e os posicionar.
• As APIs legadas não são compatíveis: as propriedades e os métodos que controlam o modelo de layout legado baseado em slots não são compatíveis e podem não se comportar como esperado quando um delegado personalizado está ativo.
• Não modifique as estruturas de visualização internas: Não use métodos como findViewById() para percorrer ou modificar as hierarquias de visualização de componentes fornecidos pelo Google (como o card de curva ou o cartão HEC). Como essas hierarquias de visualização internas são detalhes de implementação subjacentes, elas estão sujeitas a mudanças nas versões do SDK. A modificação delas pode causar a quebra do layout durante atualizações futuras do SDK.

Compatibilidade da API legada

Para um comportamento de layout confiável ao usar um delegado de layout personalizado, evite usar as seguintes APIs legadas baseadas em slots, que estão planejadas para descontinuação. Para migrar um app atual, substitua o uso dessas APIs por código no delegado de layout personalizado:

Mostrar APIs legadas baseadas em slots

API Legacy	Substituição do delegado de layout
setCustomControl(View, CustomControlPosition)	Adicione suas visualizações diretamente ao ConstraintLayout ou a outro grupo de visualização.
removeCustomControl(View)	Remova as visualizações diretamente da hierarquia de visualização.
setEtaCardEnabled(boolean)	Leia a visualização etaCard em onEnterActiveGuidance.
setHeaderEnabled(boolean)	Leia a visualização turnCard em onEnterActiveGuidance.
setReportIncidentButtonEnabled(boolean)	Localize o botão REPORTING em getActiveGuidanceButtons().
setTripProgressBarEnabled(boolean)	Leia a visualização tripProgressBar em onEnterActiveGuidance.
addOnNavigationUiChangedListener(...)	Confie nos callbacks de transição de estado NavigationLayoutDelegate.
removeOnNavigationUiChangedListener(...)	Gerencie as transições de estado do layout diretamente usando o delegado.
addPromptVisibilityChangedListener(...)	Confie nos callbacks de aviso NavigationLayoutDelegate (como onShowPrompt()).
removePromptVisibilityChangedListener(...)	Gerencie a lógica de exibição de avisos diretamente usando o delegado.
setCompassEnabled(boolean)	Localize a bússola em getNavigationReadyButtons() ou getActiveGuidanceButtons().

Lista de verificação de fundamentos

Siga estas etapas e requisitos essenciais para implementar o delegado de layout com sucesso:

• Inicialize o delegado antes de criar a interface: chame setLayoutDelegate() antes que o SDK inicialize a interface de navegação. Consulte os exemplos de implementação de código a seguir para verificar o momento exato da configuração da estrutura do aplicativo. A inicialização do delegado após a criação da interface aciona um ApiIllegalStateException.

  Kotlin

  // For SupportNavigationFragment
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      val navFragment = supportFragmentManager.findFragmentById(R.id.nav_fragment) as SupportNavigationFragment
      navFragment.setLayoutDelegate(MyLayoutDelegate())
  }
  
  // For a programmatic NavigationView
  val navigationView = NavigationView(context)
  navigationView.setLayoutDelegate(MyLayoutDelegate())
  navigationView.onCreate(savedInstanceState)
          

  Java

  // For SupportNavigationFragment
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      SupportNavigationFragment navFragment = (SupportNavigationFragment) getSupportFragmentManager().findFragmentById(R.id.nav_fragment);
      navFragment.setLayoutDelegate(new MyLayoutDelegate());
  }
  
  // For a programmatic NavigationView
  NavigationView navigationView = new NavigationView(context);
  navigationView.setLayoutDelegate(new MyLayoutDelegate());
  navigationView.onCreate(savedInstanceState);
          

• Crie seu próprio contêiner de layout: crie um grupo de visualização personalizado, como um ConstraintLayout, para armazenar os elementos da interface personalizada e as visualizações fornecidas pelo Google.

• Anexe visualizações obrigatórias:é necessário adicionar o logotipo do Google (getGoogleLogo()) e a janela de visualização (getViewport()) ao contêiner de layout em todos os estados de navegação. Se você não incluir essas duas visualizações uma ApiIllegalStateException de execução será acionada e o app vai falhar.

• Respeite as dimensões fixas: o SDK determina as dimensões de vários componentes fornecidos pelo Google. Não aplique restrições de largura ou altura personalizadas aos seguintes elementos:

  • Card de curva
  • cartão HEC
  • Avisos recebidos
  • Logotipo do Google
  • Widget de velocidade

• Anexe o layout à visualização: chame navigationView.setNavigationLayout() nos callbacks onEnterNavigationReady() e onEnterActiveGuidance() para anexar o contêiner à hierarquia de visualização do mapa.

• Limpe na saída do estado: Chame navigationView.removeNavigationLayout() e remova as visualizações personalizadas nos callbacks onLeave para evitar vazamentos de memória e estados de interface sobrepostos.

• Evite APIs de layout legadas: não chame APIs legadas baseadas em slots, como setCustomControl() ou setHeaderEnabled(), enquanto um delegado personalizado estiver ativo. O SDK poderá ignorar essas chamadas legadas quando um delegado personalizado estiver anexado.

Estados da interface e componentes do Google

Quando ocorre uma transição de estado de navegação, o SDK transmite um objeto UiState somente leitura para o callback do delegado. Esse objeto agrupa as flags de configuração de layout atuais com os componentes do Google (por exemplo, instâncias View) que você precisa renderizar a tela.

O delegado de layout gerencia a hierarquia de visualização em quatro estados operacionais. O diagrama de estado a seguir ilustra como o SDK faz a transição entre os estados de navegação e quais métodos de callback ele executa no delegado:

Os componentes específicos do Google fornecidos ao delegado dependem da fase atual do ciclo de vida de navegação.

Componentes obrigatórios (todos os estados de navegação)

Independente da fase de navegação atual, é necessário incluir, posicionar e manter os seguintes componentes do Google visíveis na hierarquia de visualização:

• Logotipo do Google (getGoogleLogo()): esse componente mostra o logotipo obrigatório do Google Maps. Se o botão Recentralizar estiver ativado, o logotipo será transformado automaticamente nesse botão quando o motorista rolar o mapa para longe do veículo. Como resultado, o posicionamento do logotipo determina onde o botão Recentralizar aparece. Recomendamos colocar o logotipo no canto inferior esquerdo do layout para corresponder às expectativas padrão da interface do mapa.

• Janela de visualização (getViewport()): uma View invisível que define os limites de enquadramento da câmera. O posicionamento da janela de visualização determina exatamente onde o SDK centraliza o chevron do veículo e desenha a linha de rota ativa. Posicione a janela de visualização para que ela cubra a área aberta e desobstruída da tela, evitando sobreposições opacas, como as folhas de baixo personalizadas.

Componentes prontos para navegação

Durante o estado pronto para navegação, a interface permanece mínima para manter o foco no mapa de base. O objeto NavigationReadyUiState fornece acesso ao seguinte:

• getNavigationReadyButtons(): uma lista de visualizações de ações flutuantes configuradas para o mapa base (normalmente apenas o botão da bússola). Como o Google pode adicionar ou reordenar botões em versões futuras do SDK, evite depender de índices de lista fixos. Em vez disso, itere pela lista, leia o tipo de cada botão comparando getType() a ButtonKnownType.COMPASS e extraia a visualização física chamando getView(). Os botões exatos nessa lista são diferentes daqueles disponíveis durante a orientação ativa.

Componentes de orientação ativa

Quando a navegação guiada começa, o SDK desbloqueia o conjunto completo de controles de navegação. O objeto ActiveGuidanceUiState fornece acesso aos seguintes componentes do Google:

• getTurnCard(): o banner de cabeçalho principal que mostra as próximas direções de manobra, medições de distância e orientação de faixa. Coloque-o na parte de cima do layout para estabelecer uma hierarquia de navegação familiar e ancorar as visualizações personalizadas ao redor dele.

• getEtaCard(): o banner de rodapé que mostra o horário de chegada estimado, o tempo restante da viagem e a distância restante até o destino. Coloque-o na borda inferior da tela ou integre as coordenadas dele às suas planilhas de gerenciamento de tarefas personalizadas.

• getTripProgressBar(): uma barra de progresso vertical que mostra ao motorista a distância percorrida na rota atual. Ao contrário dos layouts legados que fixavam isso estritamente na borda do mapa, você tem total liberdade para ancorá-lo em qualquer lugar, por exemplo, ao longo de uma borda lateral do contêiner personalizado.

• getSpeedWidget(): um controle flutuante para o velocímetro e os limites de velocidade postados. Dependendo das configurações da API e da disponibilidade de dados, essa visualização é redimensionada dinamicamente entre quatro estados visuais no momento da execução (não mostrando nada, apenas a velocidade atual, apenas o limite de velocidade ou ambas as leituras). Como o widget pode mudar entre esses tamanhos sem aviso prévio, sempre ancore as visualizações ao redor usando restrições para que o layout se adapte automaticamente para evitar sobreposições espaciais.

• getActiveGuidanceButtons(): uma lista expandida de visualizações de ações flutuantes para o estado de orientação ativa (normalmente incluindo o botão da bússola e o de relatório de incidentes). Assim como no estado pronto para navegação, é possível localizar e extrair visualizações de botões individuais filtrando a lista por ButtonKnownType (COMPASS ou REPORTING) e extraindo a visualização usando getView(). Em seguida, posicione-os de forma independente ou use um layout como AutoHidingLinearLayout para empilhar a matriz com segurança sem conflitos espaciais.

Dica: prática recomendada para enquadramento da câmera. O card de curva usa uma altura fixa de 150 dp, acessível por StyleValues.headerNominalHeightDp(). Para manter o enquadramento da câmera estável, não restrinja a parte de cima de getViewport() diretamente à borda inferior de getTurnCard(). Em vez disso, restrinja a janela de visualização à parte de cima da visualização pai e defina a margem superior como StyleValues.headerNominalHeightDp(), conforme mostrado no exemplo de implementação.

Componentes de aviso dinâmico

Os avisos, como alertas de incidentes ou avisos de câmeras de segurança, são acionados de forma independente durante a orientação ativa.

Quando um aviso está pronto para ser exibido, o SDK chama o callback onShowPrompt() do delegado e transmite uma visualização newPrompt. O delegado é responsável por posicionar esse aviso sem problemas no layout (normalmente ancorado na borda inferior do contêiner do mapa).

Como o aviso recebido cobre a parte inferior da tela, é necessário atualizar o layout para evitar que ele se sobreponha à janela de visualização, ao logotipo do Google ou a qualquer botão alinhado na parte de baixo.

Como processar o tamanho da tela e o modo amplo

Para processar mudanças nas dimensões do mapa e na orientação da tela, o delegado de layout usa os seguintes recursos:

• Redimensionamento da visualização:ajusta o layout sempre que o tamanho físico do mapa muda.

• Modo amplo:alterna para uma variante de layout de formato amplo quando o mapa é largo o suficiente.

Como responder ao redimensionamento da visualização

Sempre que as dimensões físicas do contêiner do mapa mudam, o SDK executa o callback onSizeChanged(). Layouts de tela dividida, controles deslizantes de layout e rotação de dispositivos geralmente acionam o callback onSizeChanged(). Use esse callback para fazer ajustes responsivos gerais na interface personalizada. Implemente onSizeChanged() para reposicionar elementos personalizados para uma nova proporção da tela, aplicar seus próprios pontos de interrupção de largura ou altura personalizados e detectar quando um evento de redimensionamento alterna o modo amplo para trocar variantes de layout com segurança.

Entender o modo amplo

O modo amplo é ativado quando o contêiner do mapa é largo o suficiente para mostrar os componentes da interface lado a lado.

Leia o booleano isWideMode() do objeto de estado para reposicionar os elementos da interface personalizada e manter o centro do mapa limpo para o motorista. Como os componentes fornecidos pelo Google, como o card de curva e o cartão HEC, são reduzidos e remodelados automaticamente no modo amplo, a leitura desse booleano garante que o layout se adapte no mesmo momento em que os componentes do Google são atualizados.

Considere os exemplos a seguir para posicionar os componentes de layout nos modos padrão e amplo:

• Modo retrato padrão:posicione o card de curva na parte de cima da tela e o card de HEC na parte de baixo.

• Modo amplo:mova o card de curva para o lado inicial da tela e o card de HEC para o lado final.

Verificar o modo amplo durante as transições de estado

Se o layout for compatível com uma variação de modo amplo, avalie o booleano isWideMode() em cada callback de transição de estado, em vez de depender apenas de onSizeChanged().

Verifique o objeto de estado durante callbacks como onEnterNavigationReady() e onEnterActiveGuidance() para processar as inicializações iniciais do app no modo paisagem. Essa abordagem protege o layout contra eventos do ciclo de vida do sistema Android, como a recriação de atividades padrão, que ignoram o callback de redimensionamento, garantindo que a variante de layout padrão ou ampla correta seja ativada no momento em que um novo estado de navegação começa.

Alinhamento com a estilização do Google

Para ajudar a interface personalizada a corresponder ao ritmo visual do Google, o SDK fornece a classe de utilitário StyleValues. É possível ler esses valores em pixels independentes de densidade (dp) para alinhar as visualizações perfeitamente com os componentes do Google.

Por exemplo, se você quiser colocar um botão personalizado no canto superior da tela oposto ao card de curva, chame StyleValues.headerTopPaddingDp() e atribua o valor retornado como a margem superior do botão. Isso garante que o botão personalizado esteja alinhado visualmente com a borda superior do card de curva, mantendo a simetria da tela.

Os preenchimentos e medidas de estilo disponíveis incluem:

• StyleValues.headerNominalHeightDp()
• StyleValues.headerTopPaddingDp()
• StyleValues.headerFooterSidePaddingDp()
• StyleValues.mapControlSidePaddingDp()
• StyleValues.buttonMapControlSidePaddingDp()

Exemplo: implementação de layout baseado em restrições

O exemplo a seguir demonstra um delegado de layout básico que gerencia transições de estado usando definições programáticas de ConstraintLayout e ConstraintSet.

Embora esse exemplo crie restrições de visualização no código, os delegados de layout também podem inflar layouts XML padrão do Android.

Kotlin

/*
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@file:Suppress("PackageName")

package com.example.navigationapidemo.layoutdelegate

import android.content.Context
import android.util.TypedValue
import android.view.View
import android.view.ViewGroup
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import com.google.android.libraries.navigation.layoutcustomization.ActiveGuidanceUiState
import com.google.android.libraries.navigation.layoutcustomization.AutoHidingVerticalLayout
import com.google.android.libraries.navigation.layoutcustomization.NavigationLayoutDelegate
import com.google.android.libraries.navigation.layoutcustomization.NavigationReadyUiState
import com.google.android.libraries.navigation.layoutcustomization.NavigationUiButton.ButtonKnownType.COMPASS
import com.google.android.libraries.navigation.layoutcustomization.NavigationUiParent
import com.google.android.libraries.navigation.layoutcustomization.StyleValues.headerNominalHeightDp

/** Kotlin equivalent of StandardUiElementsLayoutDelegate. */
class StandardUiElementsLayoutDelegateKt : NavigationLayoutDelegate() {

  private val layoutId = View.generateViewId()
  private val buttonsContainerId = View.generateViewId()

  private var layout: ConstraintLayout? = null
  private var buttonsContainer: AutoHidingVerticalLayout? = null

  private var navigationReadyConstraintSet: ConstraintSet? = null
  private var activeGuidanceConstraintSet: ConstraintSet? = null
  private var activeGuidanceWithPromptConstraintSet: ConstraintSet? = null

  private var activeGuidanceUiState: ActiveGuidanceUiState? = null

  override fun onEnterNavigationReady(
    navigationUiParent: NavigationUiParent,
    newState: NavigationReadyUiState,
  ) {
    val context = navigationUiParent.viewContext

    var currentLayout = layout
    if (currentLayout == null) {
      currentLayout =
        ConstraintLayout(context).apply {
          layoutParams =
            ViewGroup.LayoutParams(
              ViewGroup.LayoutParams.MATCH_PARENT,
              ViewGroup.LayoutParams.MATCH_PARENT,
            )
          id = layoutId
        }
      layout = currentLayout
    }

    removeFromParentView(newState.viewport)
    currentLayout.addView(
      newState.viewport,
      ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT,
      ),
    )

    removeFromParentView(newState.googleLogo)
    currentLayout.addView(
      newState.googleLogo,
      ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.WRAP_CONTENT,
      ),
    )

    var currentButtonsContainer = buttonsContainer
    if (currentButtonsContainer == null) {
      currentButtonsContainer = AutoHidingVerticalLayout(context).apply { id = buttonsContainerId }
      buttonsContainer = currentButtonsContainer
    }

    removeFromParentView(currentButtonsContainer)
    currentLayout.addView(
      currentButtonsContainer,
      ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ConstraintLayout.LayoutParams.MATCH_CONSTRAINT,
      ),
    )

    for (button in newState.navigationReadyButtons) {
      removeFromParentView(button.view)
      currentButtonsContainer.addView(button.view)
    }

    if (navigationReadyConstraintSet == null) {
      navigationReadyConstraintSet = buildNavigationReadyConstraintSet(newState)
    }
    navigationReadyConstraintSet?.applyTo(currentLayout)

    navigationUiParent.removeNavigationLayout(currentLayout)
    navigationUiParent.setNavigationLayout(currentLayout)
  }

  private fun buildNavigationReadyConstraintSet(uiState: NavigationReadyUiState): ConstraintSet {
    return ConstraintSet().apply {
      clone(layout)

      connect(
        uiState.viewport.id,
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START,
      )
      connect(uiState.viewport.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
      connect(uiState.viewport.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
      connect(
        uiState.viewport.id,
        ConstraintSet.BOTTOM,
        ConstraintSet.PARENT_ID,
        ConstraintSet.BOTTOM,
      )

      connect(
        uiState.googleLogo.id,
        ConstraintSet.BOTTOM,
        ConstraintSet.PARENT_ID,
        ConstraintSet.BOTTOM,
      )
      connect(
        uiState.googleLogo.id,
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START,
      )

      constrainButtonsToBottomEnd()
    }
  }

  override fun onLeaveNavigationReady(
    navigationUiParent: NavigationUiParent,
    oldState: NavigationReadyUiState,
  ) {
    buttonsContainer?.removeAllViews()
    layout?.removeAllViews()
    layout?.let { navigationUiParent.removeNavigationLayout(it) }
  }

  override fun onEnterActiveGuidance(
    navigationUiParent: NavigationUiParent,
    oldState: NavigationReadyUiState,
    newState: ActiveGuidanceUiState,
  ) {
    activeGuidanceUiState = newState
    val context = navigationUiParent.viewContext
    val currentLayout = checkNotNull(layout) { "layout must be initialized" }
    val currentButtonsContainer =
      checkNotNull(buttonsContainer) { "buttonsContainer must be initialized" }

    removeFromParentView(newState.turnCard)
    currentLayout.addView(
      newState.turnCard,
      ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT,
      ),
    )

    removeFromParentView(newState.etaCard)
    currentLayout.addView(
      newState.etaCard,
      ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT,
      ),
    )

    for (button in oldState.navigationReadyButtons) {
      removeFromParentView(button.view)
    }

    for (button in newState.activeGuidanceButtons) {
      val buttonLayoutParams =
        AutoHidingVerticalLayout.LayoutParams(
          ViewGroup.LayoutParams.WRAP_CONTENT,
          ViewGroup.LayoutParams.WRAP_CONTENT,
        )
      if (button.type == COMPASS) {
        buttonLayoutParams.isHighPriority = true
      }
      removeFromParentView(button.view)
      currentButtonsContainer.addView(button.view, buttonLayoutParams)
    }

    if (activeGuidanceConstraintSet == null) {
      activeGuidanceConstraintSet = buildActiveGuidanceConstraintSet(context, newState)
    }

    activeGuidanceConstraintSet?.applyTo(currentLayout)
  }

  override fun onLeaveActiveGuidance(
    navigationUiParent: NavigationUiParent,
    oldState: ActiveGuidanceUiState,
    newState: NavigationReadyUiState,
  ) {
    removeFromParentView(oldState.etaCard)
    removeFromParentView(oldState.turnCard)
    buttonsContainer?.removeAllViews()

    val currentButtonsContainer =
      checkNotNull(buttonsContainer) { "buttonsContainer must be initialized" }
    for (button in newState.navigationReadyButtons) {
      currentButtonsContainer.addView(
        button.view,
        ViewGroup.LayoutParams(
          ViewGroup.LayoutParams.WRAP_CONTENT,
          ViewGroup.LayoutParams.WRAP_CONTENT,
        ),
      )
    }

    navigationReadyConstraintSet?.applyTo(layout)
  }

  private fun buildActiveGuidanceConstraintSet(
    context: Context,
    uiState: ActiveGuidanceUiState,
  ): ConstraintSet {
    return ConstraintSet().apply {
      clone(layout)

      connect(uiState.turnCard.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
      connect(
        uiState.turnCard.id,
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START,
      )

      clear(uiState.viewport.id)
      connect(
        uiState.viewport.id,
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START,
      )
      connect(uiState.viewport.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
      setMargin(uiState.viewport.id, ConstraintSet.TOP, dpToPx(headerNominalHeightDp(), context))
      connect(uiState.viewport.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
      connect(uiState.viewport.id, ConstraintSet.BOTTOM, uiState.etaCard.id, ConstraintSet.TOP)

      clear(uiState.googleLogo.id, ConstraintSet.BOTTOM)
      constrainLogoToTopOfEtaCard(uiState)
      constrainEtaCardToBottomStart(uiState)
      constrainButtonsToTopOfEtaCard(context, uiState)
    }
  }

  private fun ConstraintSet.constrainEtaCardToBottomStart(uiState: ActiveGuidanceUiState) {
    connect(uiState.etaCard.id, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START)
    connect(uiState.etaCard.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
  }

  private fun ConstraintSet.constrainLogoToTopOfEtaCard(uiState: ActiveGuidanceUiState) {
    connect(uiState.googleLogo.id, ConstraintSet.BOTTOM, uiState.etaCard.id, ConstraintSet.TOP)
  }

  private fun ConstraintSet.constrainButtonsToBottomEnd() {
    clear(buttonsContainerId, ConstraintSet.BOTTOM)
    clear(buttonsContainerId, ConstraintSet.TOP)
    connect(buttonsContainerId, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
    connect(buttonsContainerId, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
    connect(buttonsContainerId, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
  }

  private fun ConstraintSet.constrainButtonsToTopOfEtaCard(
    context: Context,
    uiState: ActiveGuidanceUiState,
  ) {
    clear(buttonsContainerId, ConstraintSet.BOTTOM)
    clear(buttonsContainerId, ConstraintSet.TOP)
    connect(buttonsContainerId, ConstraintSet.BOTTOM, uiState.etaCard.id, ConstraintSet.TOP)
    connect(buttonsContainerId, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
    connect(buttonsContainerId, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
    setMargin(buttonsContainerId, ConstraintSet.TOP, dpToPx(headerNominalHeightDp(), context))
  }

  override fun onShowPrompt(navigationUiParent: NavigationUiParent, newPrompt: View) {
    val context = navigationUiParent.viewContext
    layout?.addView(newPrompt)

    if (activeGuidanceUiState != null) {
      activeGuidanceWithPromptConstraintSet =
        buildActiveGuidanceWithPromptConstraintSet(context, newPrompt)
      activeGuidanceWithPromptConstraintSet?.applyTo(layout)
    }
  }

  override fun onChangePrompt(
    navigationUiParent: NavigationUiParent,
    oldPrompt: View,
    newPrompt: View,
  ) {
    val context = navigationUiParent.viewContext
    activeGuidanceWithPromptConstraintSet?.clear(oldPrompt.id)

    val currentLayout = checkNotNull(layout) { "layout must be initialized" }
    currentLayout.removeView(oldPrompt)
    currentLayout.addView(newPrompt)

    if (activeGuidanceUiState != null) {
      activeGuidanceWithPromptConstraintSet =
        buildActiveGuidanceWithPromptConstraintSet(context, newPrompt)
      activeGuidanceWithPromptConstraintSet?.applyTo(currentLayout)
    }
  }

  override fun onHidePrompt(navigationUiParent: NavigationUiParent, oldPrompt: View) {
    activeGuidanceWithPromptConstraintSet?.clear(oldPrompt.id)
    layout?.removeView(oldPrompt)

    activeGuidanceConstraintSet?.applyTo(layout)
  }

  private fun buildActiveGuidanceWithPromptConstraintSet(
    context: Context,
    prompt: View,
  ): ConstraintSet {
    return ConstraintSet().apply {
      clone(layout)

      val state =
        checkNotNull(activeGuidanceUiState) { "activeGuidanceUiState must be initialized" }

      clear(state.viewport.id)
      connect(state.viewport.id, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START)
      connect(state.viewport.id, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
      setMargin(state.viewport.id, ConstraintSet.TOP, dpToPx(headerNominalHeightDp(), context))
      connect(state.viewport.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
      connect(state.viewport.id, ConstraintSet.BOTTOM, prompt.id, ConstraintSet.TOP)

      clear(state.googleLogo.id, ConstraintSet.BOTTOM)
      connect(state.googleLogo.id, ConstraintSet.BOTTOM, prompt.id, ConstraintSet.TOP)

      connect(prompt.id, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START)
      connect(prompt.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
    }
  }

  private fun removeFromParentView(view: View?) {
    if (view?.parent != null) {
      (view.parent as ViewGroup).removeView(view)
    }
  }

  private fun dpToPx(dp: Int, context: Context): Int {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        dp.toFloat(),
        context.resources.displayMetrics,
      )
      .toInt()
  }
}

    

Java

/*
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.navigationapidemo.layoutdelegate;

import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
import static androidx.constraintlayout.widget.ConstraintLayout.LayoutParams.MATCH_CONSTRAINT;
import static com.google.android.libraries.navigation.layoutcustomization.NavigationUiButton.ButtonKnownType.COMPASS;

import android.content.Context;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;
import com.google.android.libraries.navigation.layoutcustomization.ActiveGuidanceUiState;
import com.google.android.libraries.navigation.layoutcustomization.AutoHidingVerticalLayout;
import com.google.android.libraries.navigation.layoutcustomization.NavigationLayoutDelegate;
import com.google.android.libraries.navigation.layoutcustomization.NavigationReadyUiState;
import com.google.android.libraries.navigation.layoutcustomization.NavigationUiButton;
import com.google.android.libraries.navigation.layoutcustomization.NavigationUiParent;
import com.google.android.libraries.navigation.layoutcustomization.StyleValues;

/**
 * A sample implementation of {@link NavigationLayoutDelegate} demonstrating a basic,
 * portrait-optimized layout using {@link ConstraintLayout}.
 *
 * <p><b>Understanding the Layout Delegate State Machine:</b> Navigation SDK transitions through
 * distinct states, each calling corresponding lifecycle methods on this delegate:
 *
 * <ul>
 *   <li><b>Navigation Ready:</b> Initiated by {@link #onEnterNavigationReady}. We initialize the
 *       layout here and add non-guidance views, then pass it to {@link NavigationUiParent} as the
 *       navigation layout.
 *   <li><b>Active Guidance (Turn-by-Turn Mode):</b> Initiated by {@link #onEnterActiveGuidance}. We
 *       set up the layout for Active Guidance, adding elements such as the turn card and ETA card.
 *   <li><b>Prompts:</b> Prompts (e.g., incident alerts) may be triggered during Active Guidance
 *       mode and can be added to the layout via {@link #onShowPrompt}.
 * </ul>
 *
 * This class caches its {@link ConstraintSet}s to ensure smooth transitions without needing to
 * recreate or inflate layouts continuously.
 */
public class StandardUiElementsLayoutDelegate extends NavigationLayoutDelegate {
  private final int layoutId;
  private final int buttonsContainerId;

  private ConstraintLayout layout;
  private AutoHidingVerticalLayout buttonsContainer;

  // We cache our ConstraintSet definitions to avoid cloning or rebuilding
  // constraint configurations programmatically on every transition. This optimization
  // keeps UI state switches (such as entering active guidance or popping up prompts) highly
  // performant.
  private ConstraintSet navigationReadyConstraintSet;
  private ConstraintSet activeGuidanceConstraintSet;
  private ConstraintSet activeGuidanceWithPromptConstraintSet;

  private ActiveGuidanceUiState activeGuidanceUiState;

  public StandardUiElementsLayoutDelegate() {
    layoutId = View.generateViewId();
    buttonsContainerId = View.generateViewId();
  }

  @Override
  public void onEnterNavigationReady(
      NavigationUiParent navigationUiParent, NavigationReadyUiState newState) {
    Context context = navigationUiParent.getViewContext();

    // Implementation Tip: For simplicity, this sample instantiates views and constraints
    // programmatically. In a production application, you can safely inflate standard XML
    // layout templates to build your layout hierarchies and define base UI constraints.

    // Create the root layout
    if (layout == null) {
      layout = new ConstraintLayout(context);
      LayoutParams layoutParams = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
      layout.setLayoutParams(layoutParams);
      layout.setId(layoutId);
    }

    // Add the Viewport (REQUIRED):
    // The viewport is an invisible bounding box used by Nav SDK to frame the vehicle
    // chevron and the upcoming route line. We want to position this view such that it avoids
    // being obscured by fully-opaque UI elements (like the turn card or the ETA card).
    removeFromParentView(newState.getViewport());
    LayoutParams viewportLayoutParams = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
    layout.addView(newState.getViewport(), viewportLayoutParams);

    // Add the Google Logo / Re-center Button (REQUIRED):
    // This view displays the Google logo during guidance and may transition into a
    // "Re-center" button if the user scrolls away from the vehicle chevron. It must
    // be added to the view hierarchy in all states.
    removeFromParentView(newState.getGoogleLogo());
    LayoutParams googleLogoLayoutParams = new LayoutParams(MATCH_PARENT, WRAP_CONTENT);
    layout.addView(newState.getGoogleLogo(), googleLogoLayoutParams);

    // Add the container for UI buttons
    if (buttonsContainer == null) {
      // We use AutoHidingVerticalLayout to create an adaptive vertical button container that
      // automatically hides or shows child views based on available screen height.
      buttonsContainer = new AutoHidingVerticalLayout(context);
      buttonsContainer.setId(buttonsContainerId);
    }
    removeFromParentView(buttonsContainer);
    LayoutParams buttonsContainerLayoutParams = new LayoutParams(WRAP_CONTENT, MATCH_CONSTRAINT);
    layout.addView(buttonsContainer, buttonsContainerLayoutParams);

    // Add UI buttons to the container
    for (NavigationUiButton button : newState.getNavigationReadyButtons()) {
      removeFromParentView(button.getView());
      buttonsContainer.addView(button.getView());
    }

    // Build constraint set for Navigation Ready state
    if (navigationReadyConstraintSet == null) {
      navigationReadyConstraintSet = buildNavigationReadyConstraintSet(newState);
    }

    // Apply the constraints
    navigationReadyConstraintSet.applyTo(layout);

    // Set the layout in NavigationUiParent
    navigationUiParent.removeNavigationLayout(layout);
    navigationUiParent.setNavigationLayout(layout);
  }

  private ConstraintSet buildNavigationReadyConstraintSet(NavigationReadyUiState uiState) {
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(layout);

    // Constrain viewport to the edges of its parent
    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START);
    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.TOP,
        ConstraintSet.PARENT_ID,
        ConstraintSet.TOP);
    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.END,
        ConstraintSet.PARENT_ID,
        ConstraintSet.END);
    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.BOTTOM,
        ConstraintSet.PARENT_ID,
        ConstraintSet.BOTTOM);

    // Constrain the logo to the bottom start corner
    constraintSet.connect(
        uiState.getGoogleLogo().getId(),
        ConstraintSet.BOTTOM,
        ConstraintSet.PARENT_ID,
        ConstraintSet.BOTTOM);
    constraintSet.connect(
        uiState.getGoogleLogo().getId(),
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START);

    constrainButtonsToBottomEnd(constraintSet);

    return constraintSet;
  }

  @Override
  public void onLeaveNavigationReady(
      NavigationUiParent navigationUiParent, NavigationReadyUiState oldState) {
    buttonsContainer.removeAllViews();
    layout.removeAllViews();
    navigationUiParent.removeNavigationLayout(layout);
  }

  @Override
  public void onEnterActiveGuidance(
      NavigationUiParent navigationUiParent,
      NavigationReadyUiState oldState,
      ActiveGuidanceUiState newState) {
    activeGuidanceUiState = newState;

    Context context = navigationUiParent.getViewContext();

    // Sizing Guideline: The turn card and ETA card are internally configured to adapt and size
    // themselves dynamically based on the layout width (non-wideMode vs. wideMode). Forcing fixed
    // widths or heights on these elements via layouts is unsupported. Always use WRAP_CONTENT to
    // let the elements determine their optimal proportions.

    // Add the turn card
    removeFromParentView(newState.getTurnCard());
    LayoutParams turnCardLayoutParams = new LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
    layout.addView(newState.getTurnCard(), turnCardLayoutParams);

    // Add the ETA card
    removeFromParentView(newState.getEtaCard());
    LayoutParams etaCardLayoutParams = new LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
    layout.addView(newState.getEtaCard(), etaCardLayoutParams);

    // Remove the Navigation Ready UI buttons
    for (NavigationUiButton button : oldState.getNavigationReadyButtons()) {
      removeFromParentView(button.getView());
    }

    // By adding all buttons to the AutoHidingVerticalLayout, we can easily incorporate the latest
    // set of buttons when upgrading without any code changes required
    for (NavigationUiButton button : newState.getActiveGuidanceButtons()) {
      AutoHidingVerticalLayout.LayoutParams buttonLayoutParams =
          new AutoHidingVerticalLayout.LayoutParams(
              ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

      // Mark critical buttons (such as the compass) as high priority so they are the last to be
      // hidden by AutoHidingVerticalLayout when layout space is limited.
      if (button.getType() == COMPASS) {
        buttonLayoutParams.isHighPriority = true;
      }

      removeFromParentView(button.getView());
      buttonsContainer.addView(button.getView(), buttonLayoutParams);
    }

    // Build constraint set for Active Guidance state
    if (activeGuidanceConstraintSet == null) {
      activeGuidanceConstraintSet = buildActiveGuidanceConstraintSet(context, newState);
    }

    // Apply the constraints
    activeGuidanceConstraintSet.applyTo(layout);
  }

  @Override
  public void onLeaveActiveGuidance(
      NavigationUiParent navigationUiParent,
      ActiveGuidanceUiState oldState,
      NavigationReadyUiState newState) {

    // Remove Active Guidance UI elements
    removeFromParentView(oldState.getEtaCard());
    removeFromParentView(oldState.getTurnCard());
    buttonsContainer.removeAllViews();

    // Add Navigation Ready UI buttons
    for (NavigationUiButton button : newState.getNavigationReadyButtons()) {
      LayoutParams buttonLayoutParams = new LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
      buttonsContainer.addView(button.getView(), buttonLayoutParams);
    }

    navigationReadyConstraintSet.applyTo(layout);
  }

  private ConstraintSet buildActiveGuidanceConstraintSet(
      Context context, ActiveGuidanceUiState uiState) {
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(layout);

    // Constrain turn card to top start corner
    constraintSet.connect(
        uiState.getTurnCard().getId(),
        ConstraintSet.TOP,
        ConstraintSet.PARENT_ID,
        ConstraintSet.TOP);
    constraintSet.connect(
        uiState.getTurnCard().getId(),
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START);

    // Constrain viewport to top of ETA card
    constraintSet.clear(uiState.getViewport().getId());
    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START);
    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.TOP,
        ConstraintSet.PARENT_ID,
        ConstraintSet.TOP);

    // Instead of constraining the viewport's top directly to the bottom of the turn card
    // (which varies in height and would trigger jumpy camera framing updates), we use a fixed
    // nominal height to estimate the height of the turncard.
    constraintSet.setMargin(
        uiState.getViewport().getId(),
        ConstraintSet.TOP,
        dpToPx(StyleValues.headerNominalHeightDp(), context));

    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.END,
        ConstraintSet.PARENT_ID,
        ConstraintSet.END);
    constraintSet.connect(
        uiState.getViewport().getId(),
        ConstraintSet.BOTTOM,
        uiState.getEtaCard().getId(),
        ConstraintSet.TOP);

    constraintSet.clear(uiState.getGoogleLogo().getId(), ConstraintSet.BOTTOM);
    constrainLogoToTopOfEtaCard(uiState, constraintSet);

    constrainEtaCardToBottomStart(uiState, constraintSet);

    constrainButtonsToTopOfEtaCard(context, uiState, constraintSet);

    return constraintSet;
  }

  private static void constrainEtaCardToBottomStart(
      ActiveGuidanceUiState uiState, ConstraintSet constraintSet) {
    constraintSet.connect(
        uiState.getEtaCard().getId(),
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START);
    constraintSet.connect(
        uiState.getEtaCard().getId(),
        ConstraintSet.BOTTOM,
        ConstraintSet.PARENT_ID,
        ConstraintSet.BOTTOM);
  }

  private static void constrainLogoToTopOfEtaCard(
      ActiveGuidanceUiState uiState, ConstraintSet constraintSet) {
    constraintSet.connect(
        uiState.getGoogleLogo().getId(),
        ConstraintSet.BOTTOM,
        uiState.getEtaCard().getId(),
        ConstraintSet.TOP);
  }

  private void constrainButtonsToBottomEnd(ConstraintSet constraintSet) {
    constraintSet.clear(buttonsContainerId, ConstraintSet.BOTTOM);
    constraintSet.clear(buttonsContainerId, ConstraintSet.TOP);
    constraintSet.connect(
        buttonsContainerId, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP);
    constraintSet.connect(
        buttonsContainerId, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM);
    constraintSet.connect(
        buttonsContainerId, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END);
  }

  private void constrainButtonsToTopOfEtaCard(
      Context context, ActiveGuidanceUiState uiState, ConstraintSet constraintSet) {
    constraintSet.clear(buttonsContainerId, ConstraintSet.BOTTOM);
    constraintSet.clear(buttonsContainerId, ConstraintSet.TOP);
    constraintSet.connect(
        buttonsContainerId, ConstraintSet.BOTTOM, uiState.getEtaCard().getId(), ConstraintSet.TOP);
    constraintSet.connect(
        buttonsContainerId, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP);
    constraintSet.connect(
        buttonsContainerId, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END);
    constraintSet.setMargin(
        buttonsContainerId,
        ConstraintSet.TOP,
        dpToPx(StyleValues.headerNominalHeightDp(), context));
  }

  @Override
  public void onShowPrompt(NavigationUiParent navigationUiParent, View newPrompt) {
    Context context = navigationUiParent.getViewContext();

    layout.addView(newPrompt);

    // When a prompt is displayed at the bottom of the screen, we update our active constraints so
    // that the invisible Viewport sits entirely above the prompt. This automatically forces the
    // Nav SDK camera to adjust its zoom and framing so that the route chevron is always visible to
    // the driver.
    activeGuidanceWithPromptConstraintSet =
        buildActiveGuidanceWithPromptConstraintSet(context, newPrompt);
    activeGuidanceWithPromptConstraintSet.applyTo(layout);
  }

  @Override
  public void onChangePrompt(
      NavigationUiParent navigationUiParent, View oldPrompt, View newPrompt) {
    Context context = navigationUiParent.getViewContext();

    activeGuidanceWithPromptConstraintSet.clear(oldPrompt.getId());

    layout.removeView(oldPrompt);
    layout.addView(newPrompt);

    // When a prompt is displayed at the bottom of the screen, we update our active constraints so
    // that the invisible Viewport sits entirely above the prompt. This automatically forces the
    // Nav SDK camera to adjust its zoom and framing so that the route chevron is always visible to
    // the driver.
    activeGuidanceWithPromptConstraintSet =
        buildActiveGuidanceWithPromptConstraintSet(context, newPrompt);
    activeGuidanceWithPromptConstraintSet.applyTo(layout);
  }

  @Override
  public void onHidePrompt(NavigationUiParent navigationUiParent, View oldPrompt) {
    activeGuidanceWithPromptConstraintSet.clear(oldPrompt.getId());

    layout.removeView(oldPrompt);

    activeGuidanceConstraintSet.applyTo(layout);
  }

  private ConstraintSet buildActiveGuidanceWithPromptConstraintSet(Context context, View prompt) {
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(layout);

    // Constrain viewport to top of prompt
    constraintSet.clear(activeGuidanceUiState.getViewport().getId());
    constraintSet.connect(
        activeGuidanceUiState.getViewport().getId(),
        ConstraintSet.START,
        ConstraintSet.PARENT_ID,
        ConstraintSet.START);
    constraintSet.connect(
        activeGuidanceUiState.getViewport().getId(),
        ConstraintSet.TOP,
        ConstraintSet.PARENT_ID,
        ConstraintSet.TOP);
    constraintSet.setMargin(
        activeGuidanceUiState.getViewport().getId(),
        ConstraintSet.TOP,
        dpToPx(StyleValues.headerNominalHeightDp(), context));
    constraintSet.connect(
        activeGuidanceUiState.getViewport().getId(),
        ConstraintSet.END,
        ConstraintSet.PARENT_ID,
        ConstraintSet.END);
    constraintSet.connect(
        activeGuidanceUiState.getViewport().getId(),
        ConstraintSet.BOTTOM,
        prompt.getId(),
        ConstraintSet.TOP);

    // Constrain prompt to bottom start corner
    constraintSet.connect(
        prompt.getId(), ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START);
    constraintSet.connect(
        prompt.getId(), ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM);

    return constraintSet;
  }

  private void removeFromParentView(View view) {
    if (view != null && view.getParent() != null) {
      ((ViewGroup) view.getParent()).removeView(view);
    }
  }

  private static int dpToPx(int dp, Context context) {
    return (int)
        TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
  }
}