Lecture#4 on Developing Applications for Android

1. Developing Applications
for Android
Muhammad Usman Chaudhry
SZABIST CS4615
Lecture # 4

2. Today - Detail in Design
● Android Layouts Basics
● Introduction to Layout Managers & their LayoutParams
○ Linear Layout
○ Relative Layout
○ Table Layout
○ Grid Layout
● Basic Controls (Most commonly used)
○ Text Fields
○ TextView
○ Buttons (Button, ImageButton, RadioButton, ToggleButton)
○ Checkboxes
○ Spinners
○ ImageView
Muhammad Usman Chaudhry CS4615 SZABIST

3. Today - Detail in Design
● Accessing Resources
○ via Java Code
○ from within XML
Muhammad Usman Chaudhry CS4615 SZABIST

4. Android Layouts
● Can be defined completely in,
○ Java Files
○ XML Files
○ Both Java & XML files
● We mostly define layouts in XML files
● Flow structure for standard XML Layout is,
○ Declare UI elements in XML file
○ Instantiate & access elements at runtime using R.
Muhammad Usman Chaudhry CS4615 SZABIST

5. Layout Managers
● Behave like containers for other views.
● Implements strategies to manage size, position of its
children.
● Layout managers used in android:
○ Linear Layout
○ Relative Layout
○ Table Layout
○ Grid Layout
● Another layout manager known as Absolute Layout is no
more available and deprecated.
Muhammad Usman Chaudhry CS4615 SZABIST

6. Layout Params
● Define attributes available to all the child controls within
Layout Manager.
● All type of layout managers have various layout params that
define position, weight, gravity, etc. for a child within that
certain layout manager, for instance:
○ In LinearLayout.LayoutParams we have:
■ Gravity (android:layout_gravity)
■ Weight (android:layout_weight)
○ In RelativeLayout.LayoutParams we have:
■ Layout Above (android:layout_above)
■ Layout Top (android:layout_alignTop)
■ and many more...
Muhammad Usman Chaudhry CS4615 SZABIST

7. Linear Layout
● Aligns all the children in one direction
○ Either Horizontally
○ Or Vertically
● Children are stacked one after another
● We may nest multiple linear layouts or
linear layout within some other layout
● Let's have a look at example code for Linear
Layout, understand it, and then run it on
Eclipse and make few changes to cater
nested linear layouts.
Muhammad Usman Chaudhry CS4615 SZABIST

8. <?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:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/username" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="@string/password" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="@string/login" />
</LinearLayout>
Muhammad Usman Chaudhry CS4615 SZABIST

9. Relative Layout
● Display child views in relative positions
● We may specify position in relation with
parent or siblings of a view
● Eliminates the need of nested views
● Many nested linear layouts can be
converted into one Relative Layout
● Let's have a look at example code for Linear
Layout, understand it, then run it on Eclipse
and play with it to understand few more
things.
Muhammad Usman Chaudhry CS4615 SZABIST

10. <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.
com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/username"
android:hint="@string/username" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/password"
android:layout_below="@+id/username"
android:inputType="textPassword"
android:hint="@string/password" />
<Button
android:id="@+id/register"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/password"
android:layout_below="@+id/password"
android:text="@string/loginr" />
</RelativeLayout>
Muhammad Usman Chaudhry CS4615 SZABIST

11. Table Layout
● Keep all the child views in a table.
● In Table Layout, TableRow represent one
row.
● All children in a TableRow are columns.
● Useful to display data in rows and columns.
● Not useful for designing complete user
interfaces.
● Let's have a look at basic example and then
try-it-out on Eclipse.
Muhammad Usman Chaudhry CS4615 SZABIST

12. <?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow android:layout_width="fill_parent" >
<EditText
android:id="@+id/username"
android:layout_width="140dp"
android:layout_height="match_parent"
android:hint="@string/username" />
<EditText
android:id="@+id/password"
android:layout_width="140dp"
android:layout_height="match_parent"
android:hint="@string/password" />
android:inputType="textPassword"
</TableRow>
<Button
android:id="@+id/login"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="@string/login" />
</TableLayout>
Muhammad Usman Chaudhry CS4615 SZABIST

13. Grid Layout
● Places all of its child views in a rectangular
grid.
● By default you we may define rowCount &
colCount and all child views in a grid layout
behaves like a matrix.
● We can manually define which row/col a
certain object belongs to using layout_row
& layout_column property.
● Useful for displaying image galleries, grid
data and similar things.
Muhammad Usman Chaudhry CS4615 SZABIST

14. <?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:rowCount="2">
<EditText
android:id="@+id/username"
android:layout_width="140dp"
android:layout_height="match_parent"
android:hint="@string/username" />
<EditText
android:id="@+id/password"
android:layout_width="140dp"
android:layout_height="match_parent"
android:inputType="textPassword"
android:hint="@string/password" />
<Button android:id="@+id/login"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="@string/login" />
</GridLayout>
Muhammad Usman Chaudhry CS4615 SZABIST

15. Basic Input Controls
● Input controls are used to take data from
user.
● Most commonly used controls in Android
Ecosystem are:
○ Text Fields
○ TextView
○ Buttons (Button, ImageButton, RadioButton, ToggleButton)
○ Checkboxes
○ Spinners
○ ImageView
● Let's study them one by one
Muhammad Usman Chaudhry CS4615 SZABIST

16. Text Fields
● Text Fields allow users to type text in your application.
● Text fields have different types like:
○ Plain Text
○ Person Name
○ Password
○ Email
○ Phone
○ Postal Address
○ Multiline Text
○ Time
○ Date
○ Number (Signed/Unsigned)
● All of the Text Fields mentioned above are merely attributes of
EditText.
● Let's try them all on Eclipse.
Muhammad Usman Chaudhry CS4615 SZABIST

17. Text View
● TextView is used to display text on screen.
● EditText, Button are direct subclasses of TextView.
● TextView doesn't allow editing in itself.
● It works more like a label.
● Some interesting attributes of textview are:
○ shadowColor
○ shadowRadius
○ shadowDy, shadowDx
● Let's try this on Eclipse.
Muhammad Usman Chaudhry CS4615 SZABIST

18. Buttons
● Buttons allows user to perform some action.
● Android have following button types available,
sequence is Control Name (Class Name):
○ Button (Button)
○ Image Button (ImageButton)
○ Toggle Buttons (ToggleButton)
○ Radio Buttons (RadioButton)
● All buttons have different classes and XML tags to
represent them unlike the Text Fields (That had only
one tag i.e. EditText)
● Let's try them all on Eclipse.
Muhammad Usman Chaudhry CS4615 SZABIST

19. Checkboxes
● Allows users to select one or more options from the
set.
● Let's try on Eclipse.
Muhammad Usman Chaudhry CS4615 SZABIST

20. Spinners
● Spinners are used to select one value from a set.
● Unlike it's name don't confuse it with loading spinner.
● They're combo boxes of android.
● Let's try on Eclipse.
Muhammad Usman Chaudhry CS4615 SZABIST

21. ImageView
● ImageView is used to display an image.
● Can load images from various sources, eg.
drawables/content providers.
● Take care of measurements & scaling.
● Various other display options available like scaling &
tinting.
● Let's Try-It-On-Eclipse.
Muhammad Usman Chaudhry CS4615 SZABIST

22. Accessing Resources
● Though we have already done some examples
but it's time to know what is happening.
● All resources in XML can be accessed via
findViewById method in Java Code.
○ <ResourceType> objectName =
(<ResourceType>) findViewById(R.id.
viewId);
○ <ResourceType> can be Spinner, TextView,
EditText or any other field.
Muhammad Usman Chaudhry CS4615 SZABIST

23. Accessing Resources
● Similarly we can access other resources like
value strings, images from within the XML file
as:
○ @string/string_label
○ @drawable/image_name
Muhammad Usman Chaudhry CS4615 SZABIST

24. Lab Session
● Create multiple layout files
○ Every file will contain different LayoutManager
but same controls.
○ Use all the LayoutManagers and Controls
explained in the class.
○ So it'll be like:
■ LinearLayout - All controls (ll.xml)
■ RelativeLayout - All controls (rl.xml)
■ TableLayout - All controls (tl.xml)
■ GridLayout - All controls (gl.xml)
○ change setContentView() to display relevant
LayoutManager.
Muhammad Usman Chaudhry CS4615 SZABIST

25. Next Week Due
● Quiz
● Assignment
Muhammad Usman Chaudhry CS4615 SZABIST

26. Quiz
● Everything from Lecture#2 & Lecture#4
● All topics from Lecture#3 except DVCS
● You may obtain lectures from Group, studnets who
haven't joined yet, may join:
○ SZABIST-FALL2012-ANDROID
○ on groups.google.com
Muhammad Usman Chaudhry CS4615 SZABIST

27. Assignment
● Create a registration form with following fields:
○ First Name
○ Last Name
○ Date of Birth
○ Gender
○ Username
○ Password
○ Verify Password
○ Email Address
○ Phone Number
○ Address
○ Country
○ Register Button
● Create the same form in, LinearLayout, RelativeLayout, TableLayout &
GridLayout.
● Selection of right control for the right field is important.
Muhammad Usman Chaudhry CS4615 SZABIST

28. Assignment
● Email your assignment with complete source files to:
○ muhammad.usman.chaudhry@gmail.com
○ Subject: SZABIST ANDROID FALL2012 ASSIGNMENT#1- STDID - NAME
○ I'll automatically award 40% marks upon submission, rest will be
graded upon quality of code, but in case of copy/paste, 0 will be
given.
Muhammad Usman Chaudhry CS4615 SZABIST

29. Coming up next
● Event Listeners, Handlers, etc.
● Multiple Activities (Switching, Data Passing, Stack
Management)
● Intents
● And much more...
Muhammad Usman Chaudhry CS4615 SZABIST