Android Academy · Lezione

Navigazione inferiore e schede

Implementi la navigazione tra più sezioni con BottomNavigationView collegato a NavController e schede scorrevoli con TabLayout, ViewPager2 e TabLayoutMediator.

Navigazione inferiore e schede è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 5 di 5. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 5 lezioni in totale.

Pattern di navigazione

Due pattern comuni per la navigazione principale nelle app Android:

Navigazione inferiore — per 3–5 destinazioni principali. Sempre visibile. Ideale per sezioni di pari importanza (ad esempio Home, Ricerca, Profilo).
Schede — per contenuti correlati all'interno di una schermata (ad esempio Tutti / Attivi / Completati). Spesso utilizzate con ViewPager2 per supportare lo scorrimento.

Layout di BottomNavigationView

Aggiunga BottomNavigationView e una FragmentContainerView al layout della 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>

Elementi del menu di navigazione inferiore

Definisca gli elementi in res/menu/bottom_nav_menu.xml. L'ID di ogni elemento deve corrispondere all'ID di destinazione del grafo di navigazione:

<!-- 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>

Collegamento al NavController

Colleghi BottomNavigationView al NavController in 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
            }
        }
    }
}

Badge nella navigazione inferiore

Mostri i badge delle notifiche sugli elementi della navigazione inferiore:

// 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 mostra schede orizzontali, generalmente utilizzate con ViewPager2 per contenuti scorribili:

<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

Crei un adapter che fornisca un fragment per la posizione di ogni scheda:

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

Colleghi ViewPager2 e TabLayout con 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

Schede con icone

Aggiunga icone alle schede di 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 delle pagine fuori schermo

Per impostazione predefinita, ViewPager2 conserva in memoria solo la pagina adiacente. Aumenti offscreenPageLimit se le schede devono rimanere attive durante il passaggio da una all'altra:

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

Navigazione inferiore o schede: quale scegliere

Guida rapida alla scelta del pattern corretto:

Utilizzi la navigazione inferiore quando: ci sono 3–5 destinazioni principali con scopi diversi (Home, Ricerca, Notifiche, Profilo)
Utilizzi le schede quando: deve filtrare o categorizzare lo stesso tipo di contenuto (attività Tutte / Attive / Archiviate)
Combini entrambe: navigazione inferiore per le sezioni principali, schede all'interno di una sezione per i sottofiltri

Verifica rapida

Quale classe collega un TabLayout a un ViewPager2 e imposta le etichette delle schede?

Riepilogo: navigazione inferiore e schede

Navigazione tra più sezioni, nel modo corretto:

BottomNavigationView — 3–5 destinazioni di pari importanza, gli ID del menu corrispondono agli ID delle destinazioni del grafo di navigazione
setupWithNavController() — cambio automatico delle schede e back stack
Badge con getOrCreateBadge()
TabLayout + ViewPager2 — viste scorribili e filtrate dello stesso contenuto
TabLayoutMediator — collega i due componenti e imposta le etichette

Prossimo argomento: test delle unità con JUnit per mantenere affidabile il codice.

Domande Frequenti

La lezione «Navigazione inferiore e schede» è gratuita?

Sì — il testo completo di «Navigazione inferiore e schede» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 5 lezioni in totale.

Cosa imparerò in «Navigazione inferiore e schede»?

Implementi la navigazione tra più sezioni con BottomNavigationView collegato a NavController e schede scorrevoli con TabLayout, ViewPager2 e TabLayoutMediator. Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 5 di 5.

Quanto tempo richiede la lezione «Navigazione inferiore e schede»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Android Academy