Your SlideShare is downloading. ×
Developing Applications for Android - Lecture#4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Developing Applications for Android - Lecture#4

1,075
views

Published on

Lecture#4 on Developing Applications for Android

Lecture#4 on Developing Applications for Android

Published in: Technology, Art & Photos

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,075
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
75
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 ○ ImageViewMuhammad Usman Chaudhry CS4615 SZABIST
  • 3. Today - Detail in Design ● Accessing Resources ○ via Java Code ○ from within XMLMuhammad 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 ● Lets 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 ● Lets 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. ● Lets 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 ● Lets study them one by oneMuhammad 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. ● Lets 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 doesnt allow editing in itself. ● It works more like a label. ● Some interesting attributes of textview are: ○ shadowColor ○ shadowRadius ○ shadowDy, shadowDx ● Lets 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) ● Lets try them all on Eclipse.Muhammad Usman Chaudhry CS4615 SZABIST
  • 19. Checkboxes ● Allows users to select one or more options from the set. ● Lets try on Eclipse.Muhammad Usman Chaudhry CS4615 SZABIST
  • 20. Spinners ● Spinners are used to select one value from a set. ● Unlike its name dont confuse it with loading spinner. ● Theyre combo boxes of android. ● Lets 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. ● Lets Try-It-On-Eclipse.Muhammad Usman Chaudhry CS4615 SZABIST
  • 22. Accessing Resources ● Though we have already done some examples but its 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_nameMuhammad 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 itll 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 ● AssignmentMuhammad 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 havent joined yet, may join: ○ SZABIST-FALL2012-ANDROID ○ on groups.google.comMuhammad 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 ○ Ill 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