Custom Theme in Android

Theming is useful when you need to apply a consistent custom look throughout the app. There are two ways you can do this in Android:

  1. Style: Define styles and then apply them to the widgets in layout XML. This can still be a lot of work since you have to apply the styles to each widget.
  2. Theme: Create a theme where you use the styles and then associate a theme at the application level. This will apply the styles throughout the app.

The way you define styles and theme depend on if your project is using the support library. Here I will describe the way things are done using the native SDK (not using support library).

Styles

You can define the styles in res/values/styles.xml. For example:

<resource>
    <style name="labelStyle">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">#00FF00</item>
    </style>
</resource>

Now, you can use the style with a widget in a layout XML.

<TextView android:text="@string/hello_world" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/labelStyle" />

You can override some of the style attribute at the individual widget level. For example, here we change the text color.

<TextView android:text="@string/hello_world" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#ff43cdff"
    style="@style/labelStyle" />

Theme

A theme applies styles at application level. This way you don’t have to set style for each widget.

You can define a theme in res/values/styles.xml. It’s strongly recommended that you derive your theme from a standard theme. That way you can just override what you need.

The theme below specifies the action bar background, title style and text view (label) style.

    <style name="AppTheme" parent="android:style/Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:windowBackground">@color/background</item>
        <item name="android:textViewStyle">@style/labelStyle</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
        parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">#FF0000</item>
        <item name="android:titleTextStyle">@style/titleStyle</item>
    </style>
    <!-- ActionBar title styles -->
    <style name="titleStyle">
        <item name="android:fontFamily">sans-serif-condensed</item>
        <item name="android:textColor">#FFFFFF</item>
    </style>
    <!-- TextView styles -->
    <style name="labelStyle">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">#00FF00</item>
    </style>

    <color name="background">#cfcfcf</color>

Then, register your theme at the application level. Open AndroidManifest.xml and set the theme:

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

Individual widgets can override the theme by having their own style or directly setting properties like color and font.

Advertisements

Removing Support Library in Android Studio

Android Studio generates a project that uses Support Library by default. I personally do not like to use the support library if I can help it. Here are the steps to modify the project to not use support library.

Open build.gradle from your project. Locate the dependencies section.

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.0.0'
}

Remove the line for the compatibility library. After that the section should look like this.

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
}

Save and close.

By default the app uses a theme that is available from the support library. This is not available from the core API. So we need to fix that. Open res/values/styles.xml. The style tag will look something like this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
</style>

Change the parent to a theme that is available from the core SDK. For example:

<style name="AppTheme" parent="android:style/Theme.Holo.Light">
        <!-- Customize your theme here. -->
</style>

Note that with the core SDK you must prefix the theme name with android:style/.

Finally, fix the generated activity code. Make the activity class extend android.app.Activity.