Developing Applications for Android - Lecture#4

Developing Applications for Android

Muhammad Usman ChaudhrySZABIST CS4615

Lecture # 4

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

Today - Detail in Design

● Accessing Resources○ via Java Code○ from within XML


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.

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.

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...

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.


<?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>

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.


<?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>

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.


<?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>

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.


<?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>

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

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.

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.

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.

Checkboxes


● Allows users to select one or more options from the set.

● Let's try on Eclipse.

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.

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.

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.

Accessing Resources


● Similarly we can access other resources like value strings, images from within the XML file as:○ @string/string_label○ @drawable/image_name

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.

Next Week Due

● Quiz● Assignment


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


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.


Assignment

● Email your assignment with complete source files to:○ [email protected]○ 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.


Coming up next


● Event Listeners, Handlers, etc.

● Multiple Activities (Switching, Data Passing, Stack Management)

● Intents

● And much more...

Developing Applications for Android - Lecture#4

Technology

Transcript of Developing Applications for Android - Lecture#4