Developing Applications for Android - Lecture#4
2 likes1,336 views
This document summarizes a lecture on developing Android applications. It discusses various Android layouts like linear, relative, table and grid layouts. It also discusses layout parameters and different basic input controls like text fields, text views, buttons, checkboxes and spinners. It provides code examples for different layouts and controls. It describes how to access resources from XML and Java code. It outlines an assignment to create a registration form using different layouts.
![[NijmegenJS] Node.js - 2014/04/25](https://cdn.slidesharecdn.com/ss_thumbnails/nijmegenjs-140428015928-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to Developing Applications for Android - Lecture#4 (20)
Recently uploaded (20)
Developing Applications for Android - Lecture#4
- 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