NavigationIcon de ActionBar

Te explicamos en detalle cómo ocultar NavigationIcon de ActionBar (Toolbar), con NavigationUI en Android(Java). Vamos a verlo.

En primer lugar, comenzamos planteando el problema con los siguientes fragmentos de código, en la vista xml:

<androidx.coordinatorlayout.widget.CoordinatorLayout ...
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout...>

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Theme.MDBuyRef.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

En segundo lugar, en la Activity:

Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

Tenemos un Toolbar que hemos destinado a funcionar como ActionBar, esta es una práctica de lo más común en las aplicaciones de android, pero… ¿Qué pasa si queremos trabajar con el nuevo componente de Jetpack llamado: Navigation?

Pasa que podemos vincular nuestro Navigation con nuestra Toolbar gracias NavigationUI, pero al hacer esto perderemos el control de lo que pasa con Toolbar, y esto tiene sus ventajas, pues simplifica el trabajo de los programadores en muchas ocasiones.

Configuración básica

El siguiente código es la configuración básica, nos permite cambiar de titulo y proporcionar el NavigationIcon de forma predeterminada al desplazarse hacia algún destino de nuestra app:

NavController navController;

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

activity_main

);    Toolbar toolbar = findViewById(R.id.

toolbar

);
    setSupportActionBar(toolbar);

    

navController = Navigation.findNavController(this, R.id.nav_host_fragment); AppBarConfiguration appBarConfiguration = new AppBarConfiguration
.Builder(navController.getGraph())
.build(); NavigationUI.setupWithNavController(toolbar, navController, appBarConfiguration);

Obligar al usuario

Sin embargo, podemos llegar al escenario donde queremos obligar al usuario a seguir solo ciertos caminos dentro de nuestra navegación, dicho esto técnicamente: restringir el flujo de los destinos que puede tomar el usuario a través de actions, destinos, globalAction o menuId.

En resumen, queremos controlar la navegación por medio de nuestra interfaz personalizada y no por los botones o gestos propios del sistema.

Como podemos apreciar en la imagen, al navegar a un segundo fragment, nuestro NavigationUI automáticamente añade el NavigationIcon en la barra de acciones. Es decir, este no es el comportamiento que deseamos, pues para ello hemos creado un botón de atrás en la parte inferior de nuestra interfaz, entonces el problema a resolver es poder anular u ocultar el NavigationIcon.

Limitar las acciones al usuario

Para lograr esto, debemos limitar las acciones del usuario, proporcionarle la navegación propia de nuestra UI(interfaz de usuario), y prevenir que se ejecute el evento de “regresar” en una app, es relativamente sencillo:

Dentro de la activity, sobreescribimos el método de la siguiente manera:

@Override
public void onBackPressed() {
    // lanzar una advertencia, mensaje, salir de la app, etc...

Con eso podemos prevenir que el usuario navegue por medios que no son propios de nuestra interfaz personalizada de nuestra app. Y con esto llegamos al punto clave de este articulo, cómo ocultar el navigationIcon de una toolbar que trabaja con Navigation.

Sobreescritura del evento automático

La clave esta en sobreescribir el evento automático que cambia el titulo y que proporciona el botón de retroceso en la ActionBar, de modo que podamos anticiparnos y prevenir que este icono de navegación sea dibujado.

A continuación te dejo el código:

navController.addOnDestinationChangedListener((controller, destination, arguments) -> {
    toolbar.setTitle(destination.getLabel());
    toolbar.setNavigationIcon(null);
});

Si ejecutamos de nuevo y navegamos del Fragmen A al Fragment B, obtendremos este resultado:

Claro que el botón de regresar nativo sigue siendo visible, para ello deberíamos poner nuestra app en pantalla completa, pero no es necesario llegar a esas instancias, con sobreescribir onBackPressed() es suficiente, ahí podemos notificarle al usuario que no puede regresar por ese medio, o mejor aún, preguntarle si desea salir de nuestra app, algo así:

Y eso es todo, espero que te resulte útil el ejemplo de cómo ocultar el NavigationIcon de ActionBar (Toolbar) cuando usamos Navigation.

Saludos.

Si quieres tener acceso a los cursos de Alain Nicolás Tello, haz clic aquí. Mientras tanto, también puedes visitar nuestra ruta de aprendizaje android.

Selecciona tu curso de preferencia, y accede al mejor descuento.

Profesional en Material Design/Theming para Android. UX y UI

Experto en Firebase para Android + MVP Curso Completo +30hrs

Por último, si te gusta la información que traemos para ti, dale “Me Gusta” a nuestra página de Facebook. Síguenos a través de nuestro canal de Youtube, donde puedes ver el distinto material que preparamos para ti. Y si lo deseas, puedes suscribirte a nuestra página para recibir un regalo digital que preparamos para ti. Sin duda, una gran oportunidad.