Applying a style to a View

A style is a collection of property settings to define the look of a View. As you have already seen while defining layouts, a view offers many settings to determine how it looks, as well as functions. We have already set a view height, width, background color, and padding, plus there are many more settings such as text color, font, text size, margin, and so on. Creating a style is as simple as pulling these settings from the layout and putting them in a style resource.

In this recipe, we will go through the steps of creating a style and hooking it up to a view.

Similar to Cascading Style Sheets, Android Styles allow you to specify your design settings separate from the UI code.

Getting ready

Create a new Android Studio project and call it Styles. Use the default wizard options to create a Phone & Tablet project and select Empty Activity when prompted for the Activity. By default, the wizard also creates a styles.xml file, which we will use for this recipe.

How to do it...

We will create our own style resource to change the appearance of a TextView. We can add our new style to the styles.xml resource created by Android Studio using the following steps:

1. Open the default styles.xml file located in res/values, as shown here:
   
2. We will create a new style called MyStyle by adding the following XML below the existing AppTheme style:

   <style name="MyStyle">
       <item name="android:layout_width">match_parent</item>
       <item name="android:layout_height">wrap_content</item>
       <item name="android:background">#000000</item>
       <item name="android:textColor">#AF0000</item>
       <item name="android:textSize">20sp</item>
       <item name="android:padding">8dp</item>
       <item name="android:gravity">center</item>
   </style>

3. Now tell the view to use this style. Open the activity_main.xml file and add the following attribute to the existing <TextView> element:

   style="@style/MyStyle"

4. Either run the application or view the results in the Design tab.

How it works...

A style is a resource, defined by using the <style> element nested in a <resources> element of an xml file. We used the existing styles.xml file, but that is not a requirement, as we can use whatever filename we want. As seen in this recipe, multiple <style> elements can be included in one xml file.

Once the style is created, you can easily apply it to any number of other views as well. What if you wanted to have a button with the same style? Just drop a button in the layout and assign the same style.

What if we created a new button, but wanted the button to expand the full width of the view? How do we override the style for just that view? Simple, specify the attribute in the layout as you've always done. The local attribute will take priority over the attribute in the style.

There's more...

There is another feature of styles: inheritance. By specifying a parent when defining the style, we can have styles build on each other, creating a hierarchy of styles. If you look at the default style in styles.xml: AppTheme, you will see the following line:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

AppTheme inherits from a theme defined in the Android SDK.

Tip

If you want to inherit from a style you have created yourself, there is a shortcut method. Instead of using the parent attribute, you can specify the parent name first, followed by a period, then the new name, such as:

<style name="MyParent.MyStyle" >

You saw how to specify a style for a view, but what if we wanted all the TextViews in our application to use a specific style? We'd have to go back to each TextView and specify the style. But there's another way. We can include a textViewStyle item in a style to automatically assign a style to all TextViews. (There's a style for each of the widget types so you can do this for Buttons, ToggleButtons, TextViews, and so on.)

To set the style for all TextViews, add the following line to the AppTheme style:

<item name="android:textViewStyle">@style/MyStyle</item>

Since the theme for our application already uses AppThem, we only have to add that single line to AppTheme to have all our TextViews styled with our custom MyStyle.

See also

The Android Design Support Library at:

http://android-developers.blogspot.de/2015/05/android-design-support-library.html