Android – Going down with Style

Android allows to use styles and themes to define the appearance of the user interface. This blog entry will demonstrate how to use styles in your application.

First create a new Android project “de.vogella.android.styles.simple” with the following main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<TableLayout android:layout_height="wrap_content"
		android:stretchColumns="1" android:id="@+id/tableLayout1"
		android:layout_width="fill_parent">
		<TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content"
			android:layout_height="wrap_content">
			<TextView android:text="User" android:id="@+id/textView1"
				android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
			<EditText android:id="@+id/editText1" android:layout_width="wrap_content"
				android:layout_height="wrap_content">
				<requestFocus></requestFocus>
			</EditText>
		</TableRow>
		<TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content"
			android:layout_height="wrap_content">
			<TextView android:text="Password" android:id="@+id/textView2"
				android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
			<EditText android:id="@+id/editText2" android:layout_width="wrap_content"
				android:layout_height="wrap_content"></EditText>
		</TableRow>
	</TableLayout>
</LinearLayout>

This gives us the following wounderful UI.

Lets make the UI a bit nicer. The typical way would be to set attributes to the elements in the UI until we are fine with the result. In addition to this approach you can also define styles which you can assign to the elements. This way you only have to set common attributes once and can later change the look in one central place.

To start create the XML file “styles.xml” under /res/xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="text">
        <item name="android:padding">4dip</item>
        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
        <item name="android:textColor">#000000</item>
    </style>
    <style name="layout">
        <item name="android:background">#C0C0C0</item>
    </style>
</resources>

You now assign the style attribute to your elements, for example to the text elements via style=”@style/text”.

If you apply the style to your text elements and layout you receive.

I hope this helps.

You find me also on Twitter and Google+.

About Lars Vogel

Lars Vogel is the founder and CEO of the vogella GmbH and works as Eclipse and Android consultant, trainer and book author. He is a regular speaker at international conferences, He is the primary author of vogella.com. With more than one million visitors per month this website is one of the central sources for Java, Eclipse and Android programming information.
This entry was posted in Android and tagged , . Bookmark the permalink.

One Response to Android – Going down with Style

  1. hhex50 says:

    Thanks a lot. Helpful for a newbie like me.

Comments are closed.