Question 126185 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – How to make a popup view appear above a specific section an not above the whole activity

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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
        )
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search