Develop Reference

Theme.MaterialComponents does not change font of dialog title

I am using the material components theming for our app. Now we want a custom font, which I managed to apply almost everywhere with the theme below, which uses the various textAppearance... attributes defined by material components.
This works very well, and the theme is also applied to the AlertDialogs almost everywhere -- message text and buttons have the custom font, buttons have the correct accent colors etc.
Only the dialog title keeps the Roboto font, no matter what.
<!-- externalized font name for easier change -->
<string name="font_regular" translatable="false" tools:ignore="ReferenceType">#font/atma_regular</string>
<style name="Theme.App" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="android:textColorSecondary">#color/textColorSecondary</item>
<item name="textAppearanceHeadline1">#style/TextAppearance.App.Button</item>
<item name="textAppearanceHeadline2">#style/TextAppearance.App.Button</item>
<item name="textAppearanceHeadline3">#style/TextAppearance.App.Button</item>
<item name="textAppearanceHeadline4">#style/TextAppearance.App.Button</item>
<item name="textAppearanceHeadline5">#style/TextAppearance.App.Button</item>
<item name="textAppearanceHeadline6">#style/TextAppearance.App.Button</item>
<item name="textAppearanceSubtitle1">#style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceSubtitle2">#style/TextAppearance.App.Subtitle2</item>
<item name="textAppearanceBody1">#style/TextAppearance.App.Body1</item>
<item name="textAppearanceBody2">#style/TextAppearance.App.Body2</item>
<item name="textAppearanceButton">#style/TextAppearance.App.Button</item>
<item name="android:textAppearanceLarge">#style/TextAppearance.App.Large</item>
<item name="android:textAppearanceMedium">#style/TextAppearance.App.Medium</item>
<item name="android:textAppearanceSmall">#style/TextAppearance.App.Small</item>
</style>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="fontFamily">#string/font_regular</item>
<item name="android:fontFamily">#string/font_regular</item>
</style>
...
I tried to define an extra theme for the alert dialogs like so:
<style name="Theme.App" parent="Theme.MaterialComponents.Light.NoActionBar">
...
<item name="alertDialogTheme">#style/Theme.App.AlertDialog</item>
...
</style>
<style name="Theme.App.AlertDialog" parent="Theme.MaterialComponents.Light.Dialog.Alert">
<item name="android:windowTitleStyle">#style/TextAppearance.App.DialogWindowTitle</item>
</style>
<style name="TextAppearance.App.DialogWindowTitle" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
<item name="fontFamily">#string/font_regular</item>
<item name="android:fontFamily">#string/font_regular</item>
<item name="android:textSize">30sp</item>
</style>
But that resets the colors and fonts everywhere. The only thing that is applied, is the textSize.
It really shouldn't be so hard to achieve this, but I am out of ideas right now. I could apply the font programmatically, but that would be quite ugly.

As you mentioned the AlertDialog created by MaterialAlertDialogBuilder uses the style defined by the textAppearanceSubtitle1 attribute in your app theme.
Otherwise you can change the style used by the AlertDialog using something like:
new MaterialAlertDialogBuilder(MainActivity.this,
R.style.MyTitle_ThemeOverlay_MaterialComponents_MaterialAlertDialog)
.setTitle("Title")
.setMessage("Message......")
.setPositiveButton("ok", null)
.setNegativeButton("Cancel", null)
.show();
In your style you have to customize the materialAlertDialogTitleTextStyle attribute:
<style name="MyTitle_ThemeOverlay.MaterialComponents.MaterialAlertDialog" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="materialAlertDialogTitleTextStyle">#style/MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text</item>
</style>
<style name="MyTitle_MaterialAlertDialog.MaterialComponents.Title.Text" parent="#style/MaterialAlertDialog.MaterialComponents.Title.Text">
<item name="android:textAppearance">#style/MyTitle_TextAppearance.MaterialComponents.Subtitle1</item>
</style>
<style name="MyTitle_TextAppearance.MaterialComponents.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="fontFamily">....</item>
<item name="android:fontFamily">....</item>
<item name="android:textStyle">.....</item>
</style>

Thanks to your question I realized that I was using the incorrect attribute to assign the title style (android:titleTextAppearance instead of android:windowTitleStyle).
It looks like your issue has been fixed in the meantime, as your exact code seems to work for me as of today.

Change the color of selected date only in date picker android

I am using date picker and I need to style it with different colors. All things are working fine except the selected date color. The thing is selected date color takes "android:textColorPrimaryInverse" as default which in my case is red , background of the dialog is white and the "android:colorControlHighlight" and "android:colorControlActivated" is also red.
This means the selected text color doesn't show.I need that to be shown as white but the issue is if I change"android:textColorPrimaryInverse" to white my title won't appear as the background is white.
here is my style file :
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/color_white</item>
<item name="android:textColorPrimaryInverse">#color/red</item>
<item name="android:textColorSecondaryInverse">#color/red</item>
<item name="android:datePickerStyle">#style/MyDatePickerStyle</item>
<item name="buttonBarButtonStyle">#style/DialogButtonStyle</item>
<item name="android:colorControlHighlight">#color/red</item>
<item name="android:colorControlActivated">#color/red</item>
</style>
and this is how I show my dialog
new DatePickerDialog(mActivity, R.style.DialogTheme, new DatePickerDialog.OnDateSetListener() {
#Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
//DO SOMETHING
}
}, 2015, 02, 26).show();

Use;
<item name="android:textColorPrimaryInverse">#color/white</item>
<item name="android:colorControlActivated">#color/red</item>

Try below code
<style name="CustomDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/accent</item>
<item name="android:datePickerStyle">#style/CustomDatePickerStyle</item>
<item name="android:colorAccent">#color/primDark</item>
</style>
<style name="CustomDatePickerStyle" parent="#android:style/Widget.Material.Light.DatePicker">
<item name="android:headerBackground">#color/prim</item>
<item name="android:calendarTextColor">#color/primDark</item>
<item name="android:dayOfWeekBackground">#color/primDark</item>
<item name="android:yearListSelectorColor">#color/accent</item>
<item name="android:datePickerMode">calendar</item>
</style>

If using MaterialDatePicker this example could be helpful:
<style name="DefaultDatePickerTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
<item name="colorOnPrimary">#android:color/black</item>
<item name="colorPrimary">#color/white</item>
<item name="materialCalendarStyle">#style/DefaultCalendarStyle</item>
<item name="buttonBarPositiveButtonStyle">#style/DefaultDatePickerButtonStyle</item>
<item name="buttonBarNegativeButtonStyle">#style/DefaultDatePickerButtonStyle</item>
</style>
<style name="DefaultDatePickerButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
<item name="android:textColor">#color/date_picker_cta_text</item>
</style>
<style name="DefaultCalendarStyle" parent="Widget.MaterialComponents.MaterialCalendar">
<item name="daySelectedStyle">#style/DefaultDaySelectedStyle</item>
</style>
<style name="DefaultDaySelectedStyle" parent="Widget.MaterialComponents.MaterialCalendar.Day.Selected">
<item name="itemFillColor">#color/blue_violet</item>
<item name="itemTextColor">#color/white</item>
</style>

What you need to deal with in your style is 'colorControlActivated' and 'selectableItemBackgroundBorderless' . Check the code snippet below:
<item name="colorControlActivated">##color/Green</item>
<item name="android:selectableItemBackgroundBorderless">#color/LightPink</item>
Current date will be 'Green' and selected date will have a 'LightPink' boardering background

<item name="android:colorControlActivated">#color/red</item>
This worked for me.

how to make a date picker in Android?

Could we have a DATE picker in Android that is not calling the popup dialog?
Why is useSpinner deprecated in 5.4.0?
I made a test like this, and it resulted in a strange black field and I don't see any dropdown.
var androidDatePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_DATE,
height:Ti.UI.SIZE,
width:Ti.UI.FILL,
minDate:moment().add(10,"minutes").toDate(),
maxDate:moment().add(2,"years").toDate(),
value:moment().toDate()
});
$.main.add(androidDatePicker);

For some purposes it works. I know other developers whose clients also requested a simpler picker.
I implemented it through the theme, by adding approximately the following to the custom themes xml resource file:
<style name="Theme.NoActionBar" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:dialogTheme">#style/MyDialogTheme</item>
</style>
<style name="MyDialogTheme" parent="android:Theme.Holo.Light.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:datePickerStyle">#style/MyDatePicker</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
</style>
<style name="MyDatePicker" parent="android:Widget.Holo.DatePicker">
<item name="android:datePickerMode">spinner</item>
</style>

Android. styling of ListPopupMenu

I have inherited ListPopupMenu I used for show popup for items in ListView widget.
I use this code for creation and displaying my popup:
CADropDownPopupList popupMenu = new CADropDownPopupList(getActivity());
popupMenu.setAnchorView(view);
...
popupMenu.show();
I have styled listPopupMenu attribute in styles using this code:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
...
<item name="android:dialogTheme">#style/NoTitleAlertDialogTheme</item>
<item name="listPopupWindowStyle">#style/PopupMenu</item>
<item name="android:listPopupWindowStyle">#style/PopupMenu</item>
...
</style>
<style name="PopupMenu" parent="Widget.AppCompat.ListPopupWindow">
<item name="android:layout_marginLeft">16dp</item>
<item name="android:layout_marginRight">16dp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:textSize">40sp</item>
<item name="android:popupBackground">#drawable/popup_background</item>
</style>
But no one style item maps to my popup. What did I do wrong?

Change your theme
Use PipupMenu insted of ListPopupWindow
<style name="PopupMenu.Example" parent="#style/Widget.AppCompat.Light.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example</item>
</style>
Because ListPopupWindow style not available check issue :
http://code.google.com/p/android/issues/detail?id=58023

I too struggled to get styles working, but found that you can manually set properties directly on the ListPopupWindow after creating it.
val popup = ListPopupWindow(context, null, R.attr.listPopupWindowStyle).apply {
setBackgroundDrawable(ContextCompat(context, R.drawable.bg_popup_menu))
// ... etc ...
}

AlertDialog styling - how to change style (color) of title, message, etc

I've breaking my head over this quite a bit. What I need to do is, change the style of all AlertDialogs in my android application - dialog background needs to be white-ish, and text needs to be black-ish. I tried creating a lot of styles, themes, and applying from the code, manifest, etc, but no success, with regard to the text colors inside the AlertDialog. Right now, I have the simplest of codes, set like this:
Manifest:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
styles.xml:
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:alertDialogStyle">#style/DialogStyle</item>
</style>
<style name="DialogStyle" parent="#android:style/Theme.Dialog">
<!-- changing these background stuff works fine -->
<item name="android:bottomBright">#android:color/white</item>
<item name="android:bottomDark">#android:color/white</item>
<item name="android:bottomMedium">#drawable/dialog_footer_bg</item>
<item name="android:centerBright">#android:color/white</item>
<item name="android:centerDark">#drawable/dialog_body_bg</item>
<item name="android:centerMedium">#android:color/white</item>
<item name="android:fullBright">#color/orange</item>
<item name="android:fullDark">#color/orange</item>
<item name="android:topBright">#color/green</item>
<item name="android:topDark">#drawable/dialog_header_bg</item>
The items listed below don't work (please read the comments I've put above each element):
<!-- panelBackground is not getting set to null, there is something squarish around it -->
<item name="android:panelBackground">#null</item>
<!-- Setting this textColor doesn't seem to have any effect at all. Messages, title, button text color, whatever; nothing changes. -->
<item name="android:textColor">#000000</item>
<!-- Also tried with textAppearance, as follows. Didn't work -->
<item name="android:textAppearance">?android:attr/textColorPrimaryInverse</item>
<!-- Also tried changing textAppearancePrimary, to no avail -->
<item name="android:textColorPrimary">#000000</item>
<!-- Also need to change the dialog title text, tried it as follows, dint work: -->
<item name="android:windowTitleStyle">#style/DialogWindowTitle</item>
</style>
The DialogWindowTitle is defined as follows:
<style name="DialogWindowTitle">
<item name="android:textAppearance">?android:attr/textAppearanceMediumInverse</item>
</style>
So none of these is working. Can anyone tell me what I could be doing wrong, and how can I:
Change text color for messages (content text)
Change title text color
Remove the
panel background
Note: I need to support API 8 (2.2) upwards. Also, I've went through most of the related question here, and google groups, but can't figure out, though I have a feeling its right under my nose!
Edit: adding screenshot:

You need to define a Theme for your AlertDialog and reference it in your Activity's theme. The attribute is alertDialogTheme and not alertDialogStyle. Like this:
<style name="Theme.YourTheme" parent="#android:style/Theme.Holo">
...
<item name="android:alertDialogTheme">#style/YourAlertDialogTheme</item>
</style>
<style name="YourAlertDialogTheme">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
<item name="android:windowTitleStyle">...</item>
<item name="android:textAppearanceMedium">...</item>
<item name="android:borderlessButtonStyle">...</item>
<item name="android:buttonBarStyle">...</item>
</style>
You'll be able to change color and text appearance for the title, the message and you'll have some control on the background of each area. I wrote a blog post detailing the steps to style an AlertDialog.

Remove the panel background
<item name="android:windowBackground">#color/transparent_color</item>
<color name="transparent_color">#00000000</color>
This is Mystyle:
<style name="ThemeDialogCustom">
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowBackground">#color/transparent_color</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:colorBackgroundCacheHint">#null</item>
</style>
Which i have added to the constructor.
Add textColor :
<item name="android:textColor">#ff0000</item>

Here's my Code to theme the alert dialog box:
<style name="alertDialog" parent="Theme.AppCompat.Dialog.Alert">
<item name="android:background">#color/light_button_text_color</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:textColorPrimary">#android:color/black</item>
<item name="android:textColorSecondary">#android:color/black</item>
<item name="android:titleTextColor" tools:targetApi="m">#android:color/black</item>
</style>
Place this code in styles.xml.
In your java apply this theme as:
AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.alertDialog);
Output of the code

You have to add the style to the constructor of the dialog
builder = new AlertDialog.Builder(this, R.style.DialogStyle);

I changed color programmatically in this way :
var builder = new AlertDialog.Builder (this);
...
...
...
var dialog = builder.Show ();
int textColorId = Resources.GetIdentifier ("alertTitle", "id", "android");
TextView textColor = dialog.FindViewById<TextView> (textColorId);
textColor?.SetTextColor (Color.DarkRed);
as alertTitle, you can change other data by this way (next example is for titleDivider):
int titleDividerId = Resources.GetIdentifier ("titleDivider", "id", "android");
View titleDivider = dialog.FindViewById (titleDividerId);
titleDivider?.SetBackgroundColor (Color.Red);
this is in C#, but in java it is the same.

It depends how much you want to customize the alert dialog. I have different steps in order to customize the alert dialog. Please visit: https://stackoverflow.com/a/33439849/5475941

Building on #general03's answer, you can use Android's built-in style to customize the dialog quickly. You can find the dialog themes under android.R.style.Theme_DeviceDefault_Dialogxxx.
For example:
builder = new AlertDialog.Builder(this, android.R.style.Theme_DeviceDefault_Dialog_MinWidth);
builder = new AlertDialog.Builder(this, android.R.style.Theme_DeviceDefault_Dialog_NoActionBar);
builder = new AlertDialog.Builder(this, android.R.style.Theme_DeviceDefault_DialogWhenLarge);

Use this in your Style in your values-v21/style.xml
<style name="AlertDialogCustom" parent="#android:style/Theme.Material.Dialog.NoActionBar">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorAccent">#color/cbt_ui_primary_dark</item>
<item name="android:windowTitleStyle">#style/DialogWindowTitle.Sphinx</item>
<item name="android:textColorPrimary">#color/cbt_hints_color</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
And for pre lollipop devices put it in values/style.xml
<style name="AlertDialogCustom" parent="#android:style/Theme.Material.Dialog.NoActionBar">
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorAccent">#color/cbt_ui_primary_dark</item>
<item name="android:windowTitleStyle">#style/DialogWindowTitle.Sphinx</item>
<item name="android:textColorPrimary">#color/cbt_hints_color</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowMinWidthMajor">#android:dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#android:dimen/dialog_min_width_minor</item>
</style>
<style name="DialogWindowTitle.Sphinx" parent="#style/DialogWindowTitle_Holo">
<item name="android:textAppearance">#style/TextAppearance.Sphinx.DialogWindowTitle</item>
</style>
<style name="TextAppearance.Sphinx.DialogWindowTitle" parent="#android:style/TextAppearance.Holo.DialogWindowTitle">
<item name="android:textColor">#color/dark</item>
<!--<item name="android:fontFamily">sans-serif-condensed</item>-->
<item name="android:textStyle">bold</item>
</style>