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 ;)

No background color

For a moment we will side-step from our last exercise  to see how we would completely remove the cornsilk background, making our app see-through.

First, in main.xml, remove this line:

android:background="@color/cornsilk"

Now, in AndroidManifest.xml, change this line:

<activity android:name=".MyActivity">

to:

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

Redeploy (mvn clean install)  and the background is gone.  Not too useful for our text-based example, but maybe if we were doing a graphic-based overlay.

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!".

Changing the text and background color

Building on the hello world provided by our maven archetype, we will change the colors...

mvn archetype:generate -DarchetypeCatalog=http://kallisti.eoti.org:8081/content/repositories/snapshots/archetype-catalog.xml

When prompted, choose the galatea archetype and your package/artifactId. In this case, I chose 'org.eoti.galatea', 'HelloWorld2' and '1.0-SNAPSHOT'.

First things first, let's look at what we have before we go modifying it.  Go into your new directory (named after your artifactId -- HelloWorld2 in my case) and do:

mvn install

This will deploy the existing app to your emulator (you did have your emulator running as per the linked post above, right?).  Go into the app menu in your emulator and launch your app.  You'll see a basic white-on-black "Hello World!".  Go ahead and exit the app (back arrow). Let's make that a little brighter.

We'll cheat a bit.  Copy src/main/android/res/values/strings.xml to src/main/android/res/values/colors.xml

Now, in the new colors.xml, replace the <string /> tags with these:

    <color name="black">#000000</color>
    <color name="cornsilk">#fff8dc</color>

Next, we update the main.xml...
Add this to your LinearLayout:

    android:background="@color/cornsilk"

Add this to your TextView:

    android:textColor="@color/black"

Now when we redeploy (mvn clean install), the app is now showing "Hello World!" in black on cornsilk.