Como crear un POPUP WINDOW en Android Studio. Ejemplo con código XML y Java

Hoy vamos a crear un ejemplo de POPUP en Android Studio. Muy simple, con su código XLM y JAVA que podrás copiar y pegar en tu propio proyecto y experimentar con él. Vamos allá.

Aquí el código XLM del MAIN LAYOUT, con un botón y su texto indicativo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="0dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="0dp" />
    <Button
        android:id="@+id/open_popup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Abrir Popup"
        android:textSize="35dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>


Ahora, el XLM del POPUP:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@android:color/background_light">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@android:color/holo_green_dark"
        android:gravity="center"
        android:layout_marginTop="0dp"
        >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_margin="20dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="40dp"
            android:layout_alignParentTop="true"
            android:layout_marginTop="40dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/Info_popup"
                android:id="@+id/textView" />

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_ej_trucos" />
            <Button
                android:id="@+id/id_cerrar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Cerrar" />
        </LinearLayout>
    </RelativeLayout>


En este ejemplo, si lo copiamos y pegamos tal cual, nos encontraremos, que el nombre de la imagen aparecerá en rojo, y es porque no tienes la imagen en la carpeta DRAWABLE. En mi caso, he encontrado un icono de Android y le he puesto este nombre: ic_ej_trucos. Tu puedes escoger la imagen que quieras con el nombre que quieras.

Ahora, el código JAVA, en el MainActivity:


public class MainActivity extends ActionBarActivity {

    Button btn_Abrir_Popup;
    Button btn_Cerrar;
    LayoutInflater layoutInflater;
    View popupView;
    PopupWindow popupWindow;

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


        btn_Abrir_Popup = (Button)findViewById(R.id.open_popup);
        btn_Abrir_Popup.setOnClickListener(new Button.OnClickListener(){

            @Override
            public void onClick(View arg0) {
        layoutInflater =(LayoutInflater)getBaseContext().getSystemService(LAYOUT_INFLATER_SERVICE);
        popupView = layoutInflater.inflate(R.layout.popup, null);
        popupWindow = new PopupWindow(popupView,RadioGroup.LayoutParams.WRAP_CONTENT,
                        RadioGroup.LayoutParams.WRAP_CONTENT);

        btn_Cerrar = (Button)popupView.findViewById(R.id.id_cerrar);
        btn_Cerrar.setOnClickListener(new Button.OnClickListener(){

                    @Override
                    public void onClick(View v) {
                        popupWindow.dismiss();
                    }});

                popupWindow.showAsDropDown(btn_Abrir_Popup, 50, 0);

            }});
    }

Tenemos que llamar el servicio LAYOUT_INFLATER_SERVICE y al método .INFLATE para poder crear el POPUP y llamar a su LAYOUT.

Podemos colocar el POPUP en qualquier posición de la pantalla cuando llamemos a .showAsDropDown ya que nos pedirá el botón el cual llama y las coordenadas en un entero (int) para el eje X y eje Y:

 popupWindow.showAsDropDown(btn_Abrir_Popup, 50, 0);

Este es el resultado de la compilación:

Al dar clic en el botón:

Saludos a tod@s y gracias por la visita!