BottomNavigationView facilita a los usuarios explorar y cambiar entre vistas de nivel superior con un solo toque. Debe haber un mínimo de 3 vistas de nivel superior y un máximo de 5. Si los destinos son más de 5, utilice el cajón de navegación . Cuando el usuario toca el icono, cambiará la vista de nivel superior en consecuencia. En una aplicación de reproductor de música para cambiar entre Inicio, Álbum y Radio , se puede usar. La aplicación Google plus usa este widget para cambiar entre diferentes vistas. Instagram usa BottomNavigationView para cambiar entre Feeds, Buscar, agregar, Me gusta y Perfil. Así es como se ve un BottomNavigationView .
Algunas ventajas y desventajas de BottomNavigationView son:
Ventajas
- Se trata de destinos de nivel superior a los que se puede acceder desde cualquier lugar de la aplicación.
- Es un componente de diseño de materiales.
- Fácil de usar e implementar.
Desventajas
- Se usa solo cuando tenemos solo de tres a cinco Destinos.
- Solo se puede utilizar con móviles y tabletas.
- La longitud de las etiquetas de texto debe ser menor.
- Debe usarse cuando el usuario pasará más del 90% del tiempo en una aplicación en la misma ventana.
- Usar con TabLayout puede causar confusión al usuario.
Acercarse
- Agregue la biblioteca de soporte en el archivo build.gradle y agregue una dependencia en la sección de dependencias. Esta biblioteca tiene el widget incorporado para la vista de navegación inferior, por lo que a través de esta biblioteca se puede agregar directamente.
implementación ‘com.google.android.material:material:1.3.0-alpha03’
- Ahora cree un nuevo directorio de recursos de Android . Haga clic derecho en la carpeta res y seleccione Directorio de recursos de Android. Asegúrese de seleccionar el tipo de recurso como un menú . Ahora cree el archivo bottom_menu.xml y agregue el siguiente código. En este archivo, agregamos el título, la identificación y el icono de nuestro menú para BottomNavigationView . menú_inferior.xml
XML
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/algorithm" android:title="Algorithm" android:icon="@drawable/ic_algorithm"/> <item android:id="@+id/course" android:title="Course" android:icon="@drawable/ic_course"/> <item android:id="@+id/profile" android:title="Profile" android:icon="@drawable/ic_account"/> </menu>
- Cree un AlgorithmFragment haciendo clic con el botón derecho en el paquete Java, seleccione nuevo -> Fragmento (en blanco) .
- Siga los pasos anteriores para CourseFragment y LoginFragment .
- Ahora agregue el siguiente código en el archivo AlgorithmFragment.xml . Aquí se agrega un TextView al diseño.
- fragmento_algoritmo.xml
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=".Fragments.AlgorithmFragment" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Algorithm" android:textSize="30sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
- Ahora agregue el siguiente código en el archivo CourseFragment.xml . Aquí se agrega un TextView al diseño.
- fragmento_curso.xml
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=".Fragments.AlgorithmFragment" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Course" android:textSize="30sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
- Ahora agregue el siguiente código en el archivo fragment_profile.xml . Aquí se agrega un TextView al diseño.
- fragmento_perfil.xml
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=".Fragments.AlgorithmFragment" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Algorithm" android:textSize="30sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
- Ahora agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregamos BottomNavigationView a nuestro diseño.
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/bottom_navigation" /> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_alignParentBottom="true" android:layout_gravity="bottom" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_menu" android:background="@color/colorPrimary" app:itemIconTint="@android:color/white" app:itemTextColor="@android:color/white"/> </RelativeLayout>
- Ahora agregue el siguiente código en el archivo MainActivity.java . En este archivo, agregamos OnNavigationItemSelectedListener que ayuda a navegar entre los fragmentos. Cambiará el fragmento cuando el usuario toque el icono.
Java
import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import android.os.Bundle; import android.view.MenuItem; 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 bottomNav = findViewById(R.id.bottom_navigation); bottomNav.setOnNavigationItemSelectedListener(navListener); // as soon as the application opens the first // fragment should be shown to the user // in this case it is algorithm fragment getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, new AlgorithmFragment()).commit(); } private BottomNavigationView.OnNavigationItemSelectedListener navListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { // By using switch we can easily get // the selected fragment // by using there id. Fragment selectedFragment = null; switch (item.getItemId()) { case R.id.algorithm: selectedFragment = new AlgorithmFragment(); break; case R.id.course: selectedFragment = new CourseFragment(); break; case R.id.profile: selectedFragment = new ProfileFragment(); break; } // It will help to replace the // one fragment to other. getSupportFragmentManager() .beginTransaction() .replace(R.id.fragment_container, selectedFragment) .commit(); return true; } }; }
Producción:
Publicación traducida automáticamente
Artículo escrito por madhavmaheshwarimm20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA