Cómo cambiar el color del indicador activo en Material BottomNavigationView de “You? material3”.

Answer

1. 

   davy.ai

   July 23, 2023 at 12:49 pm

   Hay algunas soluciones potenciales para este problema, dependiendo de la implementación específica de la vista de navegación inferior. Aquí hay algunas sugerencias:

   1. Anular el selector predeterminado para el estado seleccionado de la vista de navegación inferior. Por defecto, el área seleccionada de la vista de navegación inferior se resalta con un dibujo de selector que utiliza el color colorPrimary. Para cambiar este color, puedes crear tu propio dibujo de selector y anular el predeterminado. Aquí hay un ejemplo de un selector que resaltaría el área seleccionada de la vista de navegación inferior con el color #FF4081:

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:state_checked="true" android:drawable="@color/colorAccent"></item>
       <item android:drawable="@android:color/transparent"></item>
   </selector>
   

   Para usar este selector, simplemente configúralo como el itemBackground de tu vista de navegación inferior:

   <com.google.android.material.bottomnavigation.bottomnavigationview android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" app:itembackground="@drawable/custom_bottom_nav_selector" app:menu="@menu/navigation_menu"></com.google.android.material.bottomnavigation.bottomnavigationview>
   

   1. Usa un dibujo de fondo personalizado para el estado seleccionado de la vista de navegación inferior. En lugar de usar un dibujo de selector, podrías crear un dibujo de fondo personalizado que se aplique al elemento seleccionado de la vista de navegación inferior. Aquí hay un ejemplo de un dibujo personalizado que resaltaría el área seleccionada de la vista de navegación inferior con el color #FF4081:

   <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
       <solid android:color="#FF4081"></solid>
       <corners android:radius="4dp"></corners>
   </shape>
   

   Para usar este dibujo, configúralo como el background de la BottomNavigationItemView que representa el elemento seleccionado en tu vista de navegación inferior. Puedes acceder a esta vista usando el método getOrCreateBadge():

   BottomNavigationItemView itemView = bottomNavigationView.getOrCreateBadge(R.id.navigation_home)
           .getItemView();
   itemView.setBackground(ContextCompat.getDrawable(context, R.drawable.custom_bottom_nav_background));
   

   Ten en cuenta que este enfoque requiere un poco más de código, pero te da más control sobre la apariencia del área seleccionada.

   1. Usa el atributo android:navigationBarColor para establecer el color del área seleccionada. Si estás utilizando el nuevo MaterialAppBar del Material Design 3, puedes configurar el color del área seleccionada de la vista de navegación inferior utilizando el atributo android:navigationBarColor. Aquí hay un ejemplo de cómo hacerlo:

   <com.google.android.material.appbar.materialappbar android:layout_width="match_parent" android:layout_height="wrap_content" android:navigationbarcolor="#FF4081" app:menu="@menu/navigation_menu"></com.google.android.material.appbar.materialappbar>
   

   Ten en cuenta que este enfoque solo funciona si estás utilizando MaterialAppBar y puede afectar el color de la barra de navegación del sistema también.

   ¡Esperemos que alguna de estas enfoques resuelva tu problema! Recuerda probar tu aplicación en diferentes dispositivos y versiones de Android para asegurarte de que tus personalizaciones funcionen correctamente en todas las plataformas.

Comments are closed.