Lect 5 - Layout
Lect 5 - Layout
Lect 5 - Layout
LAYOUT
T.Heba AL.Marwai
Android GUI –the concept
GUI = hierarchy of View and ViewGroup objects
---specify Layout
android.widget.TableLayout
android.widget.RelativeLayout
android.widget.FrameLayout
android.widget.ScrollLayout
horizontally or vertically
RelativeLayout: Child object relative to each other
<TextView
Here is code of
layout created
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Please Login"
android:id="@+id/textView_TopLabel" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="login"
android:id="@+id/textView_login" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText_Login" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="password"
android:id="@+id/textView_password" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="@+id/editText_Password" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button_Enter" />
</LinearLayout>
XML Interface tags
Besides drag and drop
you can edit the xml
file directly….you will
see examples
throughout this lecture
Lets return to looking at some of the
possible ViewGroup Layouts
Layout Options ---there are a
number
Determines how the layout is structured.
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.
RelativeLayout
FrameLayout
GridLayout AND MANY MORE (see children of ViewGroup in API)
LinearLayout RelativeLayout GridLayout
LinearLayout
Some Examples
LinearLayout
Good:
Simple
Bad:
Well for many interfaces too simple….
BUT see next slide
BUT,REMEMBER you can have a ViewGroup (another
Layout) inside as a member of the LinearLayout to
make a more COMPLEX interface
ALSO can make more complex
LinearLayout Very SIMPLE Example
arranges by single column (vertical orientation)
<Text View
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:text=“@string/hello”/>
<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 with 4 child View objects,
all are buttons
LinearLayout attributes
You can set either in XML or with set*() methods.
Xml
android:orientation=“vertical”
Attribute Description
ImageView
2
TextViews
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
Another Nested LinearLayout Example
android:layout_width="match_parent"
<LinearLayout
android:layout_height="match_parent"
<TextView android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical">
android:layout_height="wrap_content" android:layout_marginTop="10dp"
<TextView
android:layout_marginTop="20dp" android:orientation="horizontal"
android:layout_width="wrap_content"
android:text="Using weightSum" android:weightSum="1">
android:layout_height="wrap_content"
android:textColor="@android:color/black" <Button
android:text="Without using weightSum"
android:textSize="25sp" /> android:layout_width="wrap_content"
android:textColor="@android:color/black"
android:layout_height="wrap_content"
android:textSize="25sp" />
<LinearLayout android:layout_weight="0.5"
<LinearLayout
android:layout_width="match_parent" android:text="Android" />
android:layout_width="match_parent"
android:layout_height="wrap_content" <Button
android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_width="wrap_content"
android:orientation="horizontal">
android:weightSum="1"> android:layout_height="wrap_content"
android:layout_weight="0.5"
<Button
<Button android:text="C" /> There are
android:layout_width="wrap_content" 3 LinearLayouts
android:layout_width="wrap_content" </LinearLayout>
android:layout_height="wrap_content" nested inside the
android:layout_height="wrap_content" <LinearLayout outer LinearLayout
android:text="Android" />
android:layout_weight="0.7" android:layout_width="match_parent"
android:text="Android" /> android:layout_height="wrap_content"
<Button
<Button android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_width="wrap_content" android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_height="wrap_content" android:weightSum="1">
android:text="Java" />
android:layout_weight="0.3"
</LinearLayout>
android:text="C" /> <Button
</LinearLayout>
android:layout_width="wrap_content"
You can nest Any kind of Layouts –like
here
you can have a ViewGroup (another Layout) inside
as a member of the LinearLayout to make a more
COMPLEX interface
Whatever Layout you choose ---it will
contain Views and even other Layouts
As we see here we have an Interface that overall is
a LinearLayout
It contains 2 Views and 1 RelativeLayout
The RelativeLayout contains 3 Views
Another Option to get Complexity
What about Other Layouts
RelativeLayout is good ---and can make your
design EASIER
TableLayout
<TableRow>
<TextView
android:text="@string/table_layout_4_save"
android:padding="3dip" />
<TextView This Table has 2 Rows
android:text="@string/table_layout_4_save_shortcut"
android:gravity="right"
android:padding="3dip" />
</TableRow>
</TableLayout>
TableLayout example 2
Here use gravity to move the 2nd item in row to the
right
ONLY partial XML code
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>
speed: speed:
Measure: 0.977ms Measure: 0.598ms
Layout: 0.167ms Layout: 0.110ms
Draw: 2.717ms Draw: 2.146ms
RelativeLayout is FASTER
More on improving performance
Go to Developer site and search on “Improving
Layout Performance”
https://developer.android.com/training/improving-
layouts/index.html
Related Layout Tags
to create a DYNAMIC layout contents –one
where the contents are dynamic (maybe read
in from database or???)
Subclasses of AdapterView
SOME Examples of Layout Tags that can
load contents/data dynamically
ListView Gallery GridView