Android Tabager #3 All the colours of the rainbow

I'm going to have a quick look at changing the appearance of the app. There is almost an infinite amount of looks and styles, so I will keep it simple and make the changes I want for the app, which will show you some of the different ways to make changes.

You can later play around to your heart's content.

Step 1: Modifying the main.xml file

So to start open your main.xml file. Which is in the res -> layout...

Let's look at the first text view, which currently looks like this

So we've already set the size, but I'd like a fancy heading with some colour. I'm going to add android:textColor="#3191b3" to do this. So it's going to look like this.

Fantastic we have a nice ICS shade of blue now. Add this line to the rest of the headers so that ram info, cpu info and OS Details are also a spiffy shade of blue.

Have a try at changing the font type if you like, or different colours you can use any hexadecimal.

Now personally I'm not a fan of the blue against the black background, and I want to stand out more. So I'm going to add this line to the main.xml file in the first linear layout node android:background="#FFFFFF"

Here's what its going to look like:

This is going to make the background white, which will look very good with my shade of blue.

But wait the text by default is grey and doesn't look very good on the white background. We could go through and change all the text views to black, but I have better way in mind. I'm going to use a theme, this way I can set my background, text etc from one place and save myself a lot of trouble.

Step 2: themes.xml

In the values folder inside the res folder create a new xml file called themes.xml, a quick way to do this is to right click on the folder, select new and then android xml file. Insert the below code

All we've done here is to create a theme called CustomTheme and told it to inherit the properties of the holo light theme which is a default theme in android and is the light version of the default honeycomb theme.

Step 3: Set the theme in the AndroidManifest.xml

Next we need to tell the app to use it. Open up the AndroidManifest.xml and insert android:theme="@style/CustomTheme" into the application node

This will apply the theme to the entire app, you can also apply it to just certain activity's by placing it in a activity node.

Step 4: main.xml summary

Go back to your main.xml file and remove the android:background="#FFFFFF". The file should now look like this

Now run your app, you'll notice that theme has been applied and you still have a nice white background and black text. Job done!

A good read that goes into a little more detail is Styles and Themes | Android Developers.

Next time well be creating a database to store our rom versions: TabagerSchool:#4 Databases

TabagerSchool:#4 Databases...