Welcome. This library was designed to solve a personal problem with my apps, I use AppCompat to use Material theming on versions of Android below Lollipop. However, AppCompat doesn't theme AlertDialogs to use Material on pre-Lollipop. This library allows you to use a consistently Material themed dialog on all versions of Android, along with specific customizations that make it easier to brand the dialog.
The code you see below is also found in the sample project. You can download a APK of the sample here: https://github.com/afollestad/material-dialogs/blob/master/sample/sample.apk
It's also available on Google Play: https://play.google.com/store/apps/details?id=com.afollestad.materialdialogssample
Here's a basic example that mimics the dialog you see on Google's Material design guidelines
(here: http://www.google.com/design/spec/components/dialogs.html#dialogs-usage). Note that you can
always substitute literal strings and string resources for methods that take strings, the same goes
for color resources (e.g. titleColor and titleColorRes).
new MaterialDialog.Builder(this)
.title("Permissions")
.content("This app determines your phone's location and shares it with Google in order to serve personalized alerts to you. This allows for a better overall app experience.")
.theme(Theme.LIGHT) // the default is light, so you don't need this line
.positiveText(R.string.accept) // the default is 'Accept'
.negativeText(R.string.decline) // leaving this line out will remove the negative button
.build()
.show();
On Lollipop (API 21), the Material dialog will automatically match the positiveColor (which is used on the
positive action button) to the colorAccent attribute of your styles.xml theme.
Dialogs don't even need a title:
If the action text is too long, it will stack the buttons as also seen on Google's Material design guidelines.
new MaterialDialog.Builder(this)
.title("Permissions")
.content("This app determines your phone's location and shares it with Google in order to serve personalized alerts to you. This allows for a better overall app experience.")
.positiveText("Turn on speed boost")
.negativeText("No thanks")
.build()
.show();
You can specify neutral text in addition to the positive and negative text. On smaller screens, it will cause the buttons to be stacked due to limited space. On a larger screen, however, it will show the neutral action on the far left as seen on the Design Guidelines (here: http://www.google.com/design/spec/components/dialogs.html#dialogs-actions).
new MaterialDialog.Builder(this)
.title("Permissions")
.content("This app determines your phone's location and shares it with Google in order to serve personalized alerts to you. This allows for a better overall app experience.")
.positiveText("Accept")
.negativeText("Decline")
.neutralText("More info")
.build()
.show();The result on a tablet:
To know when the user selects a button, you set a callback. There's three variations of the callback for the action buttons:
new MaterialDialog.Builder(this)
.callback(new MaterialDialog.SimpleCallback() {
@Override
public void onPositive(MaterialDialog dialog) {
}
});
new MaterialDialog.Builder(this)
.callback(new MaterialDialog.Callback() {
@Override
public void onPositive(MaterialDialog dialog) {
}
@Override
public void onNegative(MaterialDialog dialog) {
}
});
new MaterialDialog.Builder(this)
.callback(new MaterialDialog.FullCallback() {
@Override
public void onPositive(MaterialDialog dialog) {
}
@Override
public void onNegative(MaterialDialog dialog) {
}
@Override
public void onNeutral(MaterialDialog dialog) {
}
});You can choose which one to use based on which actions you make visible, and which actions need to trigger an event. If you pass text to an action, it will become visible (not including the positive action which is always visible and will default to 'Accept' unless you make the dialog a list dialog). You don't need a callback to make actions visible. But the dialog will not dismiss when an action is pressed if no callback is set for it.
Creating a list dialog only requires passing in an array of strings. The callback (itemsCallback) is
also very simple.
new MaterialDialog.Builder(this)
.title("Social Networks")
.items(new String[]{"Twitter", "Google+", "Instagram", "Facebook"})
.itemsCallback(new MaterialDialog.ListCallback() {
@Override
public void onSelection(MaterialDialog dialog, int which, String text) {
}
})
.build()
.show();
Single choice list dialogs are almost identical to regular list dialogs. The only difference is that
you use itemsCallbackSingleChoice to set a callback rather than itemsCallback. That signals the dialog to
display radio buttons next to list items.
This also makes it so that an action button has to be pressed, tapping a list item won't dismiss the dialog. Note that this means the positive action button callback will be overridden if you specify one.
new MaterialDialog.Builder(this)
.title("Social Networks")
.items(new String[]{"Twitter", "Google+", "Instagram", "Facebook"})
.itemsCallbackSingleChoice(new MaterialDialog.ListCallback() {
@Override
public void onSelection(MaterialDialog dialog, int which, String text) {
}
})
.positiveText("Choose")
.build()
.show();The result:
Multiple choice list dialogs are almost identical to regular list dialogs. The only difference is that
you use itemsCallbackMultiChoice to set a callback rather than itemsCallback. That signals the dialog to
display check boxes next to list items, and the callback can return multiple selections.
This also makes it so that an action button has to be pressed, tapping a list item won't dismiss the dialog. Note that this means the positive action button callback will be overridden if you specify one.
new MaterialDialog.Builder(this)
.title("Social Networks")
.items(new String[]{"Twitter", "Google+", "Instagram", "Facebook"})
.itemsCallbackMultiChoice(new MaterialDialog.ListCallbackMulti() {
@Override
public void onSelection(MaterialDialog dialog, Integer[] which, String[] text) {
}
})
.positiveText("Choose")
.build()
.show();The result:
Custom views are very easy to implement. To match the dialog show here: http://www.google.com/design/spec/components/dialogs.html#dialogs-behavior
new MaterialDialog.Builder(this)
.title("Google Wifi")
.positiveText(R.string.accept)
.customView(R.layout.custom_view)
.positiveText("Connect")
.positiveColor(Color.parseColor("#03a9f4"))
.build()
.show();Where custom_view.xml contains a LinearLayout of TextViews, an EditText, and a CheckBox. No padding
is used on the top, bottom, left, or right of the root view, that's all stock to the dialog.
MaterialDialog inserts your view into a ScrollView and displays a divider above the action buttons,
so don't wrap your custom view in a scroll view and don't worry about it being too long or needing a divider.
However, you should avoid making any content that wouldn't belong in a dialog because of its size.
Before Lollipop, theming AlertDialogs was basically impossible without using reflection and custom drawables. Since KitKat, Android became more color neutral but AlertDialogs continued to use Holo Blue for the title and title divider. Lollipop has improved even more, with no colors in the dialog by default other than the action buttons. This library makes theming even easier. Here's a basic example:
final int materialRed500 = Color.parseColor("#D50000");
new MaterialDialog.Builder(this)
.title("Permissions")
.content("This app determines your phone's location and shares it with Google in order to serve personalized alerts to you. This allows for a better overall app experience.")
.positiveText("Accept")
.negativeText("Decline")
.positiveColor(materialRed500)
.titleAlignment(Alignment.CENTER)
.titleColor(materialRed500)
.theme(Theme.DARK)
.build()
.show();The result:
To see more colors that fit the Material design palette, see this page: http://www.google.com/design/spec/style/color.html#color-color-palette
If you need to access a View in the custom view set to a MaterialDialog, you can use getCustomView() of
MaterialDialog. This is especially useful if you pass a layout resource to the Builder.
MaterialDialog dialog = //... initialization via the builder ...
View view = dialog.getCustomView();If you want to get a reference to one of the dialog action buttons (e.g. to enable or disable buttons):
MaterialDialog dialog = //... initialization via the builder ...
View negative = dialog.getButton(DialogAction.NEGATIVE);
View neutral = dialog.getButton(DialogAction.NEUTRAL);
View positive = dialog.getButton(DialogAction.POSITIVE);If you want to update the title of a dialog action button (you can pass a string resource ID in place of the literal string, too):
MaterialDialog dialog = //... initialization via the builder ...
dialog.setActionButton(DialogAction.NEGATIVE, "New Title");--
Coming soon