How to make a popup view appear above a specific section an not above the whole activity-CodePudding

I made a keyboard with a key view. I want a preview to appear above each key of the keyboard without distorting the keyboard layout.

I made the Key view with a constraint layout and two card views:

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <androidx.cardview.widget.CardView
        android:id="@ id/previewCard"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="@ id/letterCard"
        app:layout_constraintEnd_toEndOf="@ id/letterCard"
        app:layout_constraintStart_toStartOf="@ id/letterCard">

            <TextView
                android:id="@ id/previewTextView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:text="A" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@ id/letterCard"
        android:layout_width="match_parent"
        android:layout_height="@dimen/KeyViewHeight"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent">
            <TextView
                android:id="@ id/letterTextView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:minWidth="20dp"
                android:text="A" />

    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

In making the keyboard I created a Linear layout with each key in a row for flexibility and ease of adding another key (if you think there is a better way, I am all ears).

I saw something online about quick action dialog, but I have been unable to implement it. I have also been unable to implement a dialog the will only show on top of each key when it is pressed. THANK YOU!

CodePudding user response：

After reading through android's KeyboardView I found out that PopupWindow was used to show the preview for the keyboard. I implemented it like this:

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

        View parent = (View) keyView.getParent();


        popupWindow.setContentView(popupView);

        popupWindow.setBackgroundDrawable(null);

        int popupPreviewY = parent.getTop();
        int popupPreviewX = keyView.getLeft();


        popupWindow.showAtLocation(keyView, Gravity.NO_GRAVITY, popupPreviewX, popupPreviewY);

The parent is to get the height where the key is. the getTop gets the top relative to the top of the parent

CodePudding user response：

Simply write this kotlin code, it will show popup above given view.

private fun showPopupWindow(anchor: View) {
    PopupWindow(anchor.context).apply {
        isOutsideTouchable = true
        val inflater = LayoutInflater.from(anchor.context)
        contentView = inflater.inflate(R.layout.popup_layout, null).apply {
            measure(
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
            )
        }
    }.also { popupWindow ->
        // Absolute location of the anchor view
        val location = IntArray(2).apply {
            anchor.getLocationOnScreen(this)
        }
        val size = Size(
            popupWindow.contentView.measuredWidth,
            popupWindow.contentView.measuredHeight
        )
        popupWindow.showAtLocation(
            anchor,
            Gravity.TOP or Gravity.START,
            location[0] - (size.width - anchor.width) / 2,
            location[1] - size.height
        )
    }
}