Make Dialogs Obey Your Material Theme

Material design is nice. Flat, with well determined contrast rules… and most applications I’ve seen look excellent. I wanted my application to loon nice too and it does (well, almost right now :) ).

One thing that is not in line is the dialog style. If you’re here, you know that if you only set up your main theme with your brand colours, they don’t get propagated to the dialog. Instead, you get the default material theme colours (gray + green-ish by default).

There are several solutions, from programmatic changes, to styling, to using a third party library (which looks very nice by the way). I ended up with styling, so without further ado…

In your colors.xml you define your custom colours. for the dialog box, the most important ones are:

  • The background colour (named windowBackgroundColor in my case) and
  • The accent colour (named accentColor)

In your themes.xml, you define your theme:

You notice the last lines where we define a MyDialogTheme style:

Now, your dialog’s backgrounds will be the same as your app’s background. The accent color looks to propagate down :).

My result is:

dialog

Bonus

All the other properties you can change for the dialog are:

To customise, in your MyDialogTheme style, you prepend an “android:” to the name property and put your custom value, like so:

HTH,


A little experiment: If you find this post and ad below useful, please check the ad out :-)




3 thoughts on “Make Dialogs Obey Your Material Theme

    1. Ahh.. The buttons positioning depends on the OS version afaik. Even though you apply a Material theme, if you’re running on 4.x you’ll get the dialog layout from 4.x. If you want to get a perfect mirror of the Material dialog, you’ll need to use something like material-dialogs.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top