Search code examples
androidthemesmaterial-components

Description of Material Components themes?

I am currently getting started with Material components themes. The Getting Started guide mentions these themes:

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

There is no description for them though. Where can I find more details about those themes or could anyone be so kind to explain them in an answer? Just for example:

  1. What means [..].NoActionBar? If I don't want an action bar, I don't include it in my layout file, so I really don't get this.
  2. When would I use only Theme.MaterialComponents? Or would I always use Theme.MaterialComponents.Light or Theme.MaterialComponents.DayNight?
  3. How do these themes look like? I couldn't find any preview and don't want to try them all out by myself - could take some time with all the widgets available on Android.
  4. What do these themes define? Only colors? Text style? Font family?
Solution

  • I'm certain that I won't manage to answer all of your questions exhaustively but I'll share some thoughts, maybe it will take you one or two steps further:

    What means [..].NoActionBar?

    You should use a theme ending with ".NoActionBar" if you don't want the runtime to add an ActionBar to the Activity, possibly because you use a Toolbar. If you choose for example Theme.MaterialComponents.Light and use a Toolbar as well, you will notice that now your app will be renderd with two ActionBars

    Please note that if some theme is called "MyTheme" then a theme which is prefixed by "MyTheme." will inherit everything from "MyTheme". So Theme.MaterialComponents.Light.NoActionBar is almost the same as Theme.MaterialComponents.Light except for the ActionBar.

    So if you really don't want any ActionBar you should choose the .NoActionBar version and not include a surrogate (Toolbar) in your layout files.

    What do these themes define? Only colors? Text style? Font family?

    They do that, but they define also sizes, margins and behavior. In addition to that, some of them have special style combos for certain widgets (like style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox" for TextInputLayout)

    For a deep dive into what properties can be influenced by a theme, you can take a look at the source of themes_material.xml

    When would I use only Theme.MaterialComponents? Or would I always use Theme.MaterialComponents.Light or Theme.MaterialComponents.DayNight?

    Since Theme.MaterialComponents is the parent theme of Theme.MaterialComponents.Light, they have much in common. The main difference is that the first assumes that your app will have a dark background (so the text should be white) whereas the second will have black text and assumes your app's background will be light.

    Generally, one will try to use a certain theme as a template which then can be/ has to be customized - for example with a special accent color.

    How do these themes look like?

    You can get a general idea by switching from one to the other in a small sample app of your own.

    It's true that there is not one single source of information (aka the android theming bible). You have already found material.io, but maybe the Styles and Themes section from developer.android.com or this blog post on DayNight — Adding a dark theme to your app will shed some more light.