Sunday, 22 November 2015

Material Design theme style alert dialogs

Material design is a complete guide for visual, motion, and interaction design across platforms and devices. By using Material theme you can provide a best look and feel to your application. So now here I am going to create Demo for creating Alert Dialog which will show Material design look and feel. This demo also give same look and feel in below API's by using android.support.v7.app.AlertDialog..

For more information follow Developer Guide.

You could handle click with setOnClickListener(). Add the following line of codes in showAlertDialog in MainActivity.java file.

private void showAlertDialog(){
        AlertDialog.Builder builder =
                new AlertDialog.Builder(this);
        builder.setTitle("Write Title");
        builder.setMessage("This is Alert Dialog for material support");
        builder.setPositiveButton("OK", null);
        builder.setNegativeButton("Cancel", null);
        builder.show();
    }


Activity defining these attributes in AppTheme's style.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

</resources>

See the result given below:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#2196F3</color>
    <color name="colorPrimaryDark">#1565C0</color>
    <color name="colorAccent">#FF4081</color>
</resources>

Now write a code to customize dialog using style. Add below code in your file.
styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <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">#FFCC00</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:background">#5fa3d0</item>
    </style>
</resources>

See your result:




1 comment: