?attr/shapeAppearanceSmallComponentused for Buttons, Chips, Text Fields etc. Defaults to rounded 4dp corners.
?attr/shapeAppearanceMediumComponentused for Cards, Dialogs, Date Pickers etc. Defaults to rounded 4dp corners.
?attr/shapeAppearanceLargeComponentused for Bottom Sheets etc. Defaults to rounded 0dp corners (i.e. square!)
?attr/materialButtonStyledefaults to contained (or just omit the style).
?attr/borderlessButtonStylefor a text style button.
?attr/materialButtonOutlinedStylefor outlined style.
?android:attr/disabledAlphaDefault disabled alpha for widgets.
?android:attr/primaryContentAlphaThe alpha applied to the foreground elements.
?android:attr/secondaryContentAlphaThe alpha applied to secondary elements.
You might have noticed that some attributes are referenced by
?android:attr/foo and others just by
?attr/bar. This is because some are defined by the Android platform, and as such you need the
android part to reference them by their namespace (just like with view attributes in layouts:
android:id). Those without come from static libraries (i.e. AppCompat or MDC) which are compiled into your application, so don’t need the namespace (similar to how you might use
app:baz in a layout). Some elements are defined both in the platform and in a library e.g.
colorPrimary. In these cases, prefer the non-platform version, as this can be used on all API levels i.e. they’re duplicated in a library precisely to backport them. In these cases, I’ve listed the non-platform versions above.
prefer non-platform attributes which can be used on all API levels
For a complete list of the theme attributes available to use, go to the source of truth:
Material Design Components:
Sometimes there isn’t a theme attribute which abstracts something you’d like to vary by theme. No worries… create your own! Here’s an example from the Google I/O app which shows a list of conference sessions in two screens.
They’re largely similar but the left screen must leave space for the sticky time headers while the right screen does not. We implemented this by abstracting where to align items behind a theme attribute so that we can vary them by theme and use the same layout across two different screens:
1. Define the theme attribute in attrs.xml
3. Use the theme attr in the single layout used on both screens (each using one of the above themes):
Knowing what theme attributes are available, equips you to use them when writing your layouts, styles or drawables. Using theme attributes makes it much easier to support theming (like dark theme) and to write more flexible, maintainable code. For a deep dive on this, join us in our next post in this series: