PopUpWindow displays incorrectly

Question

I am trying to replicate this layout of this view (not necessarily the rounded rectangles of the editText boxes, just the widths/layout):

The dimmed background color, the editText's widths. However, I'm getting this:

No transparent background color, the user can access the view behind the popup and the editTexts are shrunk. This popupwindow is being called from a fragment.

1. I do not want the user to be able to touch the calling fragment so I used:

mPopupWindow.setOutsideTouchable(false);

But the user can still access the view behind the popup. And I thought it was because the background hadn't been set yet. So I did this:

Here are the relevant pieces of code (the full code is at the bottom).

2. For the background color:

In my colors.xml I have this:

 < color name="COLOR_50_GREY" >#80636363</color> 

According to this SO question you can create transparency. But I have also tried standard colors too.

I called that color (or the android default colors) with :

mPopupWindow.setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(getContext(), R.color.COLOR_50_GREY)));

but no luck.

3. Shrunk text views. According to this SO question's second answer

I should be able create a weighted LinearLayout using the below (Obvious stuff removed for clarity, full code at the bottom):

 <LinearLayout
    android:orientation="horizontal"
    android:weightSum="5">

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <EditText
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

But as you can see from the screenshot above, the weights are not honored.

Any help?

How to call my popup from in my fragment

private void showCompeletPopup() {

        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View customView = inflater.inflate(R.layout.popup_close_ticket, null);

        mPopupWindow = new PopupWindow(customView, LinearLayoutCompat.LayoutParams.MATCH_PARENT, LinearLayoutCompat.LayoutParams.WRAP_CONTENT);

        // Set an elevation value for popup window call requires API level 21
        if (Build.VERSION.SDK_INT >= 21) {
            mPopupWindow.setElevation(5.0f);
        }

        mPopupWindow.setOutsideTouchable(false);
        mPopupWindow.setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(getContext(), R.color.COLOR_50_GREY)));

        mPopupWindow.showAtLocation(getView(), Gravity.CENTER, 0, 0);
}

Popup windows XML

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/COLOR_LIGHT_GREY"
            android:padding="8dp"
            android:layout_margin="20dp"
            android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:orientation="horizontal"
            android:padding="3dp"
            android:weightSum="5">

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="4dp"
                android:layout_weight="1"
                android:text="TOW TICKET:"
                android:gravity="right|center_vertical"
                android:textAllCaps="true"
                android:textColor="@color/COLOR_BLUE"
                android:textIsSelectable="false"
                android:textStyle="bold"/>


            <EditText
                android:id="@+id/etTowTicketNumber"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:imeOptions="actionDone"
                android:inputType="text"
                android:maxLength="30"
                android:maxLines="1"
                />

            <Button
                android:id="@+id/btnNA"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="right"
                android:layout_weight="1"
                android:background="@color/COLOR_BLUE"
                android:padding="1dp"
                android:text="NA"
                android:textColor="@color/COLOR_WHITE"
                android:textSize="18sp"
                android:textStyle="bold"/>

        </LinearLayout>


//OTHER STUFF TRUNCATED FOR BREVITY 

    </LinearLayout>

</ScrollView>

Answer 1

You need to make custom drawable design for your edit text and set it as edit text background then you can achieve

<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle" >

    <solid android:color="#FFFFFF" />

    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

</shape>

And for giving hint as "Enter Value" use android:hint attribute