Bottom Navegation

20 de agosto de 2021

Hola a todos bienvenidos, hoy vamos a desarrollar un bottom navigation bar en Android Studio con el lenguaje de programación kotlin. En este proyecto vamos a utilizar los fragmentos para poder desplazarnos entre los diferentes interfaces, al hacer clic en lo iconos que se muestra en la parte inferior.

Descargar

Tecnologías

Android Studio

Es el entorno oficial para el desarrollo de aplicaciones Android, basado en el software IntelliJ IDEA de JetBrains.

Kotlin

Es un lenguaje de programación pragmatico que corre sobre la máquina virtual de Java y Android. También, puede ser compilado a código fuente de Javascript .

Diseño

Paletas de colores

Purple (primary)

Primary

PrimaryVariant

OnPrimary

100 300 500

Green (secondary)

Secondary

SecondaryVariant

OnSecondary

300 500 700

Black

theme-night

400 800 900

White

Background

Componentes

StatusBar
Título (TextView)
Vista superior (FragmentContainerView)
Imagen (ImageView)
Texto (TextView)
BottomNavigationView

Widget BottomNavigationView

Es el componente principal de diseño de la navegación entre vistas, constituido por elementos personalizables entre activos e inactivos.

Vista previa

Código xml

activity_main.xml

						<com.google.android.material.bottomnavigation.BottomNavigationView
						    android:id="@+id/navBottomNavigationView"
						    android:layout_width="match_parent"
						    android:layout_height="wrap_content"
						    android:background="@drawable/ic_bg"
						    android:paddingTop="10dp"
						    android:paddingBottom="10dp"
						    app:itemTextColor="@color/nav_color"
						    app:itemIconTint="@color/nav_color"
						    app:itemIconSize="24dp"
						    app:layout_constraintBottom_toBottomOf="parent"
						    app:layout_constraintEnd_toEndOf="parent"
						    app:layout_constraintStart_toStartOf="parent"
						    app:menu="@menu/nav_menu"/>

Para el color del icono y texto activo.

nav_color.xml

						<item android:state_checked="true" android:color="#FFFFFF"/>

Para el color del icono y texto inactivo.

nav_color.xml

						<item android:state_checked="false" android:color="#D9D9FF"/>

Implementacion

Barra de navegación inferior

Se puede cambiar la vista del nivel superior entre otra, a través del widget BottomNavigationView. Veamos la codificación.

MainActivity.kt

				val navView: BottomNavigationView = findViewById(R.id.navBottomNavigationView)
				val navHostFragment = supportFragmentManager.findFragmentById(R.id.navFragmentContainerView) as NavHostFragment
				val navController = navHostFragment.navController
				navView.setupWithNavController(navController)

Parámetros

navHostFragment: Proporciona un área de diseño, para la navegación autónoma.
navController: Es un conjunto de vistas (Fragments), establecidos en el recurso navigation.

Vista superior

Para poder cambiar entre vistas en una navegacion se requiere del recurso navegation.

nav_view.xml

				<navigation 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"
				    app:startDestination="@+id/navigation_home">
				 
				    <fragment
				        android:id="@+id/navigation_home"
				        android:name="com.example.bottomnavigationkotlin.fragments.HomeFragment"
				        tools:layout="@layout/fragment_home"/>
				 
				    <fragment
				        android:id="@+id/navigation_chat"
				        android:name="com.example.bottomnavigationkotlin.fragments.ChatFragment"
				        tools:layout="@layout/fragment_chat"/>
				 
				    <fragment
				        android:id="@+id/navigation_profile"
				        android:name="com.example.bottomnavigationkotlin.fragments.ProfileFragment"
				        tools:layout="@layout/fragment_profile"/>
				navigation>

Parámetros

startDestination: Muestra la primera vista del nivel superior.
fragment: Vista del nivel superior.
id: Identificación del elemento.
name: Vincula una clase fragmet
layout: Diseño del interfaz.

Yu Developer

Desarrollador de paginas web, aplicaciones Android y proyectos de Internet de las cosas.