Android tip: AlertDialog with Material Design style in pre-Lollipop devices

    With the appearance of Material Design, we - the Android developers - always would like to bring this design style to the pre-Lollipop devices. Appcompat support library was released, it's very helpful with us with this problem.
    In this small tip, I would like to guide about building a AlertDialog with Material Design in Android KitKat and lower by using v7 appcompat library.

Default Material Design Dialog

    Usually, we use with Builder to initializing an alert dialog in Android. For example, see below code:
package info.devexchanges.materialalertdialog;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {

        LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        Button button = new Button(this);
        button.setText("Show AlertDialog");


        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setTitle("Material Style Dialog");
                builder.setPositiveButton("OK", null);
                builder.setNegativeButton("Cancel", null);

    Our Activity contains only a Button and after click, an AlertDialog with familiar style will appear:
    Now, we go to the main story, by change the importing line: import to import and re-run project, we will have a Material Design AlertDialog:
    Important NOTE: In Lollipop devices, AlertDialogs are always in Material Design style.

Styling Material Design style Dialog

    Styling it like other Dialog themes (like Holo theme, Translucent theme,...) by customizing styles.xml:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="alertDialogTheme">@style/AppCompatAlertDialogStyle</item>

    <style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">@color/dialog_button</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:windowTitleStyle">@style/WindowTitleStyle</item>
        <item name="android:background">@color/dialog_background</item>

    <style name="WindowTitleStyle" parent="TextAppearance.AppCompat.Title">
        <item name="android:textColor">@color/dialog_title</item>
        <item name="android:textStyle">bold</item>


<?xml version="1.0" encoding="utf-8"?>
    <color name="colorPrimary">#0aaf0f</color>
    <color name="colorPrimaryDark">#225e1a</color>
    <color name="colorAccent">#FF4081</color>
    <color name="dialog_background">#5fa3d0</color>
    <color name="dialog_button">#f5ef3c</color>
    <color name="dialog_title">#be3c08</color>

    And the output was changed:


    Now it’s over, you’re ready to style your alert dialogs like a pro! Please design something nicer than this ugly rectangle I came up with. Moreover, you can look at 3rd-libraries like material-dialogs, MaterialDialog,... I think they're quite well! As a final word, did I use this AlertDialog style in my app? No, because in my opinion, I feel Holo dialogs theme is best, it looks much better than the Material Design one. :(


Previous post
« Prev Post
Next post
Next Post »