Android Styles and Themes

0
283

An Android Style code carries the definition of the format and the look for the user interface (UI). Android style can either be applied to a View or to the whole application. For applying the style on an individual View, the developer needs to work on the layout file. And if the style is required to be applied to the entire Activity or the application then the developer needs to work within the manifest file.

Also Read: Android Style Demo Example

How to Define Style?

To define a style, you need an XML resource. Also, you must know that this XML resource is different from the one which carries the definition of the layout. You can locate this XML file under res/values/ folder of your project. The root node of this XML file will always start with a <resources> tag. The style file should necessarily contain this tag. You can save this file with any arbitrary name but it must have the .xml extension at the end.
A single style file can have the definitions of multiple styles. And for defining each style, you need to use <style> tag. But make sure that you name each style differently as to identify them uniquely. To set the Android style attributes, <item> tag is used as shown in the given lines of code.

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
   <style name=”CustomFontStyle”>
      <item name=”android:layout_width”>fill_parent</item>
      <item name=”android:layout_height”>wrap_content</item>
      <item name=”android:capitalize”>characters</item>
      <item name=”android:typeface”>monospace</item>
      <item name=”android:textSize”>12pt</item>
      <item name=”android:textColor”>#00FF00</item>/>
   </style>
</resources>

The value of every <item> tag depends upon the applied style property. And based on that the <item> tag value could be passed with any of the below-mentioned ones.

A keyword string, a hex color, a reference to link with any other resource type, and many other values.

How to Use Style Attributes in XML Layout File?
After defining the style, you can simply include it in the XML layout file. Well, to do so, you need to use the style attributes as shown in the following code.

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >

   <TextView
      android:id=”@+id/text_id”
      style=”@style/CustomFontStyle”
      android:text=”@string/hello_world” />
</LinearLayout>

For the better understanding of the fundamental concepts related to Android Style, you should take a look at the Android Style Demo Example.

Style Inheritance
It is true that Android supports Style Inheritance. It is as similar as to the Cascading Style Sheet (CSS) in the web designing. This feature can be used when you want to inherit the properties of an already existing style. After this, you just need to define only those properties that you want to modify or include in your application.

This can be done in two steps.
Step 1: You need to modify themes.xml file. You can locate this file under MyAndroidApp/res/values/ directory. The required changes will help you to implement a custom theme.

<resources>
   …
   <style name=”MyCustomTheme” parent=”android:style/Theme”>
   <item name=”android:textColorPrimary”>#ffff0000</item>
   </style>
   …
</resources>

Step 2: Now, open AndroidManifest.xml file. In here, apply the recently created custom themes to all the activities you want to style.

<activity
   android:name=”com.myapp.MyActivity”
   …
   android:theme=”@style/MyCustomTheme”
/>

After the successful completion of the above two steps, you will get to witness the results of your activity. Now, according to the new theme, the text on the screen will appear in bright red.

How to Apply Colors to Theme Attributes?
It is possible that you can apply the color resources to theme attributes too. For example, you can apply color resources to the window background or on the primary text color. This can be done by the use of the <item> element in the newly created custom theme. All of these attributes should be included in the styles.xml file. For example, if you want to apply a custom color to the window background then you need to add the following lines of code in the styles.xml file. You can locate this file under MyAndroidApp/res/values/ directory.

<resources>
   …
   <style name=”MyCustomTheme” …>
      <item name=”android:windowBackground”>@color/my_custom_color</item>
      <item name=”android:colorBackgroundCacheHint”>@color/my_custom_color</item>
   </style>
   …
</resources>

 

How To Use A Custom Nine-Patch Drawable with Buttons?
A nine-patch drawable can be defined as a special kind of image that is evaluated in terms of its height and width. But this special kind of image must maintain its visual integrity. With this nine-patch drawable, it is easy to specify the look and appearance of an Android button. Well, other than this, Android supports various other drawable types also.

Creation of Nine-Patch with Buttons
Follow the given step-to-step guide for the creation of custom nine-patch with buttons.

Step 1: Save the below-shown bitmap under the name of /res/drawable/my_nine_patch.9.png.

Step 2: Now, define a new style.

<resources>
   …
      <style name=”MyCustomButton” parent=”android:Widget.Button”>
      <item name=”android:background”>@drawable/my_nine_patch</item>
      </style>
   …
</resources>

Step 3: After this, you are just required to apply this newly created button style to the buttonStyle attribute of your custom theme.

<resources>
   …
      <style name=”MyCustomTheme” parent=…>
         …
         <item name=”android:buttonStyle”>@style/MyCustomButton</item>
      </style>
   …
</resources>

Take a look at the following screenshot for the final output.

Android Themes
Now, after the thorough introduction of Android styles, let’s take a look at the Android themes. An Android theme is nothing but an Android style which is applied to the entire Activity or the application rather than to an individual View. Whenever an Android theme is used then the whole application accepts the style properties included in the file. For better understanding, consider an example where the same CustomFontStyle can be applied to an individual Activity of the application. After the successful completion, all the text contained in that Activity will appear in the green monospace font as defined in the CustomFontStyle theme.

To set a theme for your entire application, you need to start with the modification in the AndroidManifest.xml file. In here, go to the <application> tag and include android:theme attribute with the associated style name. Take a look at the below line of code to understand how to do it.

<application android:theme=”@style/CustomFontStyle”>

In case, you need the theme to be applied to a single Activity rather than on the entire Activity then make use of android:theme attribute within the <activity> tag. Here’s how you can do it.

<activity android:theme=”@style/CustomFontStyle”>

Android supports various default themes. You can either directly use them or inherit them by using the parent attribute. Take a look at the following code to understand how to use it.

<style name=”CustomTheme” parent=”android:Theme.Light”>
   …
</style>

For the better understanding of the working of Android Theme, you can go through the Android Theme Demo Example chapter.

How to Style The Color Palette?
On the basis of the theme based colors, you can easily implement a layout design for your Android application. To understand this more clearly, take a look at the following layout design which is based on the blue color theme palette.

The above layout is a result of the style.xml file. You can easily locate this file under res/values/ folder. And you can take a look at the content of the file here:

<resource>
   <style name=”AppTheme” parent=”android:Theme.Material”>
      <item name =”android:color/primary”>@color/primary</item>
      <item name =”android:color/primaryDark”>@color/primary_dark</item>
      <item name =”android:colorAccent/primary”>@color/accent</item>
   </style>
<resource>

Android Default Themes and Styles
Android offers you a plenty of default themes and styles that can make your Android application look great. If you want to look at the reference for all the available Android styles then you need to use R.style class. Now, to use any of the styles which are listed in this class, you are required to replace all the underscore symbols (_) in the style name with a period symbol (.). For an instance, if you want to use Theme_NoTitleBar theme then you need to use it as “@android:style/Theme.NoTitleBar”.

Click on the below-provided links to view the source code for Android styles and themes.
* Source code for Android styles (styles.xml)

* Source code for Android themes (themes.xml)