Android Academy · Aula

Navegação inferior e abas

Implemente a navegação entre várias seções com BottomNavigationView conectado ao NavController e abas deslizáveis com TabLayout, ViewPager2 e TabLayoutMediator.

Navegação inferior e abas é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 5 de 5. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 5 aulas no total.

Padrões de navegação

Dois padrões comuns de navegação principal em aplicativos Android:

Navegação inferior — para 3 a 5 destinos principais. Sempre visível. Ideal para seções com a mesma importância (por exemplo, Início, Pesquisa e Perfil).
Guias — para conteúdo relacionado dentro de uma tela (por exemplo, Todas / Ativas / Concluídas). Frequentemente usadas com ViewPager2 para permitir deslizes.

Layout do BottomNavigationView

Adicione BottomNavigationView e um FragmentContainerView ao layout da sua Activity:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/navHostFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:navGraph="@navigation/nav_graph"
        app:defaultNavHost="true" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu" />

</LinearLayout>

Itens do menu de navegação inferior

Defina os itens em res/menu/bottom_nav_menu.xml. O ID de cada item deve corresponder ao ID de um destino do grafo de navegação:

<!-- res/menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeFragment"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/searchFragment"
        android:icon="@drawable/ic_search"
        android:title="Search" />
    <item
        android:id="@+id/profileFragment"
        android:icon="@drawable/ic_person"
        android:title="Profile" />
</menu>

Conectando ao NavController

Conecte BottomNavigationView ao NavController em onCreate():

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navHost = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        val navController = navHost.navController

        binding.bottomNav.setupWithNavController(navController)

        // Hide bottom nav on detail screens:
        navController.addOnDestinationChangedListener { _, destination, _ ->
            binding.bottomNav.visibility = when (destination.id) {
                R.id.detailFragment -> View.GONE
                else -> View.VISIBLE
            }
        }
    }
}

Badges na navegação inferior

Mostre badges de notificação nos itens da navegação inferior:

// Show a numbered badge:
val badge = binding.bottomNav.getOrCreateBadge(R.id.homeFragment)
badge.number = 5
badge.isVisible = true

// Show dot badge (no number):
val dotBadge = binding.bottomNav.getOrCreateBadge(R.id.searchFragment)
dotBadge.isVisible = true

// Remove badge:
binding.bottomNav.removeBadge(R.id.homeFragment)

TabLayout

TabLayout exibe guias horizontais, normalmente usadas com ViewPager2 para conteúdo que pode ser percorrido com deslizes:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

ViewPager2 + FragmentStateAdapter

Crie um adaptador que forneça um fragmento para cada posição de guia:

class TasksPagerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {

    override fun getItemCount() = 3

    override fun createFragment(position: Int): Fragment = when (position) {
        0 -> AllTasksFragment()
        1 -> ActiveTasksFragment()
        2 -> CompletedTasksFragment()
        else -> throw IllegalStateException("Unknown tab $position")
    }
}

TabLayoutMediator

Conecte ViewPager2 e TabLayout usando TabLayoutMediator:

// In Fragment.onViewCreated():
val adapter = TasksPagerAdapter(this)
binding.viewPager.adapter = adapter

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    tab.text = when (position) {
        0 -> "All"
        1 -> "Active"
        2 -> "Done"
        else -> ""
    }
}.attach()

// Disable swipe if needed:
binding.viewPager.isUserInputEnabled = false

Guia com ícones

Adicione ícones às guias do TabLayout:

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    when (position) {
        0 -> {
            tab.text = "Home"
            tab.setIcon(R.drawable.ic_home)
        }
        1 -> {
            tab.text = "Search"
            tab.setIcon(R.drawable.ic_search)
        }
        2 -> {
            tab.text = "Profile"
            tab.setIcon(R.drawable.ic_person)
        }
    }
}.attach()

Limite de páginas fora da tela

Por padrão, ViewPager2 mantém na memória apenas a página adjacente. Aumente offscreenPageLimit se as suas guias precisarem permanecer ativas ao alternar entre elas:

// Keep 2 pages on each side alive:
binding.viewPager.offscreenPageLimit = 2

// Note: FragmentStateAdapter saves and restores state for off-screen
// fragments even when offscreenPageLimit is 1 (default).
// Only increase this when you need views (not just state) to survive.

Navegação inferior ou guias: como escolher

Um guia rápido para escolher o padrão adequado:

Use a navegação inferior quando: houver de 3 a 5 destinos principais com finalidades diferentes (Início, Pesquisa, Notificações, Perfil)
Use guias quando: estiver filtrando ou categorizando o mesmo tipo de conteúdo (todas / ativas / tarefas arquivadas)
Combine os dois: use a navegação inferior para as seções principais e guias dentro de uma seção para aplicar subfiltros

Verificação rápida

Qual classe conecta um TabLayout a um ViewPager2 e define os rótulos das guias?

Recapitulação: navegação inferior e guias

Navegação entre várias seções feita da maneira correta:

BottomNavigationView — de 3 a 5 destinos com a mesma importância; os IDs do menu correspondem aos IDs dos destinos do grafo de navegação
setupWithNavController() — alternância automática de guias e pilha de navegação
Badges com getOrCreateBadge()
TabLayout + ViewPager2 — visualizações filtráveis do mesmo conteúdo, percorríveis com deslizes
TabLayoutMediator — conecta os dois e define os rótulos

A seguir: testes unitários com JUnit para manter seu código confiável.

Perguntas Frequentes

A aula “Navegação inferior e abas” é grátis?

Sim — o texto completo de “Navegação inferior e abas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 5 aulas no total.

O que vou aprender em “Navegação inferior e abas”?

Implemente a navegação entre várias seções com BottomNavigationView conectado ao NavController e abas deslizáveis com TabLayout, ViewPager2 e TabLayoutMediator. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 5 de 5.

Quanto tempo leva a aula “Navegação inferior e abas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Android Academy