Layout in Android part 1

1. What is Layout in Android?

Layout allows us to define the structure of a user interface. You can create a layout in two ways:

  • Declaring the XML file.
  • Created in runtime (rarely used).

The advantage of designing interface in XML allows you to separate the interface and code to control their behavior. This means that you can modify or adjust the interface without the need to intervene at the source code and recompile. Also the way are easy to figure out the structure of the interface you want to create. So in this article I will only speak to how to create a layout in XML files.

2. Create layouts in XML files:

Each layout file must contain a root element, which is an object View or ViewGroup. When the root element is defined, you can add the other layout object from which gradually build interfaces with the View hierarchy system. For example, here is a LinearLayout have orientation = “vertical” (arranged vertically), which contains two EditText, a child can LinearLayout orientation = “horizontal” in the layout contains two buttons, and a TextView.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
 
    <EditText
        android:id="@+id/txtUsername"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Username"
        android:inputType="text"
        >
        <requestFocus />
    </EditText>
 
    <EditText
        android:id="@+id/txtPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPassword"
        android:hint="Password"
        />
 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
 
        <Button
            android:id="@+id/btnLogin"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:background="#FFD57D"
            android:gravity="center"
            android:text="Login" />
 
        <Button
            android:id="@+id/btnClear"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:background="#FF9900"
            android:gravity="center"
            android:text="Clear" />
 
    </LinearLayout>
 
    <TextView
        android:id="@+id/lblResult"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Result: " />
 
</LinearLayout>
XML layout files must be placed in the /res/layout.
Layout in Android 1

3. Read the information from file XML layout:

When your application is compiled, each XML layout files will be a resource view. You can load the layout of your application code by calling the method setContentView (). Parameter passed to it to refer to your layout in the form: R.layout.layout_file_name. For example, your layout XML file is stored in file main.xml, then the code to load this layout would look like this:

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

4. Attributes:

Each object has its View and ViewGroup attributes describe their functions. Each object will have some its own attributes (for example Textsize’s own attribute TextView). Some attributes are common to all View objects, because they inherited from the View (for example attributes id).

ID:

Any object View can also have a id attribute, to determine for this View. Declaring the XML file, this id is usually assigned by a string. These are attributes common to all objects View and you will often use it. The syntax for the id attribute in XML tag would look like this:

android:id=”@+id/name_id”

Character @ indicates that the XML parser will analyze later of the id string and define them as a resource id, the “+” means this is a new object should be created and added to the resource (file R. java). You can create a complete object as follows:

<Button
android:id=”@+id/btnLogin”
style=”?android:attr/buttonStyleSmall”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginLeft=”10dp”
android:layout_marginRight=”10dp”
android:layout_weight=”1″
android:background=”#FFD57D”
android:gravity=”center”
android:text=”Login” />

And you can refer to the Button instance as follows:

Button btn = (Button)findViewById(R.id.btnLogin);

Layout position:

View more like a rectangle. Location the View are determined with a pair of coordinates left, top and two dimensions: width, height. Unit to determine the location and size are pixels.

You can determine the location the View by calling getLeft () and getTop (). They will in turn return the left and top position in comparison with parent elements that contain View. When getLeft () returns 20, which means the location of View is a left margin the 20 pixels compared to parent elements. Alternatively you can use GetRight function (), getBottom () to avoid unnecessary calculations. For example, when you call GetRight () is like doing calculations: getLeft () + getWidth ().

Size, Padding, Margin:

  • Size of View is shown with a width and length. Indeed a View has 2 pairs of value width and length.
  • The first pair is known as the measured width and height measured. It defines the size of the View magnitude compared to parent elements. You can get this value by calling getMeasuredWidth () and getMeasuredHeight ().
  • The second pair is the width and the actual length of the View is displayed on the screen. The corresponding value is returned if you call getWidth () and getHeight ().
  • Padding is the distance between the content and the edges (left, top, right, bottom) of View. Using the method set (int, int, int, int) to set the values for padding and query by calling the getPaddingLeft function (), getPaddingTop (), getPaddingRight (), getPaddingBottom ().
  • Each View can define the padding value, but it does not provide any assistance to the margin. However View Groups there.

2 Responses

  1. Leo 1 year ago

Add Comment