Android UI Fundamentals part 1

1,734 views

Published on

Presentation that I did at Buzz Solutions about the basics of UI development and understanding in Android.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
  • very nice presentation
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,734
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
145
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Android UI Fundamentals part 1

  1. 1. Android UI development
  2. 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. 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.
  4. 4. Android Components
  5. 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
  6. 6. App components Activities Lifecycle:
  7. 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. 8. App components Activities + Fragment Lifecycle:
  9. 9. App components
  10. 10. App components
  11. 11. App components
  12. 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. 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. 14. Exercise: How many fragments and Activities do I have in this screen?
  15. 15. Exercise: How many fragments and Activities do I have in those screens?
  16. 16. Exercise: How many fragments and Activities do I have in those screens?
  17. 17. Exercise: How many fragments and Activities do I have in those screens?
  18. 18. Exercise: How many fragments and Activities do I have in those screens? 1 Activity 3 Fragments
  19. 19. Evernote App: Tablet App Fragments on the phone and tablet Smartphone App
  20. 20. Exercise: How buzz app is using fragments until now?
  21. 21. Exercise: How buzz app is using fragments until now?
  22. 22. User Interface
  23. 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. 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. 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. 26. User Interface Android UI Components: Button Text Field Checkbox Radio Button Toogle Button Spinners Pickers
  27. 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. 28. User Interface Linear Layout Example
  29. 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. 30. User Interface Relative Layout Example
  31. 31. User Interface Layouts Main Attributes Size Attributes Possible values Or specific ones (Ex: “300dp”)
  32. 32. Exercise: Which layout am I using on this view?
  33. 33. Exercise: Which layout am I using on this view? Linear Layout With 9 text views and 1 image button
  34. 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. 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. 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. 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. 38. Exercise: Which layout this view is using?
  39. 39. Exercise: Which layout this view is using? Relative Layout
  40. 40. Exercise: Which layout this view is using? What if it was Linear Layout
  41. 41. Exercise: Which layout this view is using? What if it was Linear Layout
  42. 42. Exercise: Which layout this view is using? What if it was Linear Layout
  43. 43. Exercise: Which layout this view is using? Too Expensive
  44. 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. 45. Exercise: How many ListViews and GridView do I have in this screen?
  46. 46. Exercise: How many ListViews and GridView do I have in this screen? At least 3 List Views and 3 Grid Views
  47. 47. Exercise: Draw this layout in the paper
  48. 48. Exercise: Draw this layout in the paper
  49. 49. Exercise: Draw this layout in the paper
  50. 50. Exercise: Draw this layout in the paper
  51. 51. Putting everything together
  52. 52. Putting everything together
  53. 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. 54. Exercise: How would you design this app for tablets?
  55. 55. Exercise: How would you design this app for tablets?

×