Editing Base Layout

An android project is basically divided into 2 categories. They are * Source code and * Resources. Lets keep it that simple for now. The resources are classified into text(strings), images, sound, layout etc.. Images are placed under the folder "drawable". Layout is placed under "layout" folder. Colors and Strings are placed under the folder "values". These resources are defined using XML files. The layout of the base screen (the screen that appears when an app is opened) is defined in the file "main.xml" under layout folder. Check out the main.xml file of my project.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical"
	android:background="@color/red"
	>
	<!--
	The background can also be set as an image by replacing @color/red by @drawable/pic.jpg...
	where pic.jpg is an image file stored inside drawable folder...
	This is how we comment in .xml file...
	The layout of a screen in an android app can be customized by editing this main.xml
	file...
	As you can see below, u can edit it either by editing the text or thro' Graphical
	layout...
	TEXTVIEW is like a label in java swing...
	we kno about the BUTTON...
	EDITTEXT is like a textfield in swing...
	width and height can be adjusted using layout_width, layout_height...
	android:id is the unique id assigned to that particular component...
	@+id/id_name => for generating a new id
	@id/id_name => for accessing the component based on its id
	text can be set by using a string defined in values -> strings.xml
	similarly, colors are defined in values -> colors.xml
	take a look at colors.xml and strings.xml
	(colors.xml is manually created)
	images to be displayed are placed in any of the drawable folders...
	-->
	<TextView
	android:id="@+id/label"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:text="@string/some_text"
	android:layout_alignParentTop="true"
	/>
	<EditText
	android:id="@+id/textfield1"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:inputType="text"
	android:text="@string/text_field_string" />
	<Button
	android:id="@+id/button1"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_centerVertical="true"
	android:text="@string/button_text" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

Check out the colors.xml file mentioned in the main.xml file...

	<?xml version="1.0" encoding="utf-8"?>
	<!--
	colors are defined here...
	#abcdefgh
	ab-> transparency (ff => zero transparency; 00 => 100% transparency)...
	cd-> Red (R)
	ef-> Green (G)
	gh-> Blue (B)
	-->
	<resources>
	<color name="red">#ffff0000</color>
	</resources>

view raw colors.xml hosted with ❤ by GitHub

strings.xml is given below....

	<?xml version="1.0" encoding="utf-8"?>
	<!--
	here, strings are defined...
	a name and value and assigned to them here...
	-->
	<resources>
	<string name="hello">Hello World, SampleActivity!</string>
	<string name="app_name">Sample</string>
	<string name="some_text">A Sample App</string>
	<string name="button_text">Click me</string>
	<string name="text_field_string">This is a text field</string>
	</resources>

view raw strings.xml hosted with ❤ by GitHub

Check out some of the snaps below:

1. Our App with red background (#ffff0000) in the AVD:

2. Our App with background as "pic.jpg":

3. A snapshot of main.xml in Graphic Layout mode:

------------> Download Project here <---------------


Thats all for now guys! This post explains how to create the components in a layout and how to customize it. In the next post, we'll try to make these components (buttons, text fields, etc.) to work by adding event listeners to them. Stay tuned for more....