background

Dialog is a commonly used UI component in Android development. In order to facilitate the display of Dialog boxes, the system provides AlertDialog, which provides a rich API. When using it, you only need to set corresponding properties. But in general, AlertDialog is not used directly because APP Design does not always follow Material Design standards, and the Design style of this common UI component often changes. So typically, the AlertDialog style is customized to suit a variety of design styles.

Custom Dialog

Custom dialogs are typically defined in one of three ways:

  • Set the layout via the setView method provided by the AlertDialog;
  • Inheriting AlertDialog, call setContentView in onCreate to load the layout;
  • Inherit DialogFragment, load the layout in onCreateView;

The specific core code implementation is as follows:

Public View = view.inflate (this, r.layout. dialog_common_layout, null); */ new alertdialog.builder (this).setView(dialogView).show(); Public class CommonDialog extends AlertDialog {public CommonDialog(Context Context) {super(Context); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.dialog_common_layout); /** * findViewById findViewById Public class CommonDialog extends DialogFragment {@nullable @override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { View dialogView = inflater.inflate(R.layout.dialog_common_layout, null); /** * Call dialogView.findViewById to get the corresponding View and set the corresponding value */ return dialogView; }}Copy the code

The first and second methods directly use the Dialog type, which is difficult to control the Dialog lifecycle and prone to WindowManager$BadTokenException. Therefore, it is recommended to use a DialogFragment in order to synchronize the Dialog lifecycle with the Activity. However, when using DialogFragments, it is best not to load the layout directly in onCreateView, as this is equivalent to disusing the system-provided AlertDialog style, which can be difficult to modify if the APP requires the use of system-provided native components. DialogFragment also has an important API, onCreateDialog, which returns a Dialog object, so you can create an AlertDialog and return the corresponding style according to the defined style.

Dialogs are used in many applications, but there are only a few common ones: Prompt dialog box, select dialog box, bottom pop-up box, load box, in order to better style switch, here supports the Material Design Design style (default system style) and custom Design style, only need to set the corresponding style. The style is shown below, the specific source code reference CommonDilaog

Modify the Dialog default style

When using the default dialogs, it is sometimes necessary to change the colors of these views, but AlertDialog does not provide a direct API for setting them.

AlertDialog Title is styled by setting the windowTitle property in the Dialog theme:

<! --> <style name="AlertDialogTitleStyle"> <item name=" Android :textSize">48dp</item> <item name="android:textColor">#ff0000</item> <item name="android:textStyle">bold</item> </style> <! <style name="CommonDialog" parent="Theme.AppCompat.Dialog"> <style name="CommonDialog" parent="Theme. - the Title of the definition of reference style - > < item name = "android: windowTitleStyle" > @ style/AlertDialogTitleStyle < / item > < item name="android:windowBackground">@color/transparent</item> </style>Copy the code

Other views can be obtained by system ID:

MessageViewId: android.R.id.message
PositiveButtonId: android.R.id.button1
NegativeButtonId: android.R.id.button2
Copy the code

First call the show method of Dialog (because Dialog starts loading the layout after calling the show method), and then get the corresponding View to set the style, such as MessageView style modification:

AlertDialog dialog = builder.show();
TextView messageText = dialog.findViewById(android.R.id.message);
messageText.setTextColor(Color.RED);
messageText.setTextSize(20);
Copy the code

Dialog theme

When customizing a Dialog, you may need to define the theme used by the Dialog. Here are some properties commonly used in Dialog themes:

<style name="CommonDialog" parent="Theme.AppCompat.Dialog"> <! - the background mask opacity, backgroundDimEnabled is true effective - > < item name = "android: backgroundDimAmount" > 0.4 < / item > <! - do you need the background mask - > < item name = "android: backgroundDimEnabled" > true < / item > <! <item name=" Android :windowIsFloating">true</item> <! - the minimum width of the dialog the percentage of the total width of the screen - > < item name = "android: windowMinWidthMinor" > 85% < / item > <! <item name="android:windowBackground">@color/transparent</item> </style>Copy the code

Note the windowBackground property: If the Dialog has a background in its custom layout, it can be set to transparent here, otherwise a black border will appear on earlier Versions of Android. If you do not have a background in your custom layout, you can set the windowBackground property to the appropriate Drawable resource.

Of course, there are many more properties in the Dialog theme. But the associated attributes are not aligned. If you need to change the alignment of the Dialog, you can set the LayoutParams parameter of the Dialog after the show method is called. For example, let Dialog appear at the bottom:

WindowManager.LayoutParams params = dialog.getWindow().getAttributes();
params.gravity = Gravity.BOTTOM;
dialog.getWindow().setAttributes(params);
Copy the code

conclusion

When encapsulating system UI components, it is important to consider native styles and use component implementations provided by the system as much as possible. This allows you to switch between different UI styles.