A very cool feature of Android that many developers do not know (at least me 6 months ago) is the possibility of using “styles” on Android XML layouts. This thing is similar to CCS on HTML and provides a method to simplify the XML design.
First, let’s see an example of a XML layout without styles, you can notice the need to repeat attributes and the difficulty of reading the XML:
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:text="@string/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="@color/white" /> <TextView android:text="@string/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textStyle="bold" android:textColor="@color/red" /> </LinearLayout>
But we can define styles grouping this attributes on the file res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="VerticalLinearLayout"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:orientation">vertical</item> </style> <style name="WhiteText"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:orientation">vertical</item> <item name="android:textStyle">bold</item> <item name="android:textColor">@color/white</item> </style> <style name="RedText" parent="@style/WhiteText"> <item name="android:textColor">@color/red</item> </style> </resources>
Note te possibility of inheriting styles, in this example “RedText” is inherited from the “WhiteText” style changing only the text color.
Our XML layout, with styles, gets reduced to:
<LinearLayout style="@style/VerticalLinearLayout"/> <TextView style="@style/WhiteText" android:text="@string/text1" /> <TextView style="@style/RedText" android:text="@string/text2" /> </LinearLayout>
Finally, you can see that I’m using colors (@color/white and @color/red) which must be defined on the file res/values/colors.xml (in a similar way to strings):
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="white">#ffffffff</color> <color name="red">#ffff0000</color> </resources>