Skip to content

WaitDialog&TipDialog_en

Kongzue edited this page May 17, 2024 · 4 revisions

🌐 View 简体中文文档 | 繁體中文文檔

⌛ WaitDialog and TipDialog

WaitDialog and TipDialog

A blocking wait dialog that displays basic circular waiting animations and progress display animations. It is a singleton, meaning the transition from the wait state (WaitDialog) to the tip state (TipDialog) is seamless. You can freely choose to display success/warning/error messages after the wait is over, with seamless animation transitions.

Please note, the background of WaitDialog and TipDialog is opposite to light/dark mode, to stand out.

Displaying a Simple Wait Dialog

Use the following code to display a wait dialog:

WaitDialog.show("Please Wait!");

WaitDialog will continue to run after display until a TipDialog pops up or it is closed using the .dismiss() method.

Here's a simple example where the program automatically closes the WaitDialog after 2 seconds:

WaitDialog.show("Please Wait!");
new Handler(Looper.getMainLooper()).postDelayed(new Runnable() {
    @Override
    public void run() {
        WaitDialog.dismiss();
    }
}, 2000);

To change the text of an already displayed WaitDialog, simply re-execute WaitDialog.show("other text");.

Displaying a Simple Tip Dialog

TipDialog has three styles: SUCCESS, WARNING, and ERROR.

TipDialog

TipDialog is actually a proxy class for WaitDialog. There will only be one instance of WaitDialog from start to close, so executing TipDialog during WaitDialog's display interrupts the wait dialog and transitions to a tip dialog. TipDialog can also be displayed independently.

The transition to the tip dialog is accompanied by line animation. If WaitDialog is displaying, executing the TipDialog display command may not immediately show the tip dialog; it may wait for the animation to seamlessly transition to TipDialog.

Use the following code to display a completed wait dialog:

TipDialog.show("Success!", WaitDialog.TYPE.SUCCESS);

There are also warning and error states to choose from:

// Warning
TipDialog.show("Warning!", WaitDialog.TYPE.WARNING);
// Error
TipDialog.show("Error!", WaitDialog.TYPE.ERROR);

The tip dialog automatically disappears after 1.5 seconds by default. You can customize the display time (milliseconds) with this method:

TipDialog.show("Success!", WaitDialog.TYPE.SUCCESS, 3500);

Displaying a Progress Tip Dialog

Progress tips can visually display current process progress with a ring.

Because of accuracy requirements, progress tips do not have transition animations when they start.

Use the following code to display a progress dialog:

WaitDialog.show("Loading...", 0.1f);

The second floating-point argument is the progress, ranging from 0f to 1f. It smoothly transitions from the previous progress to the next set progress and can also decrease in reverse.

🚧 Implementing a Traditional Progress Bar Dialog

image

To display a traditional dialog progress bar (e.g., for downloading updates), please refer to 《Frequently Asked Questions: Q: How to implement a traditional progress bar dialog?》

Lifecycle Callbacks

WaitDialog and TipDialog can set lifecycle event callbacks with .setDialogLifecycleCallback(...):

TipDialog.show("Success!", WaitDialog.TYPE.SUCCESS)
        .setDialogLifecycleCallback(new DialogLifecycleCallback<WaitDialog>() {
    @Override
    public void onShow(WaitDialog dialog) {
        // Callback when the dialog starts
    }
    @Override
    public void onDismiss(WaitDialog dialog) {
        // Callback when the dialog closes
    }
});

WaitDialog/TipDialog also supports Lifecycle. You can use .getLifecycle() to get the Lifecycle object.

You can also use the methods .onShow(DialogXRunnable) and .onDismiss(DialogXRunnable) to handle lifecycle transactions, for example:

WaitDialog.show("please wait...")
        .onShow(new DialogXRunnable<WaitDialog>() {
            @Override
            public void run(WaitDialog dialog) {
                //WaitDialog show!
            }
        })
        .onDismiss(new DialogXRunnable<WaitDialog>() {
            @Override
            public void run(WaitDialog dialog) {
                //WaitDialog dismiss!
            }
        });

Back Button Listener

WaitDialog and TipDialog can set an event handler for when the user presses the system back button by using .setDialogLifecycleCallback(...):

WaitDialog.show("Please Wait!").setOnBackPressedListener(new OnBackPressedListener() {
    @Override
    public boolean onBackPressed() {
        toast("Back pressed");
        return false;
    }
});

From the above code, it's evident that the onBackPressed() method has a return value. When return true, it will automatically close the wait/tip dialog.

Custom Layout

WaitDialog and TipDialog also support custom layouts, used in the same way as the basic message dialog:

WaitDialog.show("Please Wait!").setCustomView(new OnBindView<WaitDialog>(R.layout.layout_custom_view) {
            @Override
            public void onBind(WaitDialog dialog, View v) {
            
            }
        });

After enabling a custom layout, the animations and layout of WaitDialog and TipDialog themselves will be hidden.

Custom Entry and Exit Animations

For custom animations of dialogs shown once, use the following method:

WaitDialog.show("Please wait...")
        // Set entry and exit animation resources
        .setAnimResId(R.anim.anim_dialogx_bottom_enter, R.anim.anim_dialogx_bottom_exit);

To customize animation files, refer to: Default dialog launch animation file and Default dialog close animation file

Additionally, apart from .setAnimResId(enterAnimResId, exitAnimResId), there are .setEnterAnimResId(enterAnimResId) and .setExitAnimResId(enterAnimResId) methods available. These methods only affect the dialog displayed once.

You can also set the duration of the entry animation with setEnterAnimDuration([long]) and the exit animation with .setExitAnimDuration([long]).

Global animation modifications for WaitDialog and TipDialog:

You can modify the global animations for WaitDialog directly through static properties:

// Set global PopTip entry animation
WaitDialog.overrideEnterAnimRes = R.anim.anim_dialogx_bottom_enter;
// Set global PopTip exit animation
WaitDialog.overrideExitAnimRes = R.anim.anim_dialogx_bottom_exit;
// Set global PopTip entry animation duration
WaitDialog.overrideEnterDuration = 1000;
// Set global PopTip exit animation duration
WaitDialog.overrideExitDuration = 1000;

Modifications through custom themes

You can also fully customize the default animation effects of the global dialog boxes by referring to the custom theme interface. For details, please consult 《Custom DialogX Themes》

Please note that these three settings have different priorities: The priority of modifications to animations for a single dialog display > Global modifications for WaitDialog, TipDialog animations > Custom theme modifications.

Additional Methods

// Force a refresh of the interface
.refreshUI();

// Close the dialog
.dismiss();

// Get the dialog instance object, you can customize the Dialog features more deeply through this method
.getDialogImpl()

// Get the custom layout instance
.getCustomView()
    
// Set the background color, forcibly dye the dialog background. Note that the parameter is an int type color value, not an R.color index
.setBackgroundColor(ColorInt);

// Set dialog corner radius (will crop content display)
.setRadius(float px)

// Check if it is currently displayed
.isShow()

// Front dialog box display hierarchy
.bringToFront()

// Specify the level of dialog display
.setThisOrderIndex(int)

TipDialog provides haptic feedback when showing tips, controlled by the following property:

// Use haptic feedback
DialogX.useHaptic = true;

Background Mask

WaitDialog supports modifying the background mask for added flexibility. To set the background mask, you can use the following code:

WaitDialog.show(...).setMaskColor(colorInt);

Please note, the parameter is a ColorInt value. You can use Color.parseColor("#4D000000") to set a HEX color value, or getResources().getColor(R.color.black30) to set a color resource value.

Animation Transition

By default, when using themes with Material animations, there is a waiting time from wait state to tip state (success, warning, error) to complete the animation transition, with the maximum duration depending on the progress of the current waiting animation. If you want to remove the animation

transition effect for a faster response, you can use NoArticulatedProgressView to replace the default waiting tip animation:

When setting the DialogX theme, please override overrideWaitTipRes settings:

DialogX.globalStyle = new MaterialStyle(){
    @Override
    public WaitTipRes overrideWaitTipRes() {
        return new WaitTipRes() {
            @Override
            public ProgressViewInterface overrideWaitView(Context context, boolean light) {
                return new NoArticulatedProgressView(context);  // Important!
            }
        };
    }
};

NoArticulatedProgressView is a built-in component, just import import com.kongzue.dialogx.util.views.NoArticulatedProgressView; to use it.

Clone this wiki locally