How show cardview as a dilouge while bluring the background

Question

I have a card view with 2 radio buttons I want to show it as a dialogue

I want to achieve multiple things

1. Showing card view as a dialogue
2. blurring the background layout while showing the dialog
3. I have 2 radio buttons (only one is selectable) I want that after selecting one of them the dialogue will disappear but not immediately at least there should be a short delay so the user can see the selection of the radio button

Note:- If you want more references of the code please tell me I will update the question as you can find I dint include the fragment_home java file so the question doesn't get long and confusing

Here is the layout

sort_image.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_gravity="center"
    android:backgroundTint="@color/grey"
    app:cardCornerRadius="20dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/sort_textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="@font/roboto"
            android:text="Sort by"
            android:textAlignment="center"
            android:textColor="@color/lite_grey"
            android:textSize="25sp" />

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/divider_line_sort_by"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_below="@id/sort_textView"
            android:layout_marginStart="10dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="10dp"
            android:backgroundTint="@color/lite_grey"
            app:cardCornerRadius="50dp" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true">

            <TextView
                android:id="@+id/latest_sort_textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:layout_marginTop="30dp"
                android:fontFamily="@font/roboto"
                android:text="Latest"
                android:textAlignment="center"
                android:textColor="@color/lite_grey"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/most_popular_sort_textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/latest_sort_textView"
                android:layout_alignParentStart="true"
                android:layout_centerInParent="true"
                android:layout_marginStart="30dp"
                android:layout_marginTop="25sp"
                android:fontFamily="@font/roboto"
                android:text="Most Popular"
                android:textAlignment="center"
                android:textColor="@color/lite_grey"
                android:textSize="25sp" />

            <RadioGroup
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true">

                <RadioButton
                    android:id="@+id/latest_sort_radio_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="25sp" />

                <RadioButton
                    android:id="@+id/most_popular_sort_radio_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp" />

            </RadioGroup>

        </RelativeLayout>


    </RelativeLayout>

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

fragment_home.xml // This layout contains the text which I want that when pressed I open the dialogue and also this is the fragment/layout which I want to blur when showing the dialogue

Note:- only included the necessary code of this layout

<com.google.android.material.card.MaterialCardView
                android:id="@+id/sort"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_marginEnd="5dp"
                android:layout_marginBottom="5dp"
                android:layout_toStartOf="@id/divider_line"
                android:backgroundTint="@color/black"
                android:elevation="6dp"
                android:paddingBottom="10dp"
                android:textAlignment="center"
                app:cardCornerRadius="10dp">

                <TextView
                    android:id="@+id/sort_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="5dp"
                    android:fontFamily="@font/roboto"
                    android:text="@string/sort"
                    android:textAlignment="center"
                    android:textColor="@color/white"
                    android:textSize="17sp"
                    android:textStyle="bold" />

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

Answer 1

I think you need to use dialog fragment. You can read more about that in official documentation https://developer.android.com/guide/fragments/dialogs