Saturday, January 8, 2011

Different font style using HTML tag and change background color

If you have a little knowledge on developing websites before, the below tags will be used commonly such as <i> <b> <u> <a href>. We will also try to change color for words and also the background color of your apps.

Tips: After booting up the emulator, actually no need close it if you want to do another testing, when you click "Run" again, it will reboot the application inside the emulator for you, it saves time.

Did you ever think of what should we do if you want to make some of the words bold, italic, underline or set a hyperlink in your apps?

It is pretty easy actually, go to the res>values>strings.xml, you may see
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">O My God,Android, this is the strings.xml!</string>
<string name="app_name">Hello,Android, the string is inside res/values</string>
</resources>


In the above example, you may actually try to insert those tag directly and see the result.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello"><b>O My God</b><i>,Android</i>,<u> this is</u> the <a href="rickiedroid.blogspot.com"> strings.xml</a>!</string>
<string name="app_name">Hello,Android, the string is inside res/values</string>
</resources>

Run History > HelloAndroid.java
so what you can see is that
"O My God" become bold,
"Android" become italic,
" this is" is underlined and
"strings.xml" contains a hyperlink rickiedroid.blogspot.com

Notes: In Emulator, the hyperlink is non-clickable and you cannot highlight the words. If I'm wrong on this, please alert me.












To configure the font color, you must add one line in the res>layout>main.xml.
On the right figure, shows there are actually lots of options can be used through auto complete by Eclipse.

In the example, we use textColor to change the font color.

First, we create one more xml file in res>values so that our program will be more organized.

  • To create a xml file, right click on values folder under res, click New>Android XML File


  • Insert a name for the file, File : colors.xml
    Ignore all other selection, click Finish
    A file in res>values>colors.xml is created.


  • To insert a font color, xml element follow this method
    <
    color name="fontname">#Hexvalue</color>
  • So we should insert the xml into the colors.xml like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="fontcolor">#4FC32C</color>
<!-- kind of green in Hex value -->
</resources>


  • Go to the res>layout>main.xml to add in one more lines,

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/textview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="@color/fontcolor"
android:text="@string/hello" />


  • So you can see, under the id:textview, string:hello, the text color will follow the color:fontcolor.


  • We now want to change the background color. Add in one more line to set the background color. #ffffff is white color in Hex value

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:textColor="@color/fontcolor"
    android:text="@string/hello" />

  • So now we can see what is happened obviously after adding in this line.
This session is complete, you may leave comment if you are confuse or not satisfy with the post. The coming up post will share about how to configure rows and create columns.

3 comments:

  1. you can also write android:textColor="#333333" without writing them in another xml file

    ReplyDelete
  2. yup, thanks for the suggestion. It is the best and easiest way to write as what you said for any simple application.
    If you are handling a bigger app, you will wish to monitor and manage all colors, so here comes in the xml.

    ReplyDelete
  3. I really appreciate the way you explained everything I actually learned allot just from this small tutorial. Thank you

    ReplyDelete