Android, General, Java, Programación
0

Toolbar y menus en Android implementado con java.

Implementar una Toolbar y un menú de opciones en Android es una tarea fundamental para mejorar la navegación y la experiencia de usuario (UX). El proceso es muy sencillo y se puede estructurar en tres pasos clave.

Para este tutorial, asumiremos que estás trabajando sobre un proyecto con un diseño básico

A partir de las versiones modernas de Android, la antigua ActionBar nativa ha sido reemplazada por el componente Toolbar de la librería AndroidX, debido a que ofrece mucha mayor flexibilidad de personalización.

Paso 1 Agrega el widget de toolbar a tu layout en la actividad principal

Recuerda iniciar el valor de la propiedad Android: id con el cual luego lo recuperamos posteriormente para inicializar el toolbar en nuestro activy 

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:titleTextColor="@android:color/white" />

Paso 2: Crear el recurso de tipo Menú

Para estructurar los elementos que aparecerán en nuestra barra de herramientas, necesitamos un archivo de recursos de menú.

  1. Haz clic derecho sobre la carpeta res y selecciona New > Android Resource Directory.
  2. En Resource type, elige menu y presiona OK.
  3. Dentro de la nueva carpeta menu, crea un archivo llamado menu1.xml e introduce el siguiente contenido:

Configura también la propiedad Android: id para este recurso y agrega los elementos correspondientes.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_greetings"
        android:icon="@android:drawable/ic_menu_info_details"
        android:title="Saludos"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_factorial"
        android:icon="@android:drawable/ic_menu_compass"
        android:title="Factorial"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_exit"
        android:title="Salir"
        app:showAsAction="never" />
</menu>

Existen varios tipos de elementos de menú en esta ocasión utilizaremos los ítems básicos. cada ítem básico debe tener configurada su propiedad Android: id para implementar el manejo de eventos, además puedes agregarle iconos y configurar la prioridad de visibilidad.

La propiedad app:showAsAction permite definir cómo y cuándo se mostrarán los elementos del menú en la interfaz de usuario. Al controlar la prioridad de visibilidad, decides si un elemento aparece directamente como un botón de acción con icono en la Toolbar o si se oculta dentro del menú desplegable (los clásicos tres puntos verticales o overflow menu).

Los valores principales que puedes asignarle son:

  • never: El elemento nunca se mostrará directamente en la Toolbar. Siempre se mantendrá oculto dentro del menú desplegable de los tres puntos. Es ideal para opciones secundarias o de configuración (como nuestro botón “Salir”).
  • ifRoom: El sistema inteligente de Android verificará si hay espacio físico suficiente en la pantalla del dispositivo. Si hay espacio, mostrará el elemento con su icono directamente en la Toolbar; si la pantalla es estrecha (como en algunos teléfonos en vertical), lo enviará automáticamente al menú desplegable para no saturar la interfaz.
  • always: Fuerza al elemento a mostrarse en la Toolbar en todo momento, sin importar si se superpone con el título u otros botones. Se recomienda usarlo con extrema moderación, únicamente para la acción principal de la pantalla (como un botón de guardar o buscar).
  • withText: Se puede combinar mediante una barra vertical (ej. ifRoom|withText). Le indica al sistema que, si hay espacio, intente mostrar tanto el icono como el texto del título del ítem de forma paralela.

Paso 3: Asigna el toolbar a la vista e implementas los métodos onCreateOptionsMenu y onOptionsItemSelected

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
        // asigna el toolbar
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

    }

Implementación del onCreateOptionsMenu

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu1,menu);
        return true;
    }

Implementación onOptionsItemSelected

@Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        // maneja los eventos del menu
        if ( item.getItemId() == R.id.exit){
            // termina el item
            finish();
            return  true;
        }
        if ( item.getItemId() == R.id.greetings){

            Bundle parameters = new Bundle();
            Intent intent = new Intent(this,Greentings.class);
            startActivity(intent,parameters);
            return true;
        }
        if( item.getItemId() == R.id.factorial){


            Bundle parameters = new Bundle();
            Intent intent = new Intent(this, Factorial.class);
            startActivity(intent,parameters);
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

Post a Comment