App Tutorial

Bottom Navigation Android: Guida Completa con Java ed Esempi

BottomNavigationView Android Java: Panoramica

La BottomNavigationView Android Java è il componente ufficiale di Material Design per aggiungere una barra di navigazione inferiore alle tue app. In particolare, è adatta quando l’app ha da tre a cinque schermate principali (ad esempio Home, Impostazioni, Profilo), tutte di pari importanza. Quando l’utente tocca una voce della barra, di conseguenza viene mostrato il contenuto collegato, di solito tramite Fragment sostituiti all’interno di un contenitore.

Di seguito trovi un esempio completo di Bottom Navigation, con tutti i file necessari: il menu, il layout principale dell’attività, i layout dei fragment, le classi Java dei fragment e la MainActivity. Nello specifico, il codice è stato riorganizzato e formattato, mantenendo tuttavia intatta la logica originale.

1. File di menu: menu_navigation.xml

In questo file definisci le voci che compaiono nella barra di navigazione inferiore. In particolare, ogni voce deve avere un id, un’icona e un titolo.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_launcher_background"
        android:title="Home" />

    <item
        android:id="@+id/setting"
        android:icon="@drawable/ic_launcher_background"
        android:title="Setting" />

    <item
        android:id="@+id/camera"
        android:icon="@drawable/ic_launcher_background"
        android:title="Camera" />

</menu>
BottomNavigationView Android Java esempio Material Design

2. Layout principale: activity_main.xml

Questo layout contiene un ConstraintLayout con due elementi principali: la BottomNavigationView ancorata in basso e un FrameLayout che funge da contenitore per i fragment. In questo modo, la struttura garantisce una separazione netta tra la barra di navigazione e il contenuto visualizzato.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/menu_navigation" />

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigation"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. Layout dei Fragment

Ogni fragment ha un layout molto semplice: un LinearLayout a schermo intero. Inoltre, ogni layout utilizza un colore di sfondo diverso per distinguere visivamente le schermate.

home_layout.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#CD30C8">

</LinearLayout>

setting_layout.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#2F3CD8">

</LinearLayout>

camera_layout.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#25CC14">

</LinearLayout>

4. Classi dei Fragment Java

Ogni fragment estende Fragment e, nel metodo onCreateView(), effettua l’inflate del relativo layout XML. In questo modo, ogni schermata è completamente indipendente dalle altre.

FragmentHome.java

package com.example.bottomNavigation;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;

public class FragmentHome extends Fragment {

    public FragmentHome() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.home_layout, container, false);
    }
}

FragmentSetting.java

package com.example.bottomNavigation;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;

public class FragmentSetting extends Fragment {

    public FragmentSetting() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.setting_layout, container, false);
    }
}

FragmentCamera.java

package com.example.bottomNavigation;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;

public class FragmentCamera extends Fragment {

    public FragmentCamera() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.camera_layout, container, false);
    }
}

5. Attività principale: MainActivity.java

La MainActivity innanzitutto imposta il layout principale e inizializza la BottomNavigationView. Successivamente, quando l’utente seleziona un elemento del menu, carica il fragment corrispondente nel FrameLayout tramite il metodo loadFragment().

package com.example.bottomNavigation;

import android.view.MenuItem;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationBarView;
import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigation =
                findViewById(R.id.bottomNavigation);

        bottomNavigation.setOnItemSelectedListener(
                new NavigationBarView.OnItemSelectedListener() {

                    @Override
                    public boolean OnNavigationItemSelected(MenuItem item) {

                        switch (item.getItemId()) {

                            case R.id.home:
                                loadFragment(new FragmentHome());
                                break;

                            case R.id.setting:
                                loadFragment(new FragmentSetting());
                                break;

                            case R.id.camera:
                                loadFragment(new FragmentCamera());
                                break;
                        }
                        return true;
                    }
                });
    }

    private void loadFragment(Fragment fragment) {
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.frame_layout, fragment)
                .commit();
    }
}

Prerequisiti per BottomNavigationView Android Java

Prima di implementare la BottomNavigationView, assicurati di avere tutto il necessario. Innanzitutto, hai bisogno di Android Studio (versione recente) e di un progetto Android con SDK minimo API 21 o superiore. Inoltre, è indispensabile aggiungere la dipendenza Material Design nel file build.gradle del modulo app. Questi prerequisiti garantiranno, di conseguenza, la compatibilità e l’accesso a tutti i componenti Material Design necessari.

Dipendenza Material Design per BottomNavigationView Android Java

Per utilizzare la BottomNavigationView, è essenziale aggiungere la dipendenza Material Design. A tal fine, apri il file build.gradle del modulo app e aggiungi la seguente riga nella sezione dependencies: implementation 'com.google.android.material:material:1.9.0' (o la versione più recente disponibile). Dopo aver aggiunto la dipendenza, sincronizza il progetto facendo clic su “Sync Now” che apparirà in alto nell’editor.

Struttura XML della BottomNavigationView Android Java

Struttura XML della BottomNavigationView Android Java

Articoli correlati

Per approfondire tutti i dettagli e le opzioni disponibili di BottomNavigationView Android Java, ti consigliamo di consultare la documentazione ufficiale di BottomNavigationView su Android Developer.