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?