Pages

Monday, 11 August 2014

Layout



A layout defines the visual structure for a user interface, such as the UI for an activity or app widget. You can declare a layout in two ways:

  • Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.
  • Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties.
The Android framework gives you the flexibility to use either or both of these methods for declaring and managing your application's UI.

There are six different layouts:
  1. Linear Layout
  2. Relative Layout
  3. Table Layout
  4. Grid Layout
  5. Tab Layout
  6. List View
 Note:All layout must be placed inside /res/layout folder of the project. File name of the layout must start with small letter and should not contain special characters except Under scope("_").






  1. Linear Layout

In Linear Layout the elements are align in a single or linear direction i.e. either Horizontally or Vertically. To specify the direction you have to use the android:orientation=" " attribute in the layout tag.

Simple Program show the Liner Layout

Step 1: Create a new Project
              File->New->Android Application Project.

Step 2: In Package Explorer Right Click on res/layout folder under your project
              Go to New->Android XML file->linear_layout.xml (you can use any
                  name you wish).

Step 3: Open the newly created xml file(linear_layout.xml) and write the below
              code.

linear_layout.xml

<?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:hint="@string/to"
        android:ems="10" >
    </EditText>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <
TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/send"
            android:textAlignment="center" />

        <TextView

            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/cancel"
            android:textAlignment="center" />
    </LinearLayout>

</
LinearLayout>

Step 4: To set this new xml view as the intial view of your app.
            Go to MainActivity.java you will see setContentView(R.layout.activity_main) inside onCreate(). Change R.layout.activity_main to R.layout.linear_layout.

MainActivity.java

package com.example.hello_world;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
}


Step 5: Now to run the code Right Click on project->Run As-> 1.Android Application. You should see the newly created linear layout in emulator.



No comments:

Post a Comment