Monday, 23 November 2015

Android Layouts

22:17

Layouts

In this document:

1.       Write the XML
3.    Types of layout

4 . SIMPLE PRACTICAL EXAMPLE  FOR LAYOUT

See also

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) programmatically.
The Android framework gives you the flexibility to use either or both of these methods for declaring and managing your application's UI. For example, you could declare your application's default layouts in XML, including the screen elements that will appear in them and their properties. You could then add code in your application that would modify the state of the screen objects, including those declared in XML, at run time.
·         The ADT Plugin for Eclipse offers a layout preview of your XML — with the XML file opened, select theLayout tab.
·         You should also try the Hierarchy Viewer tool, for debugging layouts — it reveals layout property values, draws wireframes with padding/margin indicators, and full rendered views while you debug on the emulator or device.
·         The layoutopt tool lets you quickly analyze your layouts and hierarchies for inefficiencies or other problems.
The advantage to declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls its behavior. Your UI descriptions are external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile. For example, you can create XML layouts for different screen orientations, different device screen sizes, and different languages. Additionally, declaring the layout in XML makes it easier to visualize the structure of your UI, so it's easier to debug problems. As such, this document focuses on teaching you how to declare your layout in XML. If you're interested in instantiating View objects at runtime, refer to the ViewGroup and View class references.
In general, the XML vocabulary for declaring UI elements closely follows the structure and naming of the classes and methods, where element names correspond to class names and attribute names correspond to methods. In fact, the correspondence is often so direct that you can guess what XML attribute corresponds to a class method, or guess what class corresponds to a given XML element. However, note that not all vocabulary is identical. In some cases, there are slight naming differences. For example, the EditText element has a text attribute that corresponds to EditText.setText().
Tip: Learn more about different layout types in Common Layout Objects.

Write the XML


Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create web pages in HTML — with a series of nested elements.
Each layout file must contain exactly one root element, which must be a View or ViewGroup object. Once you've defined the root element, you can add additional layout objects or widgets as child elements to gradually build a View hierarchy that defines your layout. For example, here's an XML layout that uses a vertical LinearLayout to hold a TextView and a Button:
<?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" >

    <TextView android:id="@+id/text"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:text="Hello, I am a TextView" />

    <Button android:id="@+id/button"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Hello, I am a Button" />

</LinearLayout>
After you've declared your layout in XML, save the file with the .xml extension, in your Android project'sres/layout/ directory, so it will properly compile.
More information about the syntax for a layout XML file is available in the Layout Resources document.

Load the XML Resource


When you compile your application, each XML layout file is compiled into a View resource. You should load the layout resource from your application code, in your Activity.onCreate() callback implementation. Do so by calling setContentView(), passing it the reference to your layout resource in the form of:R.layout.layout_file_name. For example, if your XML layout is saved as main_layout.xml, you would load it for your Activity like so:
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main_layout);

}
The onCreate() callback method in your Activity is called by the Android framework when your Activity is launched (see the discussion about lifecycles, in the Activities document).

Attributes


Every View and ViewGroup object supports their own variety of XML attributes. Some attributes are specific to a View object (for example, TextView supports the textSize attribute), but these attributes are also inherited by any View objects that may extend this class. Some are common to all View objects, because they are inherited from the root View class (like the id attribute). And, other attributes are considered "layout parameters," which are attributes that describe certain layout orientations of the View object, as defined by that object's parent ViewGroup object.

ID

Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. When the application is compiled, this ID is referenced as an integer, but the ID is typically assigned in the layout XML file as a string, in the id attribute. This is an XML attribute common to all View objects (defined by the View class) and you will use it very often. The syntax for an ID, inside an XML tag is:
android:id="@+id/my_button"
The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource. The plus-symbol (+) means that this is a new resource name that must be created and added to our resources (in the R.java file). There are a number of other ID resources that are offered by the Android framework. When referencing an Android resource ID, you do not need the plus-symbol, but must add the android package namespace, like so:
android:id="@android:id/empty"
With the android package namespace in place, we're now referencing an ID from the android.R resources class, rather than the local resources class.
In order to create views and reference them from the application, a common pattern is to:
1.    Define a view/widget in the layout file and assign it a unique ID:
<Button android:id="@+id/my_button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/my_button_text"/>
2.    Then create an instance of the view object and capture it from the layout (typically in the onCreate()method):
Button myButton = (Button) findViewById(R.id.my_button);
Defining IDs for view objects is important when creating a RelativeLayout. In a relative layout, sibling views can define their layout relative to another sibling view, which is referenced by the unique ID.
An ID need not be unique throughout the entire tree, but it should be unique within the part of the tree you are searching (which may often be the entire tree, so it's best to be completely unique when possible).


Types of Layout   :
  
There are many types of layout. Some of which are listed below:
·        Linear Layout
·        Absolute Layout
·        Table Layout
·        Frame Layout
·        Relative Layout
Linear Layout
Linear layout is further divided into horizontal and vertical layout. It means it can arrange views in a single column or in a single row. Here is the code of linear layout(vertical) that includes a text view.
<?xml version=”1.0 encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
  
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>
AbsoluteLayout
The AbsoluteLayout enables you to specify the exact location of its children. It can be declared like this.
<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
  
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>
TableLayout
The TableLayout groups views into rows and columns. It can be declared like this.
<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
  
   <TableRow>
      <TextView
      android:text=”User Name:”
      android:width =”120dp”
      />
     
      <EditText
      android:id=”@+id/txtUserName”
      android:width=”200dp” />
   </TableRow>
  
</TableLayout>
RelativeLayout
The RelativeLayout enables you to specify how child views are positioned relative to each other.It can be declared like this.
<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>
FrameLayout
The FrameLayout is a placeholder on screen that you can use to display a single view. It can be declared like this.
<?xml version=”1.0 encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
  
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>
Apart form these attributes, there are other attributes that are common in all views and ViewGroups. They are listed below −
Sr.No
View & description
1
layout_width
Specifies the width of the View or ViewGroup
2
layout_height
Specifies the height of the View or ViewGroup
3
layout_marginTop
Specifies extra space on the top side of the View or ViewGroup
4
layout_marginBottom
Specifies extra space on the bottom side of the View or ViewGroup
5
layout_marginLeft
Specifies extra space on the left side of the View or ViewGroup
6
layout_marginRight
Specifies extra space on the right side of the View or ViewGroup
7
layout_gravity
Specifies how child Views are positioned
8
layout_weight
Specifies how much of the extra space in the layout should be allocated to the View
Units of Measurement
When you are specifying the size of an element on an Android UI, you should remember the following units of measurement.
Sr.No
Unit & description
1
dp
Density-independent pixel. 1 dp is equivalent to one pixel on a 160 dpi screen.
2
sp
Scale-independent pixel. This is similar to dp and is recommended for specifying font sizes
3
pt
Point. A point is defined to be 1/72 of an inch, based on the physical screen size.
4
px
Pixel. Corresponds to actual pixels on the screen
Screen Densities

Sr.No
Density & DPI
1
Low density (ldpi)
120 dpi
2
Medium density (mdpi)
160 dpi
3
High density (hdpi)
240 dpi
4
Extra High density (xhdpi)
320 dpi

see simple example to design  a simple userinterface:
step 1:
Go to file Menu  & click on  NEW PROJECT:

STEP 2:
THEN SELECT  MINIMUM SDK  MEANS YOUR TARGET ANDROID VERSION ...SUPPORT AT LEAST PREVIOUS VERSION UPTO THAT SDK VERSION.


 STEP 3:
THEN CLICK ON BLANK ACTIVITY :
 STEP  4: THEN  ENTER YOUR  ACTIVITY NAME,LAYOUT NAME,TITLE ,MENU RESOURCE NAME :

STEP 5: THEN YOU WILL SEE FOLLOWING  DIRECTORY STRUCTURE:



 STEP 6: GO TO LAYOUT FOLDER CLICK ON  content_main.xml  file  & then clik at bottom on Design  then you will see:

 STEP 7: Go to Layouts  section of Design  & select Layout & Drag & drop that Layout for example LinearLayout(vertical)..  etc.



STEP 8: THEN  GO TO Widgets under that section you will get all user components like Text,Button etc.  Drag and Drop  Large Text Component to  that  design ...of  Layout..shown in Mobile..


STEP  9: THEN DARAG AND DROP BUTTON TO  LAYOUT DESIGN AS SHOWN :


 STEP 10: ASSIGN ATTRIBUTE  ID  & TEXT  BY DOUBLE CLICK ON  NEW BUTTON AS SHOWN ABOVE   IMAGE & THEN ENTER YOUR TEXT & ID AS GIVEN BELWO IMAGE :



STEP 11: FINALLY YOU WILL  CLICK ON  "Text " AT BOTTOM THEN YOU WILL SEE XML CODE AS GIVEN BELOW  IMAGE:

Step 12:

Run Your Application :


STEP 13:
output will be look like this :


Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

3 comments:

  1. Having read this I believed it was very enlightening. I appreciate you spending some time and effort to put this information together on Android Training in Gurgaon NCR as it will help developers build great apps is what the Android Developer do. it was still worthwhile!

    ReplyDelete

 

© 2013 ANDROID TRAINING IN MUMBAI BY OM SIR. All rights resevered. Designed by Templateism

Back To Top