Android Tutorial

Android LinearLayout example

What is Android layout?
Layout denotes the architecture of the application, where and how the controls should be organized in the UI.It defines the layout structure and holds all the elements that appear to the user.
Android allows us to create layouts for the applications using simple XML file and those layouts must be placed in /res/layout folder.
We can declare the layout in two ways and here we will discuss first way of doing it:
  1. Declare UI elements in XML
  2. Create UI elements at runtime using Java.
 
Different kinds of layouts in Android are:

Linear layout
In a linear layout, as the name suggests, all the controls are displayed in a linear/sequential fashion, either Horizontally or Vertically and this behavior is set in android:orientation attribute of the node LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
</LinearLayout>
Why Linear layout?
LinearLayout – designed to display child View controls in a single row or column. So it is a very handy layout method for creating forms.
Layout architecture:
New Visitor? Like what you read? Then do subscribe to our blog
Subscribe
The application that we are developing has a simple screen with two linear layouts:
1.Parent layout
2.Child layout.
In parent layout, the controls are organized within a vertically oriented linear layout and in child layout, the controls are organized within a horizontally oriented linear layout.

Create layout XML
  • Create new android project [File >> New >> Android Project] with project name LinearLayoutExample
  • Click next and select target android device version [I chose version 2.2]
  • Click next and enter package name
  • Click finish
By default main.xml will be created (can be found under /res/layout folder) when you create new project and the same is set as layout for the application using setContentView(R.layout.main)method. Check the onCreate method in LinearLayoutExampleActivity class to know about how the layout xml is set:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);       
setContentView(R.layout.main);
}

Open main.xml, now you can view the layout as either XML or in graphical layout and just replace the XML with below one:
xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<EditText
android:id="@+id/editText1" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Username" >
<requestFocus />
</EditText>

<EditText
android:id="@+id/editText2"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword" />

<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender"
android:textAppearance="?android:attr/textAppearanceMedium" />

<RadioButton
android:id="@+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male" />

<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Female" />
</LinearLayout>
</LinearLayout>
How the controls are arranged on the screen?:
Click the below image and take a look at the way the controls are arranged for the XML we added above:
  • Two EditView controls(Username and password) and button control are arranged in vertical fashion since the android:orientation attribute of the node LinearLayout is set to ‘vertical’
  • TextView(Gender) and two radio buttons(Male and Female) are arranged horizontally since the android:orientation attribute of the node LinearLayout is set to ‘horizontal’
Run the application
Let us test the application:
Run click on the project >> Run as >> Android application
You could see following screen:

Entire project is zipped and is available for download. Unzip the downloaded project and to import the project into eclipse, launch eclipse >> File >> Import.. >> Choose downloaded project(How to import android project in eclipse). If you just want to run the application in your mobile and see the output but don’t want to hit your head with source code, download application(apk) file and install it in your mobile device. Download Source CodeDownload Application(apk)*apk in Android is the installation file simliar to exe in windows.
I hope you enjoyed the post!! :)

0 nhận xét:

Post a Comment