A.I, Data and Software Engineering

Material Design — Custom Alert Dialog

M

Google did an amazing job to promote material design. However there is not many articles about how to quickly style the custom dialog. So, we will cover some missing stuff here.

Prerequisites

Add material design dependency in Gradle file:

Make sure your AppTheme inherited from a material theme like:

Customization

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. The contents within a dialog should follow their own accessibility guidelines, such as an icon on a title having a content description via the android:contentDescription attribute set in the MaterialAlertDialog.MaterialComponents.Title.Icon style or descendant.

Create a custom alert dialog theme that inherited from ThemeOverlay.MaterialComponents.MaterialAlertDialog:

Then you can then customize the style of the title, body, button, or other elements by overriding the corresponding item in the alert dialog theme.

For example, customize the text color and font size of the title by creating a materialAlertDialogTitleTextStyle that inherited from MaterialAlertDialog.MaterialComponents.Title.Text:

Examples

Example 1:

Image for post

Change the background colour and define the style for title text, body text, positive and negative button:

To apply the custom theme to the dialog you need to use the MaterialAlertDialogBuilder and pass the theme id to it:

So, if you want to let every dialog use the same theme, then override the materialAlertDialogTheme attribute it in your AppTheme:

Now the context will provide custom dialog theme instead of the default one. You can initialize the dialog builder without the theme parameter:

Example 2:

Image for post

Let the title and icon center and set different colors to title pane and button bar:

Conclusion

MaterialAlertDialog provides a beautiful base style and you can easily customize the style with writing some XML. For more content of Android development please visit this link.

1 comment

A.I, Data and Software Engineering

PetaMinds focuses on developing the coolest topics in data science, A.I, and programming, and make them so digestible for everyone to learn and create amazing applications in a short time.

Pin It on Pinterest

Newsletters

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

Petaminds will use the information you provide on this form to be in touch with you and to provide updates.
%d bloggers like this: