Themes, styles and attributes

Android has styles and themes that allow you to structure user interface development.





They are made up of attributes that define the design of the elements. Attributes can be created or existing ones can be used. Attributes can be assigned a value, the type of which is specified when it is created.





An example of an attribute declaration from the Android SDK:





<attr name="background" format="reference|color" />







Note:

A reference to another attribute through a @[package:]type/name



structure is also a type.





Themes vs styles

Themes and styles are very similar, but they are used for different purposes.





The style combines attributes for a specific widget. By extracting attributes to styles, they can be easily used and maintained across multiple widgets at the same time.





A theme, in turn, defines a set of attributes that can be referenced in an application.





Styles and themes are designed to work together.





For example, we have a style in which the background of the button is colorPrimary



and the color of the text is colorSecondary



. The actual meanings of these colors are given in the topic.





<?xml version="1.0" encoding="utf-8" ?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
		<style name="LightTheme" parent="YourAppTheme">
				<item name="colorPrimary">#FFFFFF</item>
				<item name="colorSecondary">#000000</item>
		</style>

		<style name="DarkTheme" parent="YourAppTheme">
				<item name="colorPrimary">#000000</item>
				<item name="colorSecondary">#FFFFFF</item>
		</style>

		<style name="Button.Primary" parent="Widget.MaterialComponents.Button">
				<item name="android:background">?attr/colorPrimary</item>
				<item name="android:textColor">?attr/colorSecondary</item>
		</style>
</resources>
      
      



When the device goes into night mode, the application can switch from its "light" theme to "dark" by changing the values ​​of these resources.





There is no need to change styles, as styles use semantic names rather than specific color resources.





Link types in XML

The attribute android:background



can take several types:





android:background="@color/colorPrimary"
android:background="?attr/colorPrimary"
      
      



@color/colorPrimary



- c colorPrimary



, <color name="colorPrimary">#FFFFFF<color>



, res/values/color.xml



.





:

- , , «name», XML-. , XML- <resources>



, .





, ?attr



- .





?attr/colorPrimary



  colorPrimary



, :





<?xml version="1.0" encoding="utf-8" ?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
		<style name="YourAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
				<item name="colorPrimary">@color/colorPrimary</item>
		</style>
</resources>
      
      



?attr



, .





, .









, , , .





@[package:]type/name







  1. package



    - () , . - , .





  2. type



    - color



    , string



    , dimen



    , layout



    - . .





  3. name



    - , .





?[package:]type/name







  1. package



    - () , . - , .





  2. type



    - () attr



    ?



    .





  3. name



    - , .





? vs ?attr vs ?android:attr

, , ?android:attr/colorPrimary



, ?attr/colorPrimary



, ?colorPrimary



.





, Android SDK, android



, .





?



?attr



, (, AppCompat MaterialDesign), , .





Android SDK, , colorPrimary



.





, API.





Google Android :





  1. Theming with AppCompat





  2. Android styling: themes vs styles





  3. What’s your text’s appearance?





  4. Android Styling: themes overlay





  5. Android Styling: prefer theme attributes





  6. Android styling: common theme attributes





I still recommend watching the video from Android Dev Summit



2019. Link to video








All Articles