Configurar un toolbar con botón de navegación personalizado (Java)

Jaiber Uribe
29 nov, 2023
Si quieres tener el famoso botón de navegación (flecha hacia atrás) en tu App Android, no es necesario implementar la Navigation, ni AppBar, ni cosas por el estilo, lo puedes hacer sólo usando un Toolbar y personalizándolo a tu gusto, incluso puedes hacer que sólo aparezca en determinados fragments y cambiar el icono por uno de tu preferencia, en cada uno de ellos.

Normalmente, cuando queremos implementar un sistema de navegación sencillo en una app de Android, lo que hacemos es recurrir a Navigation, lo que implica, al menos desde mi punto de vista, más trabajo y más código. Sin embargo, esta no es la única manera de lograr tener una navegación fluida, ni una app que muestre una barra de título, con menú y con un botón de navegación que aparezca cada vez que nos movemos hacia un nuevo fragment o una nueva activity.

Configurar un toolbar con botón de navegación personalizado

Crear y configurar un Toolbar

Para lograr esto, lo primero que debes hacer, es crear un toolbar y activarlo en tu MainActivity; como siempre hay varias formas de hacer esto, pero la que me parece más simple, es ir a la layout de la activity y crearlo ahí, para que se adhiera mejor al resto del contenido, un ejemplo sencillo sería el siguiente:


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:background="?attr/colorPrimary"        
        app:layout_constraintBottom_toTopOf="@id/host_fragment"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="RtlHardcoded">
    </androidx.appcompat.widget.Toolbar>

Luego tendrás que activar dicho toolbar, en el apartado onCreate de tu MainActivity y, lo podrás hacer de varias formas, aquí te explico dos muy sencillas. Esto es para aplicaciones hechas en Java, pero no difiere mucho a lo que hay que hacer en Kotlin:


//Este es el método más común
Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

//Este método es si usas Binding en tu app y lo tienes activado en tu Activity
setSupportActionBar(binding.toolbar);

Ya con eso tendrás un toolbar que aparecerá en toda tu app y, que mostrará el título que le hayas puesto, ahora lo que sigue es mostrar el botón de navegación, lo cual difiere si lo quieres mostrar en todos tus fragments o, sólo en algunos. Si lo que quieres es mostrarlo en todos, deberás pegar el siguiente código en MainActivity, debajo del anterior:


//Con esto activas el botón de navegación.     
Objects.requireNonNull(getSupportActionBar()).setDisplayHomeAsUpEnabled(true);

//Con esto personalizas el botón, poniendo el icono de tu preferencia      
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_home_24);

Si lo que quieres es que dicho botón sólo aparezca en los fragments distintos al de inicio, ignora el código anterior y, en cada uno de los fragments que quieres que aparezca tu botón de navegación, pega el siguiente código:


// Instancia a MainActivity
MainActivity main =(MainActivity)requireActivity();

// Invoca el botón de navegación
Objects.requireNonNull(main.getSupportActionBar()).setDisplayHomeAsUpEnabled(true);

// Permite personalizar el botón de navegación
// Si no quieres cambiar el icono, puedes ignorar esta línea de código
main.getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_arrow_back_24);

Configurar el comportamiento del botón de navegación del toolbar

Por defecto, este botón no hace ninguna acción, por lo que tendremos que configurarle una acción para cada vez que reciba un clic. El proceso es muy parecido a la configuración de cualquier botón. Sólo debes hacerlo en tu MainActivity, para que funcione en cada uno los fragments. A continuación, te muestro un ejemplo:


binding.toolbar.setNavigationOnClickListener(v -> {

//Con esto, el botón te enviará siempre al HomeFragment
            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.host_fragment, HomeFragment.class, null)
                    .setReorderingAllowed(true)
                    .addToBackStack(null)
                    .commit();
        });

Puedes cambiar el código a tu gusto, sólo cambiando lo que está dentro de las llaves, ya sea que quieras que el botón envíe a otro lugar o, que simplemente funcione igual que el botón hacia atrás, que viene por defecto en Android. También podrías hacer que cierre por completo la aplicación.

Configurar el tema de la aplicación para el Toolbar

Además de lo anterior, se requiere que modifiques el tema de tu app, para que se vea el toolbar y se vea bien. Para eso debes ir al apartado de Themes y agregar algunas líneas. Primero que todo, deberás usar un tema, que sea NoActionBar, luego, podrás agregar colores de fondo y de texto a tu gusto, por ejemplo:


<!-- Color de fondo-->
<item name="appBarLayoutStyle">@color/principal </item>
<!--Color del titulo -->
<item name="titleTextColor">@color/white</item>
<!--Color del icono del botón de navegacion y del icono del menú -->
<item name="colorControlNormal">@color/white</item>

Ten en cuenta que esas configuración variará de acuerdo con el tema que elijas para tu app, ya que en algunos casos, el toolbar tomará el color que hayas configurarlo como "colorPrimary", mientras que en otros podrás modificarlo de manera independiente. 

Si agregas un menú superior a tu app, también aparecerá dentro del toolbar; del mismo modo, podrás modificar a tu gusto el toolbar para que muestre el logo o algunos otros botones, todo depende de lo que quieras hacer.

Siguiente Anterior