Understanding Layout Managers

Android offers a collection of view classes that act as containers for views. These
container classes are called layouts (or layout managers), and each implements a
specific strategy to manage the size and position of its children.
• For example, the LinearLayout class lays out its children either horizontally or
vertically, one after the other.
• All layout managers derive from the View class, therefore you can nest layout
managers inside of one another.
Layout Managers:
LinearLayout :Organizes its children either
horizontally or vertically
TableLayout :Organizes its children in tabular form
RelativeLayout :Organizes its children relative to
one another or to the parent
FrameLayout :Allows you to dynamically change
the control(s) in the layout
GridLayout :Organizes its children in a grid
arrangement
The LinearLayout Layout Manager
The LinearLayout layout manager is the most basic. This layout
manager organizes its children either horizontally or vertically based
on the value of the orientation property.
LinearLayout with a Horizontal Configuration
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_
<!-- add children here-->
</LinearLayout>

• You can create a vertically orientedLinearLayout by setting the

value of orientation to vertical.
• layout managers can be nested, you could, for example,
construct a vertical layout manager that contained horizontal
layout managers
 Understanding Weight and Gravity
Other important properties that can affect size and position of child controls are weight and
gravity.
You use weight to assign size importance to a control relative to the other controls in the
container.
• Suppose a container has three controls: one has a weight of 1, whereas the others have a
weight of 0. In this case, the control whose weight equals 1 will consume the empty space
in the container.
• Gravity is essentially alignment. For example, if you want to align a label’s text to the right,
you would set its gravity to right. There are quite a few possible values for gravity, including
left, center, right, top, bottom,center_vertical, clip_horizontal, and others.
Using the Linear Layout layout manager
 Three Text Fields Arranged Vertically in a
LinearLayout, Using Default Values for Weight and Gravity
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:layout_width="fill_parent“
android:layout_height="wrap_content"
android:text="one"/>
<EditText android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="two"/>
<EditText android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="three"/>
</LinearLayout>
The UI in the center uses the default value for weight but sets android:gravity for the controls in
the container to left, center, and right, respectively.
The last example sets the android:layout_weight attribute of the center component to 1.0
and leaves the others to the default value of 0.0
By setting the weight attribute to 1.0 for the middle component and leaving the weight
attributes for the other two components at 0.0, we are specifying that the center
component should take up all the remaining whitespace in the container and that the other
two components should remain at their ideal size.
LinearLayout with Weight Configurations
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:layout_width="fill_parent"
android:layout_weight="0.0"
android:layout_height="wrap_content" android:text="one"
android:gravity="left"/>
<EditText android:layout_width="fill_parent"
android:layout_weight="1.0"
android:layout_height="wrap_content" android:text="two"
android:gravity="center"/>
<EditText android:layout_width="fill_parent"
android:layout_weight="0.0"
android:layout_height="wrap_content" android:text="three"
android:gravity="right"
/>
</LinearLayout>
android:gravity vs. android:layout_gravity

Here’s the difference:

android:gravity is a setting used by the view, whereas
android:layout_gravity is used bycontainer(android.view.ViewGroup).

For example, you can set android:gravity to center to have the text in
the EditText centered within the control. Similarly, you can align an
EditText to the far right of a LinearLayout (the container) by setting
android:layout_gravity=“right”
Understanding the Difference Between android:gravity
and android:layout_gravity
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:layout_width="wrap_content"
android:gravity="center"
android:layout_height="wrap_content" android:text="one"
android:layout_gravity="right"/>
</LinearLayout>
 The TableLayout Layout Manager

The TableLayout layout manager is an extension of LinearLayout. This layout manager

structures its child controls into rows and columns.
A Simple TableLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_
<TableRow>
<TextView android:text="First Name:"
android:layout_width="wrap_content" android:layout_height="/>
<EditText android:text="Edgar"
android:layout_width="wrap_content" android:layout_height="/>
</TableRow>
<TableRow>
<TextView android:text="Last Name:"
android:layout_width="wrap_content" android:layout_height="/>
<EditText android:text="Poe"
android:layout_width="wrap_content" android:layout_height="/>
</TableRow>
</TableLayout>
To use this layout manager, you create an instance of TableLayout and place TableRow
elements within it. These TableRow elements contain the controls of the table.
The RelativeLayout Layout Manager
As the name suggests, this layout manager implements a policy where the controls in
the container are laid out relative to either the container or another control in the
container
android:layout_width="fill_parent" android:layout_height="android:text="Username: "
android:layout_alignParentTop="true" />
<EditText android:id="@+id/userNameText"
android:layout_width="fill_parent"
android:layout_height="android:layout_toRightOf="@id/userNameLbl" />
<TextView android:id="@+id/pwdLbl"
android:layout_width="wrap_content"
android:layout_height="android:layout_below="@id/userNameText"
android:text="Password: " />
<EditText android:id="@+id/pwdText"
android:layout_width="fill_parent"
android:layout_height="android:layout_toRightOf="@id/pwdLbl"
android:layout_below="@id/userNameText" />
<TextView android:id="@+id/pwdCriteria"
android:layout_width="fill_parent"
android:layout_height="android:layout_below="@id/pwdText"
android:text="Password Criteria… " />
<TextView android:id="@+id/disclaimerLbl"
android:layout_width="fill_parent"
android:layout_height="android:layout_alignParentBottom="true"
android:text="Use at your own risk… " />
</RelativeLayout>
As shown, the UI looks like a simple login form.
The username label is pinned to the top of the container, because we set
android:layout_alignParentTop to true.
Similarly, the Username input field is positioned below the Username label because we set
android:layout_below.
The Password label appears below the Username label, and the Password input field
appears below the Password label.
The disclaimer label is pinned to the bottom of the container because we set
android:layout_alignParentBottom to true.
Besides these three layout attributes, you can also specify layout layout_above,
layout_toRightOf, layout_toLeftOf, layout_centerInParent
The FrameLayout Layout Manager
The layoutmanagers, you can have many controls on the screen at one time, each taking up a
portion of the screen.
Android also offers a layout manager that is mainly used to display a single item:
FrameLayout. You mainly use this utility layout class to dynamically display a single view, but
you can populate it with many items, setting one to visible while the others are invisible.

Populating FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/frmLayout"
android:layout_width="fill_parent" android:layout_height="fill_<ImageView
android:id="@+id/oneImgView"
android:src="@drawable/one"
android:scaleType="fitCenter"
android:layout_width="fill_parent" android:layout_height="<ImageView
android:id="@+id/twoImgView"
android:src="@drawable/two"
android:scaleType="fitCenter"
android:layout_width="fill_parent"
android:layout_height="android:visibility="gone" />
</FrameLayout>
public class FrameLayoutActivity extends Activity{
private ImageView one = null;
private ImageView two = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.listing6_48);
one = (ImageView)findViewById(R.id.oneImgView);
two = (ImageView)findViewById(R.id.twoImgView);
one.setOnClickListener(new OnClickListener(){
public void onClick(View view) {
two.setVisibility(View.VISIBLE);
view.setVisibility(View.GONE);
}});
two.setOnClickListener(new OnClickListener(){
public void onClick(View view) {
one.setVisibility(View.VISIBLE);
view.setVisibility(View.GONE);
}});
}
}
shows the layout file as well as the onCreate() method of the activity.
The idea of the demonstration is to load two ImageView objects in the FrameLayout,
with only one of the ImageView objects visible at a time. In the UI, when the user clicks
the visible image, we hide one image and show the other one.
Working with Menus and Action Bars
Android SDK supports regular menus, submenus, context menus, icon menus, and
secondary menus.
Android 3.0 introduced the action bar, which integrates well with menus

Working with Menus Through XML Files

In Android the easiest way to work with menus is through XML menu resource files.
This XML approach to menu creation offers several advantages, such as the ability to name
menus, order them automatically, and allocate IDs

Creating XML Menu Resource Files

a series of menu items grouped together under a group XML node.
• You can specify an ID for the group using the @+id resource reference approach.
• You can use this ID in java code to get access to the menu group and manage it when
needed.
• Grouping is optional and you can omit the group XML node.
Each menu XML file has a series of menu items with their menu item IDs tied to
symbolic
names. The title indicates the menu title, and the orderInCategory indicates the
order in which the menu item appears in the menu.
Menu XML Resource File with Menu Definitions
<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/menuGroup_Main">
<item android:id="@+id/menu_item1"
android:orderInCategory="1"
android:title="item1 text" />
<item android:id="@+id/menu_item2"
android:orderInCategory="2"
android:enabled="true"
android:icon="@drawable/some-file"
android:title="item2 text" />
<item android:id="@+id/menu_item3"
android:orderInCategory="3"
android:title="item3 text" />
</group>
</menu>
how we take this menu XML file and associate it with an activity.
Populating Activity Menu from Menu XML Files
Assume that the name of the menu XML file is my_menu.xml. You need to place
this
file in the /res/menu subdirectory.
Placing the file in /res/menu automatically generates a resource ID called
R.menu.my_menu.
The key class in Android menu support is android.view.Menu.
Every activity in Android is associated with one menu object of this type.
In the life cycle of an activity Android calls a method called onCreateOptionsMenu() to
populate this Menu object.
In this method we load the XML menu file into the Menu object
This slide will walk through Android options menu example using
getMenuInflater().inflate, onCreateOptionsMenu and onOptionsItemSelected.
• Options menu is the primary collection of menu items. Other menu types are Context
menu which displays on long click on an element and Popup menu which displays a list
of items in vertical list. Before Android 3, options menu is displayed by clicking menu
button.
• In Android 3 and later, options menu is shown in action bar. Menu item can be search,
save, print, delete, bookmark etc.
• To create menu we have to override onCreateOptionsMenu, in which we use
getMenuInflater().inflate that inflates a menu hierarchy from XML resource.
• To handle click event, override onOptionsItemSelected in Activity class.
 <menu
xmlns:android="http://schemas.android.com/a
pk/res/android">
<item android:id="@+id/bookmark_menu"
android:title="@string/bookmark"
android:showAsAction="ifRoom"/>
</menu>
<menu>: Root node that contains one or more item.
<item>: It represents menu items.
android:id: Unique ID for the item.
android:title : Title for the item.
android:showAsAction : It specifies how an item to be shown as an action
item. The value can be ifRoom, never, withText, always,
collapseActionView.