Android Popupwindow Elevation Does Not Show Shadow

Android PopupWindow does not show shadows when the elevation is set. It appears to support it from the documentation. I am using 5.0 Lollipop. Creating the popup as follows:

Solution 1:

As answered by an Android developer.

If the inflated view doesn't have a background set, or the popup window itself doesn't have a background set (or has a transparent background) then you won't get a shadow.

which was my case and seems to be yours, since you are not using setBackgroundDrawable.

This worked for me

popupWindow.setBackgroundDrawable(newColorDrawable(Color.WHITE));

I've opened a new issue suggesting that they update the documentation (https://code.google.com/p/android/issues/detail?id=174919)

Solution 2:

For others who visit this answer and missed what the OP already had, you should set the elevation to create a shadow:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    popupWindow.setElevation(20);
}

Depending on what your content view is, you might also need to set the background drawable, although this is not always necessary. If needed you can do as @Maragues suggested:

popupWindow.setBackgroundDrawable(newColorDrawable(Color.WHITE));

To support pre-Lollipop devices you could use a 9-patch or image that includes the shadow within it.

Code

This is the code for the image above.

LayoutInflaterinflater= (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
ViewpopupView= inflater.inflate(R.layout.popup_window, null);
intwidth= LinearLayout.LayoutParams.WRAP_CONTENT;
intheight= LinearLayout.LayoutParams.WRAP_CONTENT;
booleanfocusable=true;
finalPopupWindowpopupWindow=newPopupWindow(popupView, width, height, focusable);
popupView.setOnTouchListener(newView.OnTouchListener() {
    @OverridepublicbooleanonTouch(View v, MotionEvent event) {
        popupWindow.dismiss();
        returntrue;
    }
});

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    popupWindow.setElevation(20);
}

popupWindow.showAtLocation(anyView, Gravity.CENTER, 0, 0);

Note:

The elevation is in pixels when set in code, but usually in dp when set in xml. You should convert a dp value to pixels when setting it in code.

Solution 3:

• setElevation was not showing a shadow, because my container was transparent
• My container was transparent because I needed some padding on each side

Screenshot of the below code

• I made three containers
• Outer most container is transparent
• Next container inside has a Drawable background with the shadow
• Next container holds the actual content
• Min width of the button inside the xml helps dictate the width. Same with the 2nd container's 12dp of padding.

Custom Popup Window class written in Kotlin:

classCustomPopupWindow(
    privateval context: Context
) : PopupWindow(context) {

  init {
    val view = LayoutInflater.from(context).inflate(R.layout.popup_window_layout, null)
    contentView = view

    height = ListPopupWindow.WRAP_CONTENT
    width = ListPopupWindow.MATCH_PARENT
    isOutsideTouchable = true

    setTouchDismissListener()

    // set the background of the second container to the drawable// with the shadow to get our shadow
    contentView.findViewById<LinearLayout>(R.id.outer_content_container).setBackgroundDrawable(context.resources.getDrawable(R.drawable.background_shadow))
  }

  // Add a listener to dismiss the popup Window when someone// clicks outside of itprivatefunsetTouchDismissListener() {
    setTouchInterceptor { _, event ->
      if (event != null && event.action == MotionEvent.ACTION_OUTSIDE) {
        dismiss()
        return@setTouchInterceptortrue
      }
      false
    }
  }

  // this anchor view can be ANY viewfunshow(anchor: View) {

    // Remove the default background that is annoying
    setBackgroundDrawable(BitmapDrawable())

    // Grab the pixel count for how far down you want to put it.// toolbar_height is 56dp for meval yOffSetInPixels = context.resources.getDimensionPixelSize(R.dimen.toolbar_height)

    // Animation to make it appear and disappear like a Dialog
    animationStyle = android.R.style.Animation_Dialog

    // Show it
    showAtLocation(anchor, Gravity.TOP, 0, yOffSetInPixels)
  }
}

• XML for Custom PopupWindow:

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:color/transparent"android:orientation="vertical"><android.support.constraint.ConstraintLayoutandroid:id="@+id/transparent_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:background="@android:color/transparent"android:padding="12dp"><LinearLayoutandroid:id="@+id/outer_content_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/white"android:orientation="vertical"app:layout_constraintBottom_toBottomOf="@+id/transparent_container"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/transparent_container"><LinearLayoutandroid:id="@+id/content_container"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="12dp"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="Header" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center_vertical"android:layout_marginTop="8dp"android:orientation="horizontal"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:paddingEnd="0dp"android:paddingStart="8dp"android:text="Message" /></LinearLayout><TextViewandroid:id="@+id/add_to_bag_button"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="16dp"android:height="48dp"android:background="@color/gray"android:gravity="center"android:minWidth="350dp"android:text="BUTTON"android:textAllCaps="true" /></LinearLayout></LinearLayout></android.support.constraint.ConstraintLayout></LinearLayout>

• Custom Drawable that shows a shadow:

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><!-- Drop Shadow Stack --><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="0dp" /><solidandroid:color="#00CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="0dp" /><solidandroid:color="#10CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="0dp" /><solidandroid:color="#20CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="0dp" /><solidandroid:color="#30CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><item><shape><paddingandroid:bottom="1dp"android:left="1dp"android:right="1dp"android:top="0dp" /><solidandroid:color="#50CCCCCC" /><cornersandroid:radius="3dp" /></shape></item><!-- Background --><item><shape><solidandroid:color="@android:color/white" /><cornersandroid:radius="0dp" /></shape></item></layer-list>

• Using it all:

valpopupWindow= CustomPopupWindow(activity);
popupWindow.show(anyViewInYourActivity);