Abbiamo tutti incontrato app con una barra di navigazione inferiore. Alcuni esempi popolari includono Instagram, WhatsApp, Facebook ecc . In questo articolo, impareremo come implementare una barra di navigazione inferiore così funzionale nelle app Android.
Perché abbiamo bisogno di una barra di navigazione inferiore?
- Permette all’utente di passare facilmente da un’attività all’altra/frammenti.
- Rende consapevole l’utente delle diverse schermate disponibili nell’app.
- L’utente può controllare su quale schermo si trova in quel momento.
Passaggi per la creazione della barra di navigazione inferiore
Passaggio 1: crea un nuovo progetto Android Studio
Per creare un nuovo progetto in Android Studio, consulta Android – Android Studio | Crea un progetto.
Passaggio 2: aggiunta della dipendenza al file build.gradle(:app)
Utilizzeremo la libreria Material Design di Android, quindi dobbiamo importarla nel file build.gradle(:app) . Ecco la dipendenza che dobbiamo aggiungere:
implementazione("com.google.android.material:material:1.12.0")Passaggio 3: lavorare con il file activity_main.xml
Per questo esempio, crea un’app di base con un FrameLayout e una barra di navigazione inferiore . Il FrameLayout conterrà frammenti che cambieranno man mano che l’utente clicca sugli elementi nella barra di navigazione inferiore . Ecco come appare activity_main.xml :
activity_main.xml:
<?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">
<FrameLayout
android:id="@+id/flFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="75dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:menu="@menu/bottom_nav_menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>Passaggio 4: creazione di un menu per la barra di navigazione inferiore
La barra di navigazione deve contenere alcuni elementi che verranno creati tramite Menu . Per creare un Menu, crea prima una Directory Menu facendo clic con il pulsante destro del mouse sulla directory res , selezionando Nuovo > Directory Risorse Android e selezionando Menu nel campo Tipo di Risorsa .
Per creare un file di risorse del menu , fare clic su app > res > menu (clic con il tasto destro) > Nuovo > File di risorse del menu e rinominarlo bottom_nav_menu.xml .
Ora l’utente può creare tutti gli elementi che desidera nel file bottom_nav_menu.xml . L’utente deve anche creare un’icona per ciascuno di questi elementi. Per creare un’icona, fare clic su app > res > drawable (clic destro) > New > Vector Asset.
Nella finestra che si apre, l’utente può dare all’icona il nome che preferisce, purché non contenga lettere maiuscole . L’utente può selezionare l’icona desiderata cercandola e, una volta completata la ricerca, fare clic su Avanti -> Fine.
Ora aggiungi questi elementi nel file bottom_nav_menu.xml . Ecco come appare il file bottom_nav_menu.xml dopo aver aggiunto gli elementi:
bottom_nav_menu.xml :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/profile"
android:title="Profile"
android:icon="@drawable/person"/>
<item
android:id="@+id/home"
android:title="Home"
android:icon="@drawable/home"/>
<item
android:id="@+id/settings"
android:title="Settings"
android:icon="@drawable/settings"/>
</menu>Passaggio 5: modifica dello stile della barra delle azioni
Poiché utilizziamo la libreria Material Design di Google , dobbiamo modificare lo stile della barra delle azioni per utilizzare la stessa libreria, altrimenti la barra di navigazione inferiore sarà nera e i suoi elementi saranno invisibili. Per modificarlo, accediamo a styles.xml cliccando su app > res > values > themes.xml e modifichiamo il tag di apertura dello stile come segue:
<style name="Base.Theme.Demo" parent="Theme.Material3.DayNight.NoActionBar">Theme.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Base.Theme.Demo" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Customize your light theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="Theme.Demo" parent="Base.Theme.Demo" />
</resources>Passaggio 6: creazione di frammenti da visualizzare
Ora che abbiamo la nostra barra di navigazione inferiore, vorremmo che fosse funzionale, indirizzandoci a un frammento/attività diverso quando si clicca su un elemento. In questo esempio, creiamo un frammento per ogni elemento e passiamo ad esso ogni volta che si clicca sull’elemento corrispondente. Dato che abbiamo creato tre elementi nella barra di navigazione inferiore, creeremo tre frammenti. Per creare un frammento, facciamo clic sull’app (tasto destro del mouse) > Nuovo > Frammento > Frammento (vuoto) . Assegnamo al frammento il nome FirstFragment e al file XML corrispondente il nome fragment_first . Per semplificare le cose, tutti e tre i frammenti conterranno solo una TextView . Tuttavia, possiamo modificarlo come desideriamo nell’app. Ecco come appare il file fragment_first.xml dopo aver aggiunto una TextView :
fragment_first.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Home" />
</FrameLayout>Passaggio 7: lavorare con il file MainActivity
Ora abbiamo tutto ciò che ci serve e, infine, dobbiamo solo scrivere il codice della MainActivity per connettere tutto all’applicazione. Per prima cosa, creiamo una funzione chiamata setCurrentFragment() che accetta un Fragment come argomento e lo imposta nel nostro FrameLayout del file activity_main.xml . Aggiungiamo un listener di clic agli elementi della barra di navigazione inferiore in modo da visualizzare il Fragment corrispondente quando si fa clic su un elemento. Dopo aver aggiunto tutto questo codice, la MainActivity apparirà così:
File MainActivity:
package org.geeksforgeeks.demo;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigationView);
Fragment firstFragment = new FirstFragment();
Fragment secondFragment = new SecondFragment();
Fragment thirdFragment = new ThirdFragment();
setCurrentFragment(firstFragment);
bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.home:
setCurrentFragment(firstFragment);
break;
case R.id.profile:
setCurrentFragment(secondFragment);
break;
case R.id.settings:
setCurrentFragment(thirdFragment);
break;
}
return true;
});
}
private void setCurrentFragment(Fragment fragment) {
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.flFragment, fragment)
.commit();
}
}
