Menú emergente en Android con ejemplo

Experiencias suaves y consistentes para los usuarios En Android, tenemos tres tipos de menús disponibles para definir un conjunto de opciones y acciones en nuestras aplicaciones de Android. Los Menús en aplicaciones android son los siguientes:

• Menú de opciones de Android :
• Menú contextual de Android : que los clics afectan
• Menú emergente de Android:

Entonces, en este artículo, vamos a discutir el menú emergente. Un menú emergente muestra un menú en una ventana emergente anclada a una vista . La ventana emergente se mostrará debajo de la Vista anclada si hay espacio (espacio), de lo contrario, arriba de la Vista. Si cualquier IME (Editor de métodos de entrada) está visible, la ventana emergente no se superpondrá hasta que se toque la Vista (a la que está anclada la ventana emergente). Si toca fuera de la ventana emergente, se cerrará.

Ejemplo

En este ejemplo, vamos a crear un menú emergente anclado a un botón y, al hacer clic, aparecerá el menú emergente y, al tocar el elemento del menú emergente, se mostrará un mensaje Toast . A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

En este paso, agregaremos un botón al archivo de diseño y le daremos una identificación como clickBtn.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <Button
        android:id="@+id/clickBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0F9D58"
        android:text="Click Me"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Antes de continuar, agreguemos algunos atributos de color para mejorar la barra de la aplicación. Vaya a aplicación > res > valores > colores.xml y agregue los siguientes atributos de color. 

<resources>
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#16E37F</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

Paso 3: crear un directorio de menú y un archivo de menú

Primero, crearemos un director de menú que contendrá el archivo de menú. Vaya a aplicación > res > haga clic con el botón derecho en > Nuevo > Directorio de recursos de Android y proporcione el nombre del directorio y el tipo de recurso como menú.

Ahora, crearemos un archivo popup_menu dentro de ese directorio de recursos de menú. Vaya a aplicación > res > menú > haga clic con el botón derecho en > Nuevo > Archivo de recursos de menú y cree un archivo de recursos de menú y asígnele el nombre popup_menu. En el archivo popup_menu, agregaremos elementos de menú. A continuación se muestra el fragmento de código para el archivo popup_menu.xml .

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  
    <item
        android:id="@+id/java"
        android:title="Java" />
  
    <item
        android:id="@+id/kotlin"
        android:title="Kotlin" />
  
    <item
        android:id="@+id/android"
        android:title="Android" />
  
    <item
        android:id="@+id/react_native"
        android:title="React Native" />
  
</menu>

Paso 4: trabajar con el archivo MainActivity.java

En el archivo MainActivity.java , obtendremos la referencia del Botón y lo inicializaremos. Agregue el comportamiento onClick al botón e infle el menú emergente. A continuación se muestra el fragmento de código del archivo MainActivity.java .

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.PopupMenu;
import android.widget.Toast;
  
public class MainActivity extends AppCompatActivity {
  
    Button button;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Referencing and Initializing the button
        button = (Button) findViewById(R.id.clickBtn);
          
          // Setting onClick behavior to the button
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Initializing the popup menu and giving the reference as current context
                PopupMenu popupMenu = new PopupMenu(MainActivity.this, button);
                  
                  // Inflating popup menu from popup_menu.xml file
                popupMenu.getMenuInflater().inflate(R.menu.popup_menu, popupMenu.getMenu());
                popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                        // Toast message on menu item clicked
                        Toast.makeText(MainActivity.this, "You Clicked " + menuItem.getTitle(), Toast.LENGTH_SHORT).show();
                        return true;
                    }
                });
                // Showing the popup menu
                popupMenu.show();
            }
        });
    }
}

Salida: ejecutar en el emulador