Android UI Fundamentals part 1

61 %
39 %
Information about Android UI Fundamentals part 1
Technology

Published on February 17, 2014

Author: mpsddspm

Source: slideshare.net

Description

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

Android UI development

Android UI development Menu Android 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: Tablet App Fragments on the phone and tablet 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 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.

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?

Add a comment

Related presentations

Related pages

Prism Fundamentals – Part 1 | Styling Android

Prism Fundamentals – Part 1. ... I was working on some code for a series of Styling Android posts around dynamic UI colouring based upon a ViewPager.
Read more

Part 1: Basic Android UI - Android UI Fundamentals ...

Part 1: Basic Android UI - Selection from Android UI Fundamentals: Develop and Design [Book]
Read more

android tutorial for beginners 10 Android UI Part -1 - YouTube

android tutorial for beginners 10 Android UI Part -1 PRABEESH R K. ... Android UI design tutorial: UI Design (part 1) - Duration: 18:49.
Read more

Application Fundamentals | Android Developers

This creates a very secure environment in which an app cannot access parts of the ... in Android 2.1 ... to your UI. Android supports many ...
Read more

Part 1 - Designer Basics - Xamarin

Application Fundamentals. Understanding Android API Levels; ... Using the Android Designer; Part 1 ... Creating an iOS UI in Code; Backgrounding. Part 1 ...
Read more

Android UI Stack - Part 1 - YouTube

UserId : techuser / Password: techuser for one to one online apps development trainings. contact: tech3in@live.com
Read more

Part 1 – Understanding the Xamarin Mobile Platform - Xamarin

Part 1 - Android Resource Basics; ... Part 1 – Understanding ... Android – Xamarin provides an Android drag-and-drop UI designer for both Xamarin ...
Read more

UI Overview | Android Developers

UI Overview. All user interface ... as shown in figure 1. ... while the child views may be input controls or other widgets that draw some part of the UI.
Read more

ANDROID UI FUNDAMENTALS PDF-AUF8-PHRG11

PDF File: Android UI Fundamentals - PDF-AUF8-PHRG11 1/4 ANDROID UI FUNDAMENTALS PDF-AUF8-PHRG11 | 23 Page | File Size 1,000 KB | 23 Jul, 2016 TABLE OF CONTENT
Read more