2. As if a device can function if it
has no style. As if a device can
be called stylish that does not
function superbly.... Yes,
beauty matters. Boy, does it
matter. It is not surface, it is not
an extra, it is the thing itself.
—STEPHEN FRY, THE GUARDIAN
(OCTOBER 27, 2007)
3. User Interface
All user interface elements in an Android app
are built using View and ViewGroup objects.
A View is an object that draws something on
the screen that the user can interact with.
A ViewGroup is an object that holds other
View (and ViewGroup) objects in order to
define the layout of the interface.
The user interface for each component of
your app is defined using a hierarchy of View
and ViewGroup objects.
5. Layouts
A layout defines the visual structure for a user
interface, such as the UI for an activity or app
widget.
You can declare a layout in two ways:
Declare UI elements in XML.
Instantiate layout elements at runtime
The Android framework gives you the flexibility
to use either or both .
The advantage to declaring your UI in XML is
that it enables you to better separate the
presentation from the code that controls its
behavior.
6. Using Eclipse to Design Layout
Resources
Use
the Outline pane to Add and Remove
controls to your layout resource.
Select a specific control (either in the
Preview or the Outline) and use the
Property pane to adjust a specific
control’s attributes.
Use the XML tab to edit the XML definition
directly.
7. Write the XML
Each
layout file must contain exactly one
root element.
XML vocabulary for declaring UI elements
closely follows the structure and naming
of the classes and methods.
For example, the EditText element has a
text attribute that corresponds to
EditText.setText().
8. Attributes Overview
Every View and ViewGroup object supports
their own variety of XML attributes.
Some attributes are specific (e.g. TextView
supports the textSize attribute)
These attributes are also inherited by any
View objects that may extend this class.
Some are common to all View
objects, because they are inherited from the
root View class (like the id attribute).
9. Attributes Examples
ID (Any View object may have an integer ID
associated with it, to uniquely identify the
View within the tree.)
android:id="@+id/my_button”
The at-symbol (@) at the beginning of the string
indicates that the XML parser should parse and
expand the rest of the ID string and identify it as an
ID resource.
The plus-symbol (+) means that this is a new
resource name that must be created and added to
our resources (in the R.java file)
android:id="@android:id/empty” (from android.R)
12. Attributes Examples
Layout Parameters (XML layout attributes
named layout_something )
for the View that are appropriate for the
ViewGroup in which it resides.
All view groups include a width and height
(layout_width and layout_height), and each
view is required to define them.
wrap_content tells your view to size itself to the
dimensions required by its content
fill_parent (renamed match_parent in API Level
8) tells your view to become as big as its parent
view group will allow.
13.
14.
Every LayoutParams subclass has its own
syntax for setting values. Each child element
must define LayoutParams that are
appropriate for its parent, though it may also
define different LayoutParams for its own
children.
15. Note (not Galaxy Note)
specifying
a layout width and height using
absolute units such as pixels is not
recommended. Instead, using relative
measurements such as densityindependent pixel units (dp),
wrap_content, or fill_parent, is a better
approach, because it helps ensure that
your application will display properly
across a variety of device screen sizes.
17. Try !!!
Create
XML layout that uses a vertical
LinearLayout to hold a TextView and a
Button
TextView
id = text
Text= “Hello, I am a TextView”
Button
id=button
text="Hello, I am a Button"
18. Attributes Examples
Size,
Padding and Margins
The accepted measurement types:
Px, dp(Density-independent Pixels), sp(Scaleindependent Pixels), pt, in, mm.
We can define it in Dimension Values.
19. Note
Although
you can nest one or more
layouts within another layout to achieve
your UI design, you should strive to keep
your layout hierarchy as shallow as
possible.
Your layout draws faster if it has fewer
nested layouts (a wide view hierarchy is
better than a deep view hierarchy).Why?
20.
21. As
you can see, the code can rapidly
grow in size as more controls are added
to the screen, making screen contents
more difficult to maintain or reuse.
24. LinearLayout
designed to display child View controls in a
single row or column.(Orientation= vertically
or horizontally.)
This is a very handy layout method for
creating forms.
25. Note
To
create a linear layout in which each
child uses the same amount of space on
the screen,
set the android:layout_height of each
view to "0dp" (for a vertical layout)
or the android:layout_width of each view
to "0dp" (for a horizontal layout).
Then set the android:layout_weight of
each view to "1".
27. Hint
if there are three text fields and two of them
declare a weight of 1, while the other is given
no weight, the third text field without weight
will not grow and will only occupy the area
required by its content. The other two will
expand equally to fill the space remaining
after all three fields are measured.
If the third field is then given a weight of 2
(instead of 0), then it is now declared more
important than both the others, so it gets half
the total remaining space, while the first two
share the rest equally.
28. RelativeLayout
designed to display child View controls in
relation to each other.
You can also align child View controls
relative to the parent edges.
Is a very powerful utility for designing a user
interface because it can eliminate nested
view groups and keep your layout hierarchy
flat, which improves performance.
29. Positioning Views
android:layout_alignParentTop
If "true", makes the top edge of this view match the
top edge of the parent.
android:layout_centerVertical
If "true", centers this child vertically within its parent.
android:layout_below
Positions the top edge of this view below the view
specified with a resource ID.
android:layout_toRightOf
Positions the left edge of this view to the right of the
view specified with a resource ID.
35. How to Handle Listeners
Implement
My Listener
Let Class Implement it
Editor's Notes
Create an ids.xml file and place all your required ids in it as below<?xml version="1.0" encoding="utf-8"?><resources> <item type="id" name="layout1" /> <item type="id" name="layout2" /> <item type="id" name="layout3" /></resources>Now for your dynamically created layouts or views you can use these ids as belownew_layout1.setId(R.id.layout1);new_view2.setId(R.id.layout2);new_layout3.setId(R.id.layout3);
<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello, I am a TextView" /> <Button android:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello, I am a Button" /></LinearLayout>