Android UI Fundamentals part 1
-
Upload
marcos-paulo -
Category
Technology
-
view
641 -
download
1
description
Transcript of Android UI Fundamentals part 1
UI developmentAndroid
UI developmentAndroid
MenuAndroid basic app components
- Activity- Fragments
User Interface components- Views- Layouts- Linear Layout- Relative Layouts- List Views- Grid Views
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.
Android Components
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
App components Activities Lifecycle:
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.
App components
Activities + Fragment Lifecycle:
App components
App components
App components
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.
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.
Exercise: How many fragments and Activities do I have in this screen?
Exercise: How many fragments and Activities do I have in those screens?
Exercise: How many fragments and Activities do I have in those screens?
Exercise: How many fragments and Activities do I have in those screens?
Exercise: How many fragments and Activities do I have in those screens?
1 Activity
3 Fragments
Evernote App: Fragments on the phone and tablet
Tablet App Smartphone App
Exercise: How buzz app is using fragments until now?
Exercise: How buzz app is using fragments until now?
User Interface
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.
User Interface
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:
Layouts:
● 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.
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.
User Interface
Android UI Components: Button
Text Field
Checkbox
Radio Button
Toogle Button
Spinners
Pickers
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.
User Interface
Linear Layout Example
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).
User Interface
Relative Layout Example
User Interface
Layouts Main Attributes
Size Attributes
Possible values
Or specific ones (Ex: “300dp”)
Exercise: Which layout am I using on this view?
Exercise: Which layout am I using on this view?
Linear Layout
With 9 text views and
1 image button
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?
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.
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.
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())
Exercise: Which layout this view is using?
Exercise: Which layout this view is using?
Relative Layout
Exercise: Which layout this view is using?
What if it was Linear Layout
Exercise: Which layout this view is using?
What if it was Linear Layout
Exercise: Which layout this view is using?
What if it was Linear Layout
Exercise: Which layout this view is using?
Too Expensive
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
Exercise: How many ListViews and GridView do I have in this screen?
Exercise: How many ListViews and GridView do I have in this screen?
At least 3 List Views
and
3 Grid Views
Exercise: Draw this layout in the paper
Exercise: Draw this layout in the paper
Exercise: Draw this layout in the paper
Exercise: Draw this layout in the paper
Putting everything together
Putting everything together
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
Exercise: How would you design this app for tablets?
Exercise: How would you design this app for tablets?