Scribd
Upload
425 views

Android Layout

The document discusses Android interfaces and layouts. It provides two options for creating interfaces - using code or XML. The summary focuses on the XML option. XML interfaces are created by defining layouts in XML files located in res/layout. These XML files use a tree of XML elements where each node corresponds to an Android View class. Attributes can be set on each node to configure the View. The document provides an example XML layout and describes common layout and view tags used to define the structure and properties of interfaces.

Uploaded by

Miguel Narrea Jurado
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
425 views

Android Layout

The document discusses Android interfaces and layouts. It provides two options for creating interfaces - using code or XML. The summary focuses on the XML option. XML interfaces are created by defining layouts in XML files located in res/layout. These XML files use a tree of XML elements where each node corresponds to an Android View class. Attributes can be set on each node to configure the View. The document provides an example XML layout and describes common layout and view tags used to define the structure and properties of interfaces.

Uploaded by

Miguel Narrea Jurado
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 25

ANDROID INTERFACE AND

LAYOUT
L. Grewe

Interfaces: Two Alternatives


Code or XML
You have two ways you can create the
interface(s) of your Application.
1. Code = write code using SDK with
classes like LinearLayout, TextView,

2.

XML = create XML files in res/Layout (i.e.


main.xml) that contain Android XML view
tags like <LinearLayout> <TextView>,
etc.

Option: XML Interface


Lets look at this option first

XML Interface Creation

Generally, I would say if it is possible,


doing XML would be better as it means a
decoupling of design from Java code.
You can have both in your system.
Lets discuss this first.

The Layout --- the interface


Layouts defined
with XML
located in
res/layout

The Layout-the interface

res/layout/main.xml = contains layout for


interface

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout 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="@string/hello"
/>
</LinearLayout>

The above will create an interface in vertical (versus portrait) mode that fills the parent
Both in width and write and wraps and content as necessary.

XML interface

it's a tree of XML elements,

Inspired by web authoring

Build up UI quickly

each node is the name of a View class (example is just one


View element).

Create your own View ---extends

Each node can have multiple attributes

Look to API for details

XML interface

<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"/>

xmlns:android XML namespace declaration that tells the Android tools that
you are going to refer to common attributes defined in the Android
namespace. The outermost tag in every Android layout file must have this
attribute.

android:layout_width This attribute defines how much of the available width


on the screen this View should consume. As it's the only View so you want it
to take up the entire screen, which is what a value of "fill_parent" means.
android:layout_height This is just like android:layout_width, except that it
refers to available screen height.

android:text This sets the text that the TextView should display. In this
example, you use a string resource instead of a hard-coded string value.
The hello string is defined in the res/values/strings.xml file.

UsingEclipseIDEtoVisuallyCreate
XMLfile

Visual creation of XML file


Create New->Other->Android->XML file

Select for layout type


Play with it.
drag and drop

UsingEclipseIDEtoVisuallyCreate
XMLfile

Visual creation of XML file


Create New->Other->Android->XML file

Select for layout type


Play with it.
drag and drop

Visually Creating XML


interface
I dragged and dropped an EditText view and a

Button. Below I show you the corresponding


code.
res/layout/main2.xml
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText android:text="@string/hello" android:id="@+id/editText1" android:inputType="textMultiLine"
android:layout_width="169dp" android:layout_height="115dp" android:layout_x="11dp"
android:layout_y="20dp"></EditText>
<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Button" android:layout_x="27dp" android:layout_y="146dp"></Button>
</AbsoluteLayout>

XML Interface tags


Besides drag and
drop you can edit
the xml file directly.
Lets discuss some
of the Android XML
Interface related
tags

Layout Tags
Control structure of interface

Layout Tags

Determines how the layout is structured.


Some Tags

LinearLayout
A Layout that arranges its children in a single column or a single row. The
direction of the row can be set by calling setOrientation(). You can also
specify gravity, which specifies the alignment of all the child elements by
calling setGravity() or specify that specific children grow to fill up any
remaining space in the layout by setting the weight member of
LinearLayout.LayoutParams. The default orientation is horizontal.

AbsoluteLayout
A layout that lets you specify exact locations (x/y coordinates) of its
children. Absolute layouts are less flexible and harder to maintain than
other types of layouts without absolute positioning.

RelativeLayout

FrameLayout

TableLayout

LinearLayoutXMLtag

Visual creation of XML file


XML Attributes Attribute Name Related
Method Description android:baselineAligned
setBaselineAligned(boolean) When set to false, prevents the layout
from aligning its children's baselines.
android:baselineAlignedChildIndex setBaselineAlignedChildIndex(int)
When a linear layout is part of another layout that is baseline aligned, it
can specify which of its children to baseline align to (that is, which child
TextView). android:gravity setGravity(int) Specifies how to place the
content of an object, both on the x- and y-axis, within the object itself.
android:measureWithLargestChild When set to true, all children with a
weight will be considered having the minimum size of the largest child.
android:orientation setOrientation(int) Should the layout be a column or
a row? Use "horizontal" for a row, "vertical" for a column.
android:weightSum Defines the maximum weight sum.

Related Layout Tags


Control structure of interface, but
commonly a sub-area

ListView <ListView ..>


A view that shows items in a vertically
scrolling list.
Attributes

android:divider Drawable or color to draw between list


items.
android:dividerHeight Height of the divider.

android:entries Reference to an array resource that will


populate the ListView.

android:footerDividersEnabled When set to false, the


ListView will not draw the divider before each footer
view.

android:headerDividersEnabled When set to false, the


ListView will not draw the divider after each header
view.

Gallery <Gallery .>

A view that shows items in a centerlocked, horizontally scrolling list.


The default values for the Gallery assume you will be using
Theme_galleryItemBackground as the background for each View given to
the Gallery from the Adapter. If you are not doing this, you may need to
adjust some Gallery properties, such as the spacing.

Attributes

android:animationDuration setAnimationDuration(int) Sets how


long a transition animation should run (in milliseconds) when
layout has changed.

android:gravity setGravity(int) Specifies how to place the


content of an object, both on the x- and y-axis, within the object
itself.

android:spacing setSpacing(int)
android:unselectedAlpha setUnselectedAlpha(float) Sets the
alpha on the items that are not selected.

Codesetting up Gallery
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Gallery gallery = (Gallery) findViewById(R.id.gallery);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v, int
position, long id) {
Toast.makeText(HelloGallery.this, "" + position,
Toast.LENGTH_SHORT).show();
}
});
}

Views and ViewGroups


Making the elements of your GUI

Views and ViewGroups

An Activity can contain views and ViewGroups.

android.view.View.* = base class for all Views.

example sub-classes include: TextView, ImageView, etc.

android.view.ViewGroup = Layout for views it


contains, subclasses include

android.widget.LinearLayout

android.widget.AbsoluteLayout

android.widget.TableLayout

android.widget.RelativeLayout

android.widget.FrameLayout

android.widget.ScrollLayout

LinearLayout
(<LinearLayout> or
arranges by single column or row.
android.widget.LinearLayou
child views can be arranged vertically or
horizontally. <?xml version="1.0"
t)
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" >
<Text View
android:layout_width=fill_parent
android:layout_height=wrap_content
android:text=@string/hello/>

</LinearLayout>

Linear Layout Example


<?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" >
<Button android:id="@+id/btn_webbrowser"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Web Browser
android:onClick="onClickWebBrowser" />
<Button android:id="@+id/btn_makecalls"
android:layout_width="fill_parent"
android:layout_height="wrap_content
android:text="Make Calls"
android:onClick="onClickMakeCalls" />
<Button android:id="@+id/btn_showMap"
android:layout_width="fill_parent"
android:layout_height="wrap_content
android:text="Show Map"
android:onClick="onClickShowMap" />
<Button android:id="@+id/btn_launchMyBrowser"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Launch My Browser"
android:onClick="onClickLaunchMyBrowser" />
</LinearLayout>

LinearLayout attributes

You can set either in XML or with set*()


methods.

i.e. Xml
android:orientation=vertical
code (ll is LinearLayout instance)
ll.setOrientation(VERTICAL);

Each View or ViewGroup can have its own


set of attributesbut, some are very
common
Attribute

Description

layout_width

specifies width of View or


ViewGroup

layout_height

specifies height

layout_marginTop

extra space on top

layout_marginBottom

extra space on bottom side

layout_marginLeft

extra space on left side

layout_marginRight

extra space on right side

layout_gravity

how child views are positioned

layout_weight

how much extra space in layout


should be allocated to View (only
when in LinearLayout or
TableView)

layout_x

x-coordinate

You might also like