Android - Pop up a View on top of another View

Question

Suppose I have a Button like what is in the following:

I want once this button is clicked a ImageView(popup message) appears in the top of this button, something like this:

But I do not know how put a View as an overlay on top of another View, Just I know this can be achieved by FrameLayout . Please suppose I want to embed this capability into the Button (in the other phrases I want to create a custom button with a method called showPopup(...) like Textview's setError(...))
Can any one please help me? Thanks

Answer 1

How about taking a look at the Quick Action Dialog?

It is an old article (We're talking Android 2.2 territory), but should still work for the latest devices and OS.

The example uses a contextual popup with buttons, but should be easily modifiable to just show text or whatever you want. There is an example further in that shows use alongside a button.

Answer 2

You can also use RelativeLayout. you can define as on top of other views that way. Notice that if you define two views, the last one is stacked on the first

http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

Answer 3

You can use a popupWindow

PopupWindow popupWindow = new PopupWindow(context);
        LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View popupView = layoutInflater.inflate(R.layout.popup_view_layout, null);


        Imageview popupImage = popupView.findViewById(R.id.imageView);


        popupWindow.setContentView(popupView);

        popupWindow.setBackgroundDrawable(null);

        int popupY = button.getTop() - button.getHeight();
        int popupX = button.getLeft();


        popupWindow.showAtLocation(keyView, Gravity.NO_GRAVITY, popupX, popupY);

The popup_view_layout can look like this

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns: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">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:minWidth="20dp"
                android:visibility="gone"
                app:srcCompat="@drawable/yourImage" />
        
</FrameLayout>

For more information click here or check this question's answers.