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 android.app.AlertDialog with Builder to initializing an alert dialog in Android. For example, see below code:

MainActivity.java

package info.devexchanges.materialalertdialog;

import android.app.AlertDialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

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

        setContentView(button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setTitle("Material Style Dialog");
                builder.setCancelable(true);
                builder.setMessage(getResources().getString(R.string.lorem_ipsum));
                builder.setPositiveButton("OK", null);
                builder.setNegativeButton("Cancel", null);
                builder.show();
            }
        });
    }
}

    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 android.app.AlertDialog to import android.support.v7.app.AlertDialog 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:

styles.xml

<resources>

    <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>

    <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>

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

</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <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>
</resources>

    And the output was changed:

Conclusions

    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. :(

Author : Hong Thai

Share