Setting an image background for the window title

Continuing from our Theme example, I decided to change the window title to have a background image...

granite.png

This is just a little simple image I made in GIMP using the granite fill tool... save this file to your src/main/android/res/drawable directory.

 Add a new style to styles.xml:

    <style name="HelloWindowTitleBG">
        <item name="android:background">@drawable/granite</item>
    </style>

Add this line to the Hello Theme (styles.xml):

        <item name="android:windowTitleBackgroundStyle">@style/HelloWindowTitleBG</item>

Redeploy (mvn clean install) and your app now has a stylish window title.

Themes

Going back to our non-transparent example, let's make it theme-oriented...

in styles.xml, add:

    <style name="HelloTheme" parent="android:Theme">
        <item name="android:windowBackground">@color/cornsilk</item>
    </style>

   
In main.xml, remove:

android:background="@color/cornsilk"

In AndroidManifest.xml, change:

<activity android:name=".MyActivity">

to

<activity android:name=".MyActivity" android:theme="@style/HelloTheme">

Redeploy (mvn clean install) and it should... well.. look the same ;)

Basic text styling

Expanding on the example we did to set the text and background color, we will now move those definitions into a style.

First, let's add a color for error messages...  Add this line to your colors.xml:

    <color name="error">#cc3333</color>

Next, let's add a string for the error message... Add this line to strings.xml:

<string name="errmsg">ERROR!</string>

Now, let's create a new src/main/android/res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="DefaultText">
        <item name="android:textColor">@color/black</item>
    </style>
    <style name="ErrorText">
        <item name="android:textColor">@color/error</item>
        <item name="android:textStyle">bold|italic</item>
    </style>
</resources>

In your main.xml, change this line:

android:textColor="@color/black"

to:

style="@style/DefaultText"

Now to link in a 2nd text example so we can see them together... Make a copy of the TextView inside the LinearLayout and change these two lines:

    android:text="@string/hello"
    style="@style/DefaultText"

to:

    android:text="@string/errmsg"
    style="@style/ErrorText"

Redeploy (mvn clean install) and you can now see the previous black-on-cornsilk "Hello World!" as well as a bold-italic-red "ERROR!".