A case of Android to understand the custom Dialog pop-up window

1. Look at the effect first

2. Sample code

fragment_tab2.xml sample code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".Tab2">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#508CFC">

    </LinearLayout>
    <TextView
        android:id="@+id/tab_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="志愿者急救技能线下培训"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginTop="15dp"
        android:layout_marginStart="30dp"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/tab_tv"
        android:layout_marginTop="15dp"
        android:background="@drawable/tab2_plate1"
        android:layout_marginStart="25dp"
        android:layout_marginEnd="25dp"
        android:orientation="horizontal">
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/spanner_tab1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true">
<!--当我们点击这个TextView时，则触发弹窗-->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="全部城市"
                    android:textSize="20sp" />
                <Spinner
                    android:id="@+id/sp_dialog"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:spinnerMode="dialog"/>
            </LinearLayout>

        </RelativeLayout>
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:background="#F3F5F9"/>
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <LinearLayout
                android:id="@+id/spanner_tab2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="全部状态"
                    android:layout_gravity="center"
                    android:textSize="20sp"/>
                <Spinner
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    />
            </LinearLayout>

        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

custom_dialog.xml sample code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/select_background">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">
        <TextView
            android:id="@+id/dialog_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:layout_alignParentStart="true"
            android:text="取消"
            android:focusable="true" />
        <TextView
            android:id="@+id/dialog_ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:layout_alignParentEnd="true"
            android:text="确认"
            android:focusable="true" />
    </RelativeLayout>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="江西"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="北京"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="上海"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="四川"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="湖南"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="河北"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="广东"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="内蒙古"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="山西"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="陕北"
                android:textColor="@color/black"
                android:layout_gravity="center"
                android:layout_margin="10dp"/>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

Change res=>xml=>styles.xml to initialize the default Dialog:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CustomDialog" parent="Theme.AppCompat.Light.Dialog">
        <!-- dialog 背景 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!-- dialog 宽度和高度 -->
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <!--        &lt;!&ndash; dialog 动画 &ndash;&gt;-->
        <item name="android:windowEnterAnimation">@anim/slide_in_bottom</item>
        <item name="android:windowExitAnimation">@anim/slide_out_bottom</item>
        <!-- dialog 标题 -->
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

Create a new anim folder in res, which contains slide_in_bottom.xml and slide_out_bottom.xml pop-up animations.

1.slide_out_bottom.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:duration="500">
    <translate
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:fromXDelta="0%"
        android:toXDelta="0%" />
</set>

1.slide_in_bottom.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:duration="500">
        <translate
            android:fromYDelta="100%"
            android:toYDelta="0%"
            android:fromXDelta="0%"
            android:toXDelta="0%" />
</set>

CustomDialog.java sample code:

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.Gravity;
import android.view.Window;
import android.view.WindowManager;

import androidx.annotation.NonNull;

import com.example.savebytheside.R;

public class CustomDialog extends Dialog {
    public CustomDialog(@NonNull Context context) {
        super(context, R.style.CustomDialog);
        // 设置dialog从底部弹出
        Window window = getWindow();
        if (window != null) {
            window.setGravity(Gravity.BOTTOM);
        }
    }

    public CustomDialog(@NonNull Context context, int themeResId) {
        super(context, themeResId);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.custom_dialog);

        WindowManager.LayoutParams params=getWindow().getAttributes();
        params.width=WindowManager.LayoutParams.MATCH_PARENT;
        getWindow().setAttributes(params);
    }
}

Tab2_Fragment.java sample code:

import android.annotation.SuppressLint;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Spinner;
import com.example.savebytheside.widget.CustomDialog;
import com.example.savebytheside.widget.CustomDialog2;


public class Tab2 extends Fragment{
    public Tab2() {
        // Required empty public constructor
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @SuppressLint("MissingInflatedId")
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        //在onCreateView中设置TextView点击事件监听器，我的Dialog是在fragment里面实现的所以，
        //在onCreateView里设置点击事件监听器，在Activity就在onCreate里设置，照搬照套。
        View view = inflater.inflate(R.layout.fragment_tab2, container, false);
        view.findViewById(R.id.spanner_tab1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                CustomDialog dialog=new CustomDialog(requireContext());
                dialog.show();
            }
        });
        view.findViewById(R.id.spanner_tab2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                CustomDialog2 dialog2=new CustomDialog2(requireContext());
                dialog2.show();
            }
        });
        return view;
    }
}

Ok, done!