Android Highlights: Common Theme Attributes


The picture is from Virginia Poltrack


Official video of station B


In this first installment of our Android STYLING series, we looked at the differences between themes and styling and how themes enable developers to write more flexible styling and layouts

Specifically, we recommend that you use theme properties to provide indirect points of access to resources so that you can change them (for example, dark themes). That said, if you find yourself writing a direct resource reference (or worse, a hard-coded value 😱) in your layout or style, consider whether you should use the theme attribute

But what topic attributes can you use? This article highlights common things you should know; Content from Material, AppCompat, or Platform. This is not a complete list (for that, I recommend that you browse the attrs file defined in the link below), but these are the attributes I have been using (implemented using the theme attributes)

Colors

Many of the colors here come from the Material Color System, which defines the color names that can be used throughout the application

  • ? attr/colorPrimaryThe main color app
  • ? attr/colorSecondaryApp secondary color, usually used as a complement to the primary color
  • ? attr/colorOn[Primary, Secondary, Surface etc]A color that contrasts with the named color
  • ? attr/color[Primary, Secondary]VariantThe shadow of the given color
  • ? attr/colorSurfaceColor of component interface (card, table, menu, etc.)
  • ? android:attr/colorBackgroundbackground
  • ? attr/colorPrimarySurfaceOn a light themecolorPrimaryAnd dark themescolorSurfaceSwitch between
  • ? attr/colorErrorError message color

Other commonly used colors

  • ? attr/colorControlNormalColor of the icon/control in normal state
  • ? attr/colorControlActivatedColor of ICONS/controls when activated (for example checked)
  • ? attr/colorControlHighlightHighlighted colors (such as ripples, list selectors)
  • ? android:attr/textColorPrimaryText Highlights color
  • ? android:attr/textColorSecondaryText Secondary color

Dimens

  • ? attr/listPreferredItemHeightThe standard (minimum) height of a list item
  • ? attr/actionBarSizeThe height of the toolbar

Drawables

  • ? attr/selectableItemBackgroundWater ripple/highlight for the current interaction (also handy for the foreground)
  • ? attr/selectableItemBackgroundBorderlessUnbounded ripples of water
  • ? attr/dividerVerticalA drawable object that can be used as a vertical dividing line between elements
  • ? attr/dividerHorizontalA drawable object that can be used as a horizontal dividing line between elements

TextAppearances

Material defines a type scale — a set of discrete text styles that you should use throughout your application, and they are provided as a topic attribute (textAppearance). Use the Material Type Scale Generator to help generate the proportions of different fonts

  • ? attr/textAppearanceHeadline1Default light 96SP text
  • ? attr/textAppearanceHeadline2Default light-colored 60sp text
  • ? attr/textAppearanceHeadline3Default plain 48sp text
  • ? attr/textAppearanceHeadline4Default plain 34SP text
  • ? attr/textAppearanceHeadline5Default plain 24SP text
  • ? attr/textAppearanceHeadline6Default medium 20sp text
  • ? attr/textAppearanceSubtitle1Default plain 16SP text
  • ? attr/textAppearanceSubtitle2Default medium 14sp text
  • ? attr/textAppearanceBody1Default plain 16SP text
  • ? attr/textAppearanceBody2Default plain 14SP text
  • ? attr/textAppearanceCaptionThe default is plain 12SP text
  • ? attr/textAppearanceButtonDefault medium all caps 14SP text
  • ? attr/textAppearanceOverlineDefault medium all caps 10SP text

Shape

Material uses the Shape System, which provides theme properties for small, medium, and large components. Note that if you want to set the Shape on a custom component, you might want to use the MaterialShapeDrawable as its background, which understands and implements the Shape

  • ? attr/shapeAppearanceSmallComponentUsed in Button, Chip, Text properties, default 4DP rounded corners
  • ? attr/shapeAppearanceMediumComponentUsed in Card, Dialog, Date Picker, default 4DP rounded corners
  • ? attr/shapeAppearanceLargeComponentUsed in Bottom Sheet, default 0dp rounded corners

Button Styles

This may seem concrete, but Material defines three types of buttons: Contained, Text, and bank statements. MDC provides topic properties that can be used to set the style of the MaterialButton

  • ? attr/materialButtonStyleThe default style can be omitted
  • ? attr/borderlessButtonStyleText style button
  • ? attr/materialButtonOutlinedStyleOutline style button

Floats

  • ? android:attr/disabledAlphaDisable transparency for the control
  • ? android:attr/primaryContentAlphaTransparency of foreground elements
  • ? android:attr/secondaryContentAlphaTransparency of secondary elements

App vs Android namespace

You might notice that some of the properties are defined by? Android :attr/foo references, while others are? Attr/bar. This is because some of them are defined by the Android Platform, so you need the Android prefix to refer to them through the namespace (like the View property: Android: ID in Layout). Those are not from static libraries (that is, AppCompat or MDC), they are compiled into your application and therefore do not require namespaces (similar to the way you use App: baz in your layout). Some elements are defined in both platform and Library (for example, colorPrimary). In this case, it is best to use the non-platform version, which can be used at all API levels. For example, they are defined repeatedly in the Library precisely for backward compatibility. In these cases, I have listed the non-platform versions above

Preferred non-platform properties that can be used at all API levels

More Resources

For a complete list of available topic properties, you can go directly to the link below

  • Android platform
  • AppCompat

The Material Design Components:

  • Color
  • Shape
  • Type

Do It Yourself

Sometimes there is no theme attribute that abstracts out what you want to change with the theme (the same attribute varies from topic to topic), so don’t worry, you can customize it! This is an example from the Google I/O application that displays a list of meetings in two screens

They are largely similar, but the left screen must make room for time titles, while the right screen does not. We do this by abstracting the position of the aligned items behind the theme attributes so that we can change them based on the theme and use the same layout on two different screens:

  1. Define the topic attributes in attrs.xml
<! Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 -->
<attr name="sessionListKeyline" format="dimension" />
Copy the code
  1. Provide different values for different topics
<! Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 -->
<style name="Theme.IOSched.Schedule">
  …
  <item name="sessionListKeyline">72dp</item>
</style>

<style name="Theme.IOSched.Speaker">
  …
  <item name="sessionListKeyline">16dp</item>
</style>
Copy the code
  1. Use the theme property in the same layout and configure it on different screens (each using one of the two themes above)
<! Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 --> Copyright 2019 Google LLC.spdx-license-Identifier: Apache-2.0 -->
<Guideline …
  app:layout_constraintGuide_begin="? attr/sessionListKeyline" />
Copy the code

Question (mark) everything

Once you know the available theme properties, you can use them when writing layouts, styles, or drawable objects. Using theme attributes makes it easier to support themes (such as dark themes) and to write more flexibly and maintain code. For a more in-depth look at this, see the next article in this series

Thanks to Florina Muntenescu and Chris Banes

After the translation

A series of translation

  • 【 例 】Android Styling 1: Themes vs Styles

  • Android Styling 2: Common Theme attributes

  • Android Styling 3: Benefits of using themes and theme attributes

  • 【 例 句 】Android FIT 4 is a FIT

About me

I am Flywith24, and my blog content has been classified here. You can click Watch in the upper right corner to get updates of my articles in time, oh 😉

  • The Denver nuggets

  • Small column

  • Github