Android UI Fundamentals part 1
5 likes2,448 views
The document provides an overview of Android UI development, focusing on app components like activities and fragments, as well as user interface elements like views and layouts. It explains the structure of an app using AndroidManifest.xml, the importance of resources, and various layout types such as linear, relative, list, and grid views. The aim is to equip developers with the skills to design versatile applications that adapt to different screen sizes and formats.
Android UI Fundamentals part 1
- 2. Android UI development Menu Android basic app components - Activity - Fragments User Interface components - Views - Layouts - Linear Layout - Relative Layouts - List Views - Grid Views
- 3. What to expect? At the end of this presentation you’ll never see an android app in the same way again. You should be able to identify in apps different types of layouts, components, lifecycles, activities and fragments. Have better knowledge about crossplatform design: tablets, smartphones, different screen sizes.
- 5. App components Activities: An activity represents a single screen with a user interface. For example, an email app might have one activity that shows a list of new emails, another activity to compose an email, and another activity for reading emails. It is not possible to have more than one activity per screen
- 7. App components Fragments: A Fragment represents a behavior or a portion of user interface in an Activity. You can combine multiple fragments in a single activity. You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running.
- 8. App components Activities + Fragment Lifecycle:
- 10. App components
- 11. App components
- 12. App components Manifest Files: Before the Android system can start an app component, the system must know that the component exists by reading the app's AndroidManifest.xml file (the "manifest" file). Your app must declare all its components in this file, which must be at the root of the app project directory.
- 13. App components Resources: An Android app is composed of more than just code, it requires resources that are separate from the source code, such as images, audio files, and anything relating to the visual presentation of the app. For example, you should define animations, menus, styles, colors, and the layout of activity user interfaces with XML files.
- 14. Exercise: How many fragments and Activities do I have in this screen?
- 15. Exercise: How many fragments and Activities do I have in those screens?
- 16. Exercise: How many fragments and Activities do I have in those screens?
- 17. Exercise: How many fragments and Activities do I have in those screens?
- 18. Exercise: How many fragments and Activities do I have in those screens? 1 Activity 3 Fragments
- 19. Evernote App: Tablet App Fragments on the phone and tablet Smartphone App
- 20. Exercise: How buzz app is using fragments until now?
- 21. Exercise: How buzz app is using fragments until now?
- 22. User Interface
- 23. 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.
- 24. User Interface Layouts: A layout defines the visual structure for a user interface, such as the UI for an activity or fragment. You can declare a layout in two ways: ● Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts. ● Instantiate layout elements at runtime. Your application can create View and ViewGroup objects (and manipulate their properties) programmatically.
- 25. User Interface Android XML: Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create web pages in HTML — with a series of nested elements.
- 26. User Interface Android UI Components: Button Text Field Checkbox Radio Button Toogle Button Spinners Pickers
- 27. User Interface Common Layouts: Linear Layout: LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.
- 28. User Interface Linear Layout Example
- 29. User Interface Common Layouts: Relative Layout: RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left of center).
- 30. User Interface Relative Layout Example
- 31. User Interface Layouts Main Attributes Size Attributes Possible values Or specific ones (Ex: “300dp”)
- 32. Exercise: Which layout am I using on this view?
- 33. Exercise: Which layout am I using on this view? Linear Layout With 9 text views and 1 image button
- 34. Challenge: The last component is another linear layout with a orientation “horizontal” with a image button inside aligned to right Why didn’t I use a Relative Layout which would avoid the need of a second linear layout and would be more flexible?
- 35. User Interface Common Layouts: List Views: ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each item result into a view that's placed into the list.
- 36. User Interface List View Adapters: The Adapter provides access to the data items. The Adapter is also responsible for making a View for each item in the data set.
- 37. User Interface List View Example: 1 - Search Emails on the server. 2 - Parse the result to a list of Email objects (Ex: List<EmailRow> listEmails). 3 - Set the list of objects in the adapter and then set the adapter on the list. 4 - For each object on the list, the method getView will be called, where the view for the row must be created and returned. 5 - Inside the method getView check - If the object is of the type email then create this view: (Ex: Type.Email. equals(emailRow.getType()) - If the object is of the type category then create this view: (Ex: Type. EmailCategory.equals(emailRow.getType())
- 38. Exercise: Which layout this view is using?
- 39. Exercise: Which layout this view is using? Relative Layout
- 40. Exercise: Which layout this view is using? What if it was Linear Layout
- 41. Exercise: Which layout this view is using? What if it was Linear Layout
- 42. Exercise: Which layout this view is using? What if it was Linear Layout
- 43. Exercise: Which layout this view is using? Too Expensive
- 44. User Interface Common Layouts: Grid Views: GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter. It works just like ListView, only the pattern to display the information changes
- 45. Exercise: How many ListViews and GridView do I have in this screen?
- 46. Exercise: How many ListViews and GridView do I have in this screen? At least 3 List Views and 3 Grid Views
- 47. Exercise: Draw this layout in the paper
- 48. Exercise: Draw this layout in the paper
- 49. Exercise: Draw this layout in the paper
- 50. Exercise: Draw this layout in the paper
- 53. Supporting multiple screen sizes and formats. When you do a on the method on create on your activity, the android operating system will look for the layout according to the configurations of the device. For example, if the device is a Nexus 10 where the width is bigger than 720p, the R. layout.login will be the one from the folder layout-sw720dp
- 54. Exercise: How would you design this app for tablets?
- 55. Exercise: How would you design this app for tablets?