Styles, themes, and attrs in Android

Styles and themes

In Android, styles are used to specify the style of a form or view, such as the width and height of a view, padding, background, and font color. Style does not need to be set in the code. You can configure it in the XML file according to the DTD format. The style in Android is actually the same as CSS. It allows us to separate the function implementation and appearance design. The view configuration also provides the STYLE tag with the same ID and name attributes in HTML, let us have the ability to concentrate all styles in one place, as shown in the next example.

<? xml version= "1.0" encoding = "utf-8"?>< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"    android:layout_width= "match_parent"    android:layout_height= "match_parent"    android:orientation= "vertical"    >       <TextView        android:id ="@+id/tv1"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:textColor ="#FFFFFF" />    <TextView        android:id ="@+id/tv2"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:textColor ="#FFFFFF" />    <TextView        android:id ="@+id/tv3"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:textColor ="#FFFFFF" />   </ LinearLayout>

In the preceding layout file, the Android: layout_width, Android: layout_height, and Android: textcolor style attributes of the three textviews are the same. In this case, we can define a style separately, replace the above statement with a more elegant approach

Sample1_style.xml

< resources xmlns:android ="http://schemas.android.com/apk/res/android" >       <style name= "Sample1">               < item name= "android:layout_width" >wrap_content </ item>        < item name= "android:layout_height" >wrap_content </ item>        < item name= "android:textColor" >#00FF00 </item >           </style ></ resources>

Note: The style file must be in the values-* directory and the defined labels must be written in the DTD format.
The next step is to use style in view configuration.

<? xml version= "1.0" encoding = "utf-8"?>< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"    android:layout_width= "match_parent"    android:layout_height= "match_parent"    android:orientation= "vertical" >    <TextView        android:id ="@+id/tv1"        style= "@style/Sample1"        android:text ="@string/sample1_tv1" />    <TextView        android:id ="@+id/tv2"        style= "@style/Sample1"        android:text ="@string/sample1_tv2" />    <TextView        android:id ="@+id/tv3"        style= "@style/Sample1"        android:text ="@string/sample1_tv3" /></ LinearLayout>

You only need to use the style attribute to reference the style we have defined. This method can effectively avoid repetitive work and simplify our work. theme is the style applied to the entire application and activity, instead of a view, if the style is used as theme, the style will be used for the entire application or all elements in the form (if the following sub-item does not have a certain attribute, will be ignored). Of course, if a style is specified for a specific view, the same attribute will be overwritten. Use Android: theme = "@ style/mystyle" to specify a topic
Styles inherits the Android system and provides a complete set of styles. For example, textappearance is the most basic style for displaying strings. It defines some basic attributes.

<style name="TextAppearance"><item name="android:textColor">?textColorPrimary</item> <item name="android:textColorHighlight">?textColorHighlight</item><item name="android:textColorHint">?textColorHint</item><item name="android:textColorLink">?textColorLink</item><item name="android:textSize">16sp</item><item name="android:textStyle">normal</item></style>

There are also many aspects of style, you can see: https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/styles.xml

If we only want to change an attribute in the basic style, we can use inheritance to implement it.

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

The parent attribute is used to inherit a basic style. When sample1 style is applied, only Android: textcolor is changed. The default attribute is used for other attributes.
To inherit a custom style, you do not need to use the parent attribute to specify it.

     <style name= "Sample1.Big">        < item name= "android:textSize" >18sp </item >            </style >

Attrs literally refers to a set of attributes. What is the use of attrs? When you define a view, attributes are generally customized, through the attributeset parameter encapsulation in the constructor, we can get the attribute configured for the view, as to how to operate, you can refer to this example on the http://developer.android.com/training/custom-views/index.html.

Relationship between styles, themes, and attrs
First, let's take a look at how to customize the item name in the style. Previously, we used the item name provided by Android.
First, we need to define an attrs and specify the data type.

<resources>    <declare-styleable name="ViewPagerIndicator">        <attr name="vpiTabPageIndicatorStyle" format="reference" />    </declare-styleable></resources>

Then you can reference it in style.

<style name= "Theme.PageIndicatorDefaults" parent = "android:Theme">       <item name ="vpiTabPageIndicatorStyle" >@style/Widget.TabPageIndicator </ item>   </style >

Next, let's take a look at the definition of a constructor of view.

Public View (context, attributeset attrs,
Int defstyle) added in API Level 1

Perform inflation from XML and apply a class-specific base style. This constructor of view allows subclasses to use their own base style when they are inflating. For example, a button class's constructor
Wocould call this version of the super class constructor and SupplyR.attr.buttonStyleForDefstyle; This allows the theme's button style to modify all of the base view attributes
(In particle its background) as well as the button class's attributes.

Parameters

Context	The context the view is running in, through which it can access the current theme, resources, etc.
Attrs	The attributes of the XML tag that is inflating the view.
Defstyle	The default style to apply to this view. if 0, no style will be applied (beyond what is supported ded in the theme ). this may either be an attribute resource, whose value will be retrieved from the current theme, or an explicit style resource.

The third parameter is the key, revealing the relationship between styles, themes, and attrs. If a custom view is not configured in the layout file but is added to the form for display by code, how can we add a style to the custom view, you can use this constructor to configure theme for the activity.
Style, and then reference the ATTR we have defined by setting the third parameter, so that we can add a style to the custom view.

         < activity            android:name ="tu.bingbing.myviewpager.SampleTabsDefault"            android:label ="@string/app_name"            android:theme ="@style/Theme.PageIndicatorDefaults"             >

         public TabView(Context context) {              super (context, null, R.attr. vpiTabPageIndicatorStyle);        }

Reference: http://developer.android.com/guide/topics/ui/themes.html

Http://viewpagerindicator.com/