This is the 24 days that I participated in the August Challenge. See the details: August Challenge

In APP development, there is often a requirement that pop-ups pop up from the bottom and can be closed by sliding with your finger.

Introduction to the

BottomSheetDialogFragment is located in the com. Google. Android. The material under the package of a class.

BottomSheetDialogFragment inherited from AppCompatDialogFragment AppCompatDialogFragment inherited from DialogFragment because AppCompatDialogFragment Is a special version of the DialogFragment, so actually BottomSheetDialogFragment is seen as a direct inheritance in DialogFragment.

For DialogFragment information, see this article: Android DialogFragment popup

Through the source code can be found,BottomSheetDialogFragmentI just rewrote itonCreateDialogHere’s a method:To say theBottomSheetDialogFragmentIt’s just a pop-upBottomSheetDialogtheDialogFragmentJust, of course, different fromDialogFragmentAnd this time we’re going to write the UI code inonCreateDialogMethods.

use

As the name implies, in the onCreateDialog method, we create and return a BottomSheetDialog created using the constructor with the parameters Context and resource reference StyleRes.

Let’s write a simple one to see the effect:

BtnBottomDialog

public class BtnBottomDialog extends BottomSheetDialogFragment {

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        if (getActivity() == null) return super.onCreateDialog(savedInstanceState);

        BottomSheetDialog dialog = new BottomSheetDialog(getActivity(), R.style.Theme_MaterialComponents_BottomSheetDialog);

        dialog.setContentView(R.layout.dialog_fragment_layout);

        returndialog; }}Copy the code

MainActivity:

public class MainActivity extends AppCompatActivity {

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

        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new BtnBottomDialog().show(getSupportFragmentManager(), "tag"); }}); }}Copy the code

The MainActivity layout is too simple, so I’ll skip the code. Then look at the results:

It looks like it’s fine, but there are a few potholes to watch out for:

Set the height

The height of the dialog_fragment_layout is 600dp. If you write match_parent directly, it will not work, but you can set the height dynamically. For example, if you want to change the height for different situations, you can do this:

        BottomSheetDialog dialog = new BottomSheetDialog(getActivity(), R.style.Theme_MaterialComponents_BottomSheetDialog);

        View root = LayoutInflater.from(getActivity()).inflate(R.layout.dialog_fragment_layout, null);
        dialog.setContentView(root);
        // Set the width
        ViewGroup.LayoutParams params = root.getLayoutParams();
        params.height = (int) (0.75 *
                getResources().getDisplayMetrics().heightPixels);

        root.setLayoutParams(params);
        return dialog;
Copy the code

We’re still creating a BottomSheetDialog first, but the setContentView is passing in the View instead of the resource ID, because we need to get and change some view parameters.

Make sure you set the layout before you get LayoutParams, otherwise you won’t find them

Reentering the page of the pop-up Dialog from the background will flash

When opening the APP popup, press the HOME button to return to the HOME page. When opening the APP popup again, the effect will pop up again. We can solve this problem by setting the animation of the dialog:

        Window window = dialog.getWindow();
        if(window ! =null) {
            window.setWindowAnimations(R.style.BottomSheet);
        }
Copy the code
    <style name="BottomSheet" parent="Theme.AppCompat.DayNight.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>
Copy the code

Take a look again:

What if you want to pop up an animation somewhere and not somewhere?

We can override the show method:

    @Override
    public void show(@NonNull FragmentManager manager, @Nullable String tag) {
        
        // Set the pop-up animation before show
        super.show(manager, tag);
        // Set to turn off animation after show
    }
Copy the code