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. Os produtos e recursos em pré-GA são cobertos 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 de layout para controlar a hierarquia de visualização e o posicionamento na tela das visualizações fornecidas pelo Google e das suas próprias visualizações de negócios personalizadas.

Em vez de adicionar visualizações personalizadas em 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 cartão de conversão, o cartão de 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 esse framework para posicionar informações comerciais personalizadas, como status do pedido ou instruções de retirada, com precisão na tela, evitando que as visualizações se sobreponham.

Como funciona a personalização de layout

A personalização de 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 seu delegado e fornece os componentes de IU disponíveis para esse estado específico.

Para oferecer uma experiência do usuário integrada e otimizada, esse framework estabelece uma separação clara de responsabilidades entre o app e o SDK. Use o delegado de layout para personalizar o seguinte:

• Crie a hierarquia de visualização:escolha exatamente quais componentes do Google e visualizações de negócios personalizadas serão adicionados à tela para cada estado da interface.
• Posicionar cada elemento:defina âncoras de tela, margens e posicionamento de layout precisos. 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 na tela:decida se as visualizações personalizadas vão flutuar 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 trajeto 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 ambiente 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 serão compatíveis e podem não se comportar como esperado quando um delegado personalizado estiver ativo.
• Não modifique as estruturas de visualização interna:não use métodos como findViewById() para percorrer ou modificar as hierarquias de visualização dos componentes fornecidos pelo Google (como o cartão de conversão ou o cartão de HEC). Como essas hierarquias de visualização interna são detalhes de implementação subjacentes, elas estão sujeitas a mudanças nas versões do SDK. Modificá-los pode fazer com que o layout seja corrompido durante futuras atualizações do SDK.

Compatibilidade com APIs legadas

Para um comportamento de layout confiável ao usar um delegado de layout personalizado, evite usar as seguintes APIs legadas baseadas em slot, que estão planejadas para descontinuação. Para migrar um app, 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 as visualizações diretamente ao ConstraintLayout ou a outro grupo de visualizações.
removeCustomControl(View)	Remover 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 do NavigationLayoutDelegate.
removeOnNavigationUiChangedListener(...)	Gerencie as transições de estado do layout diretamente usando o delegado.
addPromptVisibilityChangedListener(...)	Use os callbacks de comando do NavigationLayoutDelegate (como onShowPrompt()).
removePromptVisibilityChangedListener(...)	Gerencie a lógica de exibição de solicitações diretamente usando o delegado.
setCompassEnabled(boolean)	Localize a bússola em getNavigationReadyButtons() ou getActiveGuidanceButtons().

Lista de verificação do Essentials

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. Confira os exemplos de implementação de código a seguir para verificar o momento exato da configuração da estrutura do seu aplicativo. A inicialização do delegado depois da criação da interface aciona uma 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ções personalizado, como um ConstraintLayout, para armazenar os elementos de interface personalizados e as visualizações fornecidas pelo Google.

• Anexar visualizações obrigatórias:adicione 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 as 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:

  • Virar card
  • Cartão HEC
  • Solicitações recebidas
  • Logotipo do Google
  • Widget de velocidade

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

• Limpar ao sair do estado:chame navigationView.removeNavigationLayout() e remova as visualizações personalizadas dentro dos callbacks onLeave para evitar vazamentos de memória e estados de interface sobrepostos.

• Evite APIs de layout legadas:não chame APIs baseadas em slots descontinuadas, como setCustomControl() ou setHeaderEnabled(), enquanto um delegado personalizado estiver ativo. O SDK pode ignorar essas chamadas legadas quando um delegado personalizado é 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 de View) necessários para 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 seu delegado:

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

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

Independentemente da fase de navegação atual, é necessário incluir, posicionar e manter os seguintes componentes do Google visíveis na sua 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 vai se transformar 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()): um 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 trajeto ativa. Posicione a janela de visualização para que ela cubra a área aberta e desobstruída da tela, evitando sobreposições opacas, como páginas inferiores personalizadas.

Componentes prontos para navegação

Durante o estado de 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ção flutuante configuradas para o mapa de base (geralmente apenas o botão de bússola). Como o Google pode adicionar ou reordenar botões em versões futuras do SDK, evite usar índices de lista fixos. Em vez disso, faça uma iteração na lista, leia o tipo de cada botão comparando getType() com ButtonKnownType.COMPASS e extraia a visualização física chamando getView(). Os botões exatos nessa lista são diferentes dos 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 do cabeçalho principal que mostra as próximas instruções de manobra, medições de distância e orientação de faixa. Coloque-a na parte de cima do layout para estabelecer uma hierarquia de navegação familiar e ancorar as visualizações personalizadas ao redor dela.

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

• getTripProgressBar():uma barra de progresso vertical que mostra ao motorista a distância percorrida no trajeto 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 seu contêiner personalizado.

• getSpeedWidget():um controle flutuante para o velocímetro e os limites de velocidade informados. 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 e evite sobreposições espaciais.

• getActiveGuidanceButtons():uma lista expandida de visualizações de ações flutuantes para o estado de orientação ativa (normalmente incluindo a bússola e o botão de alerta de incidente). 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, é possível posicioná-los de forma independente ou usar 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 de baixo de getTurnCard(). Em vez disso, restrinja a janela de visualização à parte de cima da visualização mãe e defina a margem superior como StyleValues.headerNominalHeightDp(), conforme mostrado no exemplo de implementação.

Componentes do comando dinâmico

Os avisos, como alertas de incidentes ou de radares, são acionados de forma independente durante a navegação ativa.

Quando uma solicitação está pronta para ser exibida, o SDK chama o callback onShowPrompt() do delegado e transmite uma visualização newPrompt. O delegado é responsável por posicionar esse aviso sobre o layout (normalmente fixado na borda inferior do contêiner do mapa).

Como o aviso de entrada cobre a parte de baixo 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 lidar com o tamanho da tela e o modo amplo

Para lidar com 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:muda para uma variante de layout de formato amplo quando o mapa é grande 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 do dispositivo 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 de 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.

Noções básicas sobre 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 personalizados e manter o centro do mapa livre para o motorista. Como os componentes fornecidos pelo Google, como o cartão de conversão 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 exato momento em que os componentes do Google são atualizados.

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

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

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

Verificação do 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 do app no modo paisagem. Essa abordagem protege o layout contra eventos de ciclo de vida do sistema Android, como a recriação padrão da Activity, que ignoram totalmente 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 o estilo do Google

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

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

Os espaçamentos e as 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 este 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.
 */

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

    

Para ver o exemplo de código completo ou conhecer outras implementações de delegados de layout, consulte os exemplos de delegados de layout no GitHub. Você também pode conferir os arquivos de origem individuais deste exemplo no GitHub:

• Kotlin: StandardUiElementsLayoutDelegateKt.kt
• Java: StandardUiElementsLayoutDelegate.java