Show a floating layout on top of a fragment in android

Question

I have screen with Bottom Navigation View. Now the middle button of the Bottom Navigation view should display a fragment and on top of it another overlay/floating layout. This layout can be closed if I click any other places of the fragment.

I have developed the screen but both are separate. Both I developed using fragment. Here are the main fragment code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:layout_marginTop="60dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp">

        <TextView
            android:id="@+id/search_bar"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent"
            android:textStyle="bold"
            android:textSize="20sp"
            android:gravity="center_vertical"
            android:textColor="#00596e"
            android:text="Consents"/>


        <LinearLayout
            android:id="@+id/selectStartDate"
            android:layout_width="0dp"
            android:layout_weight="3.5"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="end|center"
            android:layout_marginRight="5dp">


            <LinearLayout
                android:id="@+id/calendar_start_date"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:orientation="horizontal"
                android:background="@drawable/edit_bg_profile">

                <TextView
                    android:id="@+id/selected_start_date"
                    android:layout_width="0dp"
                    android:layout_weight="7"
                    android:layout_height="match_parent"
                    android:text="Select Date"
                    android:textSize="14sp"
                    android:gravity="center"
                    android:textColor="@color/black"
                    android:textAllCaps="false"
                    />
                <ImageView
                    android:layout_width="0dp"
                    android:layout_weight="3"
                    android:padding="5dp"
                    android:layout_height="match_parent"
                    android:src="@mipmap/terms_and_conditions"/>

            </LinearLayout>
        </LinearLayout>



        <LinearLayout
            android:id="@+id/selectEndDate"
            android:layout_width="0dp"
            android:layout_weight="3.5"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="end|center"
            android:layout_marginLeft="5dp">


            <LinearLayout
                android:id="@+id/calendar_end_date"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:orientation="horizontal"
                android:background="@drawable/edit_bg_profile">

                <TextView
                    android:id="@+id/selected_end_date"
                    android:layout_width="0dp"
                    android:layout_weight="7"
                    android:layout_height="match_parent"
                    android:text="Select Date"
                    android:textSize="14sp"
                    android:gravity="center"
                    android:textColor="@color/black"
                    android:textAllCaps="false"
                    />
                <ImageView
                    android:layout_width="0dp"
                    android:layout_weight="3"
                    android:padding="5dp"
                    android:layout_height="match_parent"
                    android:src="@mipmap/terms_and_conditions"/>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_marginTop="10dp">

        <Button
            android:id="@+id/btn_videos"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:text="Videos"
            android:textColor="@color/white"
            android:textAllCaps="false"
            android:textSize="16sp"
            android:layout_marginRight="5dp"
            android:background="@drawable/send_button_bg"/>

        <Button
            android:id="@+id/btn_photos"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:text="Photos"
            android:textAllCaps="false"
            android:textSize="16sp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/send_button_grey_bg"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL_Videos"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="visible">

        <GridView
            android:id="@+id/gridViewVideos"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:numColumns="2"
            android:padding="10dp"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/LL_Photos"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="gone">

        <GridView
            android:id="@+id/gridViewPhotos"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:numColumns="2"
            android:padding="10dp"/>

    </LinearLayout>
</LinearLayout>

And the code for the floating layout is here:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="8"
    android:background="#80ffffff"
    >
    <!--android:background="@android:color/transparent"-->

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:orientation="horizontal"
    android:layout_gravity="bottom"
    android:layout_marginBottom="40dp"
    android:layout_marginRight="40dp"
    android:layout_marginLeft="40dp">

    <LinearLayout
        android:id="@+id/ll_camera_image"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7"
            android:gravity="center">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:padding="15dp"
            android:background="@drawable/round_dark_bg"
            android:src="@mipmap/image"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:gravity="center"
            android:orientation="vertical">

            <com.google.android.material.card.MaterialCardView
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:card_view="http://schemas.android.com/apk/res-auto"
                style="@style/Theme.MaterialComponents.Light"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                card_view:cardElevation="10dp"
                card_view:cardCornerRadius="6dp"
                android:background="@drawable/bg_text_white">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:textSize="16sp"
                    android:gravity="center"
                    android:textColor="@color/black"
                    android:text="@string/image"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:background="@color/white"/>

            </com.google.android.material.card.MaterialCardView>

        </LinearLayout>



    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_camera_video"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7"
            android:gravity="center">

Answer 1

等待大神答复