Style inheritance relationship in Android

[[182651]]

Android's Styles and Themes are very similar to CSS in Web development, which makes it easy for developers to separate page content and layout presentation. The definition of Style and Theme in Android is exactly the same, and the only difference between the two is the concept: Style acts on a single view or control, while Theme is used for Activity or the entire application. Due to the different scopes, Theme needs to contain more items that define attribute values ​​than Style. However, in this article, I will refer to both Style and Theme as Style.

Compared with Web CSS, Android Style has a flaw in that it can only specify a value for an object through android:theme="@style/AppTheme" or style="@style/MyStyle". CSS can define multiple styles on DOM elements through the class attribute to achieve a combination effect. However, Style also has a function that CSS does not have, which is inheritance. (Of course, CSS also has the ability to inherit through tools such as LESS and SASS.)

Introduction to Style Inheritance

According to the official documentation of Android Developers, there are two ways to define Style inheritance: one is to mark the parent Style through parent;

 <style name = "GreenText" parent= "@android:style/TextAppearance" >  
    <item name = "android:textColor" >#00FF00</item>  
 </style>

The other is to use the name of the parent Style as a prefix, and then connect the name of the newly defined Style with a “.”:

 <style name = "CodeFont.Red" >
 <item name = "android:textColor" >#FF0000</item>
 </style>

The second way is to connect sub-Styles to implement multi-layer inheritance:

 <style name = "CodeFont.Red.Big" >
 <item name = "android:textSize" >30sp</item>
 </style>

Compared with the first method, Android restricts the second method in that the Style must be defined by itself, or the parent Style and the child Style must be defined in the same program, and cannot reference a third-party or system Style. After all, the reference to the system Style needs to be prefixed with android: as the namespace.

Secondly, when using Style, for the Style defined in the second way, you must quote its full name, that is, you must include the complete prefix and name:

 <EditText
 style= "@style/CodeFont.Red.Big"  
 ... />

Android does not restrict the first definition method, so all styles defined in the second method can be converted to the first method:

 <style name = "Big" parent= "CodeFont.Red" >
 <item name = "android:textSize" >30sp</item>
 </style>

As long as the name in parent corresponds to the actual defined Style name, it will be fine. However, if the Style name is too concise after changing to the first method, it will easily conflict.

The effect of mixing the two inheritance methods

As mentioned earlier, the effects of the two inheritance methods of Style are the same. What will happen if the two methods are mixed together to define a Style? Let's analyze it with a practical example.

First, define some custom attributes (attr) required for the experiment. (This can reduce the interference of system attributes, because the system always defines values ​​for its attributes, so it may not be possible to tell whether the best effect comes from the system or the defined value)

 <?xml version= "1.0" encoding= "utf-8" ?> 
 
 <resources> 
 
    < declare -styleable name = "CustomStyle" > 
 
        <attr name = "customColor" format= "color" /> 
 
        <attr name = "customText" format= "string" /> 
 
        <attr name = "customSize" format= "dimension" /> 
 
 </declare-styleable>​ 
 
 </resources>

Next, define a subclass of TextView, get the value of the custom attribute above and assign it to TextView for presentation:

 import android.util.TypedValue; 
 
 import android.widget.TextView; 
 
 /** 
 
 * @author Ider 
 
 */ 
 
 public class StyledTextView extends TextView { 
 
 public StyledTextView(Context context) { 
 
 this(context, null ); 
 
 } 
 
 public StyledTextView(Context context, AttributeSet attrs) { 
 
        this(context, attrs, 0); 
 
 } 
 
 public StyledTextView(Context context, AttributeSet attrs, int defStyleAttr) { 
 
        super(context, attrs, defStyleAttr); 
 
        final TypedArray a = context.getTheme() 
 
                .obtainStyledAttributes(attrs, R.styleable.CustomStyle, defStyleAttr, 0); 
 
        final CharSequence text = a.getText(R.styleable.CustomStyle_customText); 
 
        final int color = a.getColor(R.styleable.CustomStyle_customColor, Color.RED); 
 
 final float   size = a.getDimensionPixelSize(R.styleable.CustomStyle_customSize, 70); 
 
 a.recycle(); 
 
 setText(text); 
 
 setTextColor(color); 
 
        setTextSize(TypedValue.COMPLEX_UNIT_PX, size ); 
 
 } 
 
 }

Then define the style required for the study

 <resources> 
 
    <style name = "SuperStyleOne" > 
 
        <item name = "customColor" >@android:color/holo_orange_dark</item> 
 
        <item name = "customText" >Hello World</item> 
 
        <item name = "customSize" >30dp</item> 
 
 </style> 
 
    <style name = "SuperStyleTwo" > 
 
        <item name = "customText" >www.iderzheng.com</item> 
 
 </style> 
 
    <style name = "SuperStyleOne.SubOne" > 
 
        <item name = "customColor" >@android:color/holo_blue_dark</item> 
 
 </style> 
 
    <style name = "SuperStyleOne.SubTwo" parent= "SuperStyleTwo" > 
 
 </style> 
 
    <style name = "SuperStyleOne.SubThree" parent= "SuperStyleTwo" > 
 
        <item name = "customText" >blog.iderzheng.com</item> 
 
 </style> 
 
 </resources>

In the Style defined above, SuperStyleOne will act on the sub-Style by adding a prefix, while SuperStyleTwo will act on the parent. You can see that SubTwo and SubThree mix the two methods.

***Use custom classes in the layout view of the Activity and set different styles

 <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"   
 
              xmlns:tools= "http://schemas.android.com/tools"   
 
              android:orientation= "vertical"   
 
              android:layout_width= "match_parent"   
 
              android:layout_height= "match_parent"   
 
              android:paddingLeft= "@dimen/activity_horizontal_margin"   
 
              android:paddingRight= "@dimen/activity_horizontal_margin"   
 
              android:paddingTop= "@dimen/activity_vertical_margin"   
 
              android:paddingBottom= "@dimen/activity_vertical_margin"   
 
              tools:context= ".MainActivity" > 
 
    <com.ider.trial.styles.StyledTextView 
 
            style= "@style/SuperStyleOne"   
 
            android:layout_width= "wrap_content"   
 
            android:layout_height= "wrap_content" /> 
 
    <com.ider.trial.styles.StyledTextView 
 
            style= "@style/SuperStyleOne.SubOne"   
 
            android:layout_width= "wrap_content"   
 
            android:layout_height= "wrap_content" /> 
 
    <com.ider.trial.styles.StyledTextView 
 
            style= "@style/SuperStyleOne.SubTwo"   
 
            android:layout_width= "wrap_content"   
 
            android:layout_height= "wrap_content" /> 
 
    <com.ider.trial.styles.StyledTextView 
 
            style= "@style/SuperStyleOne.SubThree"   
 
            android:layout_width= "wrap_content"   
 
            android:layout_height= "wrap_content" /> 
 
 </LinearLayout>

The results after running are as follows:

The first and second are both standard ways of using Style. We can see that they correctly obtain the defined property values, and the child Style also correctly inherits and overrides the property values ​​of the parent Style.

For the third and fourth ones, the color they display is the default red (Color.RED) used in the code, and the font value is also derived from the value used in the code, so it is obviously smaller than the first two. This means that they do not inherit the font size and color defined in SuperStyleOne. However, the content defined in SuperStyleTwo is correctly displayed by the third one, which also shows that SubTwo successfully inherits the content of the parent Style specified by parent. The content displayed by the fourth one shows that the overlay effect is also correct.

Before doing this experiment, I always thought that both methods would work at the same time, but specifying with parent has a higher priority than specifying with prefix. That is to say, Android will first look for the value of a certain attribute in the current Style definition. If it is not found, it will go to the parent Style specified by parent. If it is still not found, it will go to the parent Style specified by prefix. However, the above results show that: when parent is used to specify the parent Style, the prefix method has no effect and is only used as the name of the Style. In other words: Android's Style does not support multiple inheritance. Style inheritance can only be done layer by layer in a single line.

It is also easier to understand the system-defined styles. For example, if you open themes_holo.xml, you will see that many of the same contents are "redundantly" defined in two styles: Theme.Holo and Theme.Holo.Light. However, because Theme.Holo.Light uses parent to specify that its parent style is Theme.Light, Theme.Holo.Light does not inherit any property values ​​from Theme.Holo, so such redundancy is necessary.

 <style name = "Theme.Holo.Light" parent= "Theme.Light" > 
 
 ... ... ... ... 
 
 </style>

Using Theme.Holo.Light as the name of the Style is just to make the name clearer.

References:

1. Styles and Themes | Android Developers
2. Android XML theme inheriting from two parent themes? – Stack Overflow
3. xml – Reason why style attribute does not use the android: namespace prefix – Stack Overflow