Alertdialog in Material Design

12,665

With the new AppCompat v22.1 you can use the new android.support.v7.app.AlertDialog.

Just use a code like this:

import android.support.v7.app.AlertDialog

AlertDialog.Builder builder =
       new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
            builder.setTitle("Dialog");
            builder.setMessage("Lorem ipsum dolor ....");
            builder.setPositiveButton("OK", null);
            builder.setNegativeButton("Cancel", null);
            builder.show();

And use a style like this:

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

You can use a single style file for all devices.

Share:
12,665
Huang Liang-Syun
Author by

Huang Liang-Syun

Updated on June 25, 2022

Comments

  • Huang Liang-Syun
    Huang Liang-Syun almost 2 years

    i just follow this http://www.laurivan.com/make-dialogs-obey-your-material-theme/ to style my alertdialog in material design style. However, i found out that i still can't style the same as this site, the following is my code and screenshot:

    values-v14/styles.xml:

    <!--
        Base application theme for API 14+. This theme completely replaces
        AppBaseTheme from BOTH res/values/styles.xml and
        res/values-v11/styles.xml on API 14+ devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- API 14 theme customizations can go here. -->
    </style>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowActionBarOverlay">true</item>  
        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@color/colorPrimary</item>
    
        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    
        <item name="android:dialogTheme">@style/MyDialogTheme</item>
        <item name="android:alertDialogTheme">@style/MyDialogTheme</item>
    </style>
    
    <style name="MyDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowCloseOnTouchOutside">false</item>
    </style>
    

    values/color.xml

    <resources>
        <color name="colorPrimaryDark">#3367d6</color>
        <color name="colorPrimary">#4285f4</color>
        <color name="windowBackgroundColor">#eeeeee</color>
        <color name = "transparent">#0000</color>
    </resources>
    

    screenshot: enter image description here

    I want the divider removed and btn is in padding right style, thanks!