CODEWITHSUNDEEP
androidmaterial-designandroid-alertdialogandroid-dialog
Huang Liang-Syun
Huang Liang-Syun

Reputation: 139

Alertdialog in Material Design

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!

Upvotes: 4

Views: 12949

Answers (2)

tsw
tsw

Reputation: 1

The best solution I have found for styling the dialog is to include the properties in your styles.xml as you have, also set a transparent color (in colors.xml) being sure to include the full #AARRGGBB:

<color name="transparent">#00000000</color>

Then also make sure to add the theme to your dialog layout:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme">
        <TextView
            android:id="@+id/dialog_info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:layout_marginBottom="4dp"
            android:text="Dialog Text"/>
    </LinearLayout>

Note: you should set as parent of the "MyDialogTheme" (in your example) to the parent of "Theme.AppCompat.Light.Dialog"

Following the section "Passing Events Back to the Dialog's Host" in the developers guide here: Link

making sure to override both onAttach() and onCreateDialog() in the class for your dialog fragment.

note, you do "not" have to make your main activity extend FragmentActivity, you can extend AppCompatActivity and still include in the activity class the library (for API 11+):

android.app.DialogFragment instead of android.support.v4.app.DialogFragment

Although your screen shot is showing a date picker dialog, the above works for simple (and most used) alerts and/or dialogs. In the documentation link I have above, they provide more information specific to date and time pickers.

Upvotes: -1

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364391

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.

Upvotes: 10

Related Questions