Android - Views, Layouts


Android - What are Views, Layouts?
This class represents the basic building block for user interface components. A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.). The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.

Using Views

All of the views in a window are arranged in a single tree. You can add views either from code or by specifying a tree of views in one or more XML layout files. There are many specialized subclasses of views that act as controls or are capable of displaying text, images, or other content.
Once you have created a tree of views, there are typically a few types of common operations you may wish to perform:
  • Set properties: for example setting the text of a TextView. The available properties and the methods that set them will vary among the different subclasses of views. Note that properties that are known at build time can be set in the XML layout files.
  • Set focus: The framework will handled moving focus in response to user input. To force focus to a specific view, call requestFocus().
  • Set up listeners: Views allow clients to set listeners that will be notified when something interesting happens to the view. For example, all views will let you set a listener to be notified when the view gains or loses focus. You can register such a listener using setOnFocusChangeListener(android.view.View.OnFocusChangeListener). Other view subclasses offer more specialized listeners. For example, a Button exposes a listener to notify clients when the button is clicked.
  • Set visibility: You can hide or show views using setVisibility(int) .


Layouts 


View Group
A ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the ViewGroup.LayoutParams class which serves as the base class for layouts parameters.

Layout 

Your layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user. You can declare your 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 six different layouts are
1. Linear Layout
2. Relative Layout
3. Table Layout
4. Grid View
5. Tab Layout
6. List View
Android allows you to create view layouts using simple XML file. All the layouts must be placed in /res/layout folder.

Android Layout Directory

Mostly in many applications we use “Linear Layout” and “relative layout” only. So we will learn these layouts below.

Linear Layout

In a linear layout, like the name suggests, all the elements are displayed in a linear fashion, either Horizontally or Vertically and this behavior is set in android:orientation which is an attribute of the node LinearLayout.
i.e.
Example of Vertical layout
1
<LinearLayout android:orientation="vertical"> .... </LinearLayout>

Example of Horizontal layout
1
<LinearLayout android:orientation="horizontal"> .... </LinearLayout>
Let’s create project:
1) Create a new project File -> New -> Android Project
2) Create linear_layout.xml in res/layout and insert following
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?xml version="1.0" encoding="utf-8"?>

  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Email:" />
  <EditText android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>            
  <Button android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Login"/>
 <LinearLayout android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="#2a2a2a"
            android:layout_marginTop="10dp">
  <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Home"
            android:gravity="center"/>
  <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="About"
            android:paddingLeft="8dp"
            android:gravity="center"/>  
  </LinearLayout>
</LinearLayout>


Linear Layout Output
Here Email TextView, EditText and Login Button are vertical in layout. whereas Home and about are in horizontal layout.

Relative Layout

In a relative layout every element arranges itself relative to other elements or a parent element.

Relative To Container

These properties will layout elements relative to the parent container.
1) android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container
2) android:layout_alignParentLeft – Places the left of the element on the left side of the container
3) android:layout_alignParentRight – Places the right of the element on the right side of the container
4) android:layout_alignParentTop – Places the element at the top of the container
5) android:layout_centerHorizontal – Centers the element horizontally within its parent container
6) android:layout_centerInParent – Centers the element both horizontally and vertically within its container
7) android:layout_centerVertical – Centers the element vertically within its parent container

Example


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/button01"
        android:text="Top Button Horizontally center"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:textSize="10sp"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/button02"
        android:text="Bottom Button Horizontally center"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:textSize="10sp"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/button03"
        android:text="Left Button Vertically center"
        android:layout_width="wrap_content"
        android:textSize="10sp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content" /> 
<Button
        android:id="@+id/button04"
        android:text="Right Button Vertically center"
        android:layout_width="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textSize="10sp"
        android:layout_height="wrap_content" />
</RelativeLayout>


Relative Layout Output-1

Relative To Other Elements

These properties allow you to layout elements relative to other elements on screen.
1) android:layout_above – Places the element above the specified element
2) android:layout_below – Places the element below the specified element
3) android:layout_toLeftOf – Places the element to the left of the specified element
4) android:layout_toRightOf – Places the element to the right of the specified element

Example


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/button01"
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button01"
        android:layout_marginLeft="8dp"
        android:text="To the RightOf Button1"/>
    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:layout_alignParentRight="true"
        android:text="Button 2"/>
    <Button
        android:id="@+id/button04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:layout_toLeftOf="@id/button03"
        android:text="To Left of Button 2"/>
</RelativeLayout>


Relative Layout output-2

Alignment With Other Elements

These Properties allow you to specify how elements are aligned in relation to other elements.
1) android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element
2) android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element
3) android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element
4) android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element
5) android:layout_alignTop – Places top of the new element in alignment with the top of the specified element

Example


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button-2 right boundary aligned with this button"/>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button-2"
        android:layout_below="@id/button01"
        android:layout_alignRight="@+id/button01"/>
</RelativeLayout>

Comments

Post a Comment

Popular posts from this blog

public vs protected vs default access modifiers - Java

| Class | Package | Subclass | Subclass | World | | |(same pkg)|(diff pkg)| ————————————+———————+—————————+——————————+——————————+———————— public | + | + | + | + | + ————————————+———————+—————————+——————————+——————————+———————— protected | + | + | + | + | ————————————+———————+—————————+——————————+——————————+———————— no modifier | + | + | + | | ————————————+———————+—————————+——————————+——————————+———————— private | + | | | | + : accessible blank : not accessible
Read more

Class, Reference and Object

If you like housing metaphors a  class  is like the blueprint for a house. Using this blueprint, you can build as many houses as you like. each house you build (or instantiate, in OO lingo) is an  object , also known as an  instance . each house also has an address, of course. If you want to tell someone where the house is, you give them a card with the address written on it. That card is the object's  reference . If you want to visit the house, you look at the address written on the card. This is called  dereferencing . You can copy that reference as much as you like, but there's just one house -- you're just copying the card that has the address on it, not the house itself. Java methods are always pass-by-value, but the value could be an object's reference. So, if I have: Foo myFoo = new Foo (); // 1 callBar ( myFoo ); // 2 myFoo . doSomething () // 4 void callBar ( Foo foo ) { foo = new Foo (); ...
Read more