1. Building User Interfaces Basic Applications
Chapter 2
Building User Interfaces Basic Applications
Chapter objectives:
Become familiar with Android user interface
Learn about text input widgets
Understand Views, widgets, and how the R.java class is constructed
Implement applications that require various User Interface Controls
Adaptive Design Concepts
Organize screen content using ViewGroup containers
Use adapters to create sophisticated user interfaces
12/25/2018

2. 2.1 Android User Interface
User interface is
a collection of visual objects arranged on the screen that the user can see and interact with
can be created in java code or created in an external XML layout file
12/25/2018

3. GUI in Android app is made of a hierarchy of
View and ViewGroup objects
View objects are usually UI widgets (buttons, text fields, etc.)
ViewGroup objects are invisible view containers that defines how the child views are laid out
XML is used to describe the hierarchy of View and ViewGroup
A layout resource file is referred to as layout.
12/25/2018

4. Typically, an activity (screen represent that activity) uses it onCreate() method to associate it with external layout file.
12/25/2018

5. 2.2 Layouts
Visual interfaces can be defined by one or more layout files
The term Layout denotes the visual architecture of the application
Typically, a single XML layout file for each Activity.
Layout XML files often contains other layout XML files to allow reuse of screen elements for multiple locations
12/25/2018

6. All layout files are configured in a hierarchical tree:
There are six standard root layouts:
RelativeLayout
LinearLayout
TableLayout
RowLayout
GridLayout
FrameLayout
12/25/2018

7. 12/25/2018

8. A RelativeLayout is used for screen designs that require control elements to be positioned in relation to one another
A LinearLayout is used for simple arrangments that require elements to be displayed along either a horizontal or vertical line
A TableLayout is used to arrange elements into tabular rows and columns
12/25/2018

9. 12/25/2018

10. 12/25/2018

11. 12/25/2018

12. 12/25/2018

13. 2.3 The View Class
Android user interface is built around an object called a View
A View describes every interactive visual control object that appears on an application screen
Every control object in an Android user interface is a subclass of the Android View class
12/25/2018

14. The user interface for your application can be built in two ways:
Constructing it as a layout using XML code
Building the entire layout, or pieces of the layout, programmatically at runtime
12/25/2018

15. 2.4 Text Input and Output
TextView and EditText are the two Android text field classes, both derived from the View super class
TextView is used primarily for text output
EditText allows text input and editing by the user
12/25/2018

16. For example, InputType properties can be set to: textCapCharactors
Attributes must be applied to an EditText object to customize type of data for input.
For example, InputType properties can be set to:
textCapCharactors
textAutoCorrect
textAutoComplete
TextNoSuggestions
12/25/2018

17. 12/25/2018

18. 2.5 Soft Keyboards On-screen keyboard is called a soft keyboard
12/25/2018

19. 12/25/2018

20. 12/25/2018

21. 12/25/2018

22. 12/25/2018

23. imeOptions actionSend actionDone actonGo actionNext actionPrevious
12/25/2018

24. 12/25/2018

25. 2.6 Android’s Form Widgets for UI
Android provides a wide set of input controls (widgets), to be used in an app’s user interface
Widgets are subclasses of the View base class
Each widget has a built-in set of properties that can be used to customize its appearance
Each widget has a built-in set of methods that can be used to access values
Each widget has a built-in set of interfaces that can be used to handle events
12/25/2018

26. 12/25/2018

27. 2.6.1 RadioButton and CheckBox
Radio buttons work in a group
They are used when only a single item from a collection of items must be selected
If a radio button is already selected, it will be de-selected when another radio button in the collection is selected.
CheckBox widget is a type of two-state button
12/25/2018

28. 12/25/2018

29. 2.6.2 ToggleButton
A toggle button allows the user to change a setting between two states, such as on or off.
12/25/2018

30. 2.6.3 Switch
A Switch is a two-state toggle switch widget that can select between two options: off/on
The user can drag the "thumb" back and forth to choose the selected option, or simply tap to toggle as if it were a checkbox
12/25/2018

31. 12/25/2018

32. 2.6.4 ProgressBar
A ProgressBar is a visual indicator of progress in a given operation
A ProgressBar control can be displayed to the user representing how far an operation has progressed
12/25/2018

33. 2.6.5 SeekBar
A SeekBar is an extension of ProgressBar that adds a draggable thumb
2.6.6 RatingBar
RatingBar is an extension of SeekBar and ProgressBar that shows a rating in starts.
12/25/2018

34. 2.6.7 Spinner
Spinners provide a quick way to select one value from a set of values
12/25/2018

35. String Array Resource <?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="planets_array">
<item>Mercury</item>
<item>Venus</item>
<item>Earth</item>
<item>Mars</item>
</string-array>
</resources>
<Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" />
12/25/2018

36. ArrayList<String> planets = new ArrayList<String>(); planets.add("Mercury"); planets.add("Venus"); planets.add("Earth"); planets.add("Mars"); ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, planets); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
12/25/2018

37. 2.7 Unique ID of a View Object & the R Class
id is a View attribute
When an app is compiled, all View objects are assigned a unique integer that identifies them
R.java is an auto-generated file to manage ids
Once a View can be uniquely identified, it can be referenced in Java source code
12/25/2018

38. 2.8 The ViewGroup A ViewGroup is a container of View objects
All ViewGroup objects are also View objects
A ViewGroup is a special type of View that is designed to hold groups of Views
Each ViewGroup is an invisible container that organizes child Views
12/25/2018

39. 12/25/2018

40. 2.8.1 RadioGroup A RadioGroup object is a ViewGroup container
As a ViewGroup, the RadioGroup is used to group together a related set of RadioButtons
12/25/2018

41. 12/25/2018

42. 2.9 Adaptive Design Concepts – Screens and Orientations
Many variations in screen sizes available
Adaptive design is important because it supports flexibility when designing an app that can work on multiple devices
Adaptive design refers to the adaptation of a layout design that fits an individual screen size and/or orientation
12/25/2018

43. Developers should expect their applications to be installed on devices with screens that range in both size and density
Apps should revise layouts to optimize the user experience in each orientation: landscape or portrait
12/25/2018

44. 12/25/2018

45. 2.10 TableLayout and TableRow
TableLayouts are often used for organizing data content into tabular form
Tables can be added to a layout file using the Graphical Layout Editor or programmatically using Java
The number of columns automatically matches the number of columns in the row with the most columns
The width of each column is defined as the width of the widest content in the column
12/25/2018

46. 12/25/2018

47. 2.11 Container Views Container Views are ViewGroups
Android categorizes this group of Views as “containers” because their sole function is to act as containers for other views
Any object that provides access to container values is referred to as a Container
12/25/2018

48. 12/25/2018

49. 2.11.1 ListView, GridView, ExpandableListView
The ListView, GridView, and ExpandableListView are all AdapterViews. This means they are populated with Views that are identified by an Adapter.
A ListView object displays items in a vertically scrolling list
GridView displays contain items in a two-dimensional scrolling grid.
A ExpandableListView is an extension of a ListView. This type of container displays items in a vertically scrolling list that supports two levels
12/25/2018

50. 2.11.2 ScrollView & HorizontalScrollView
The ScrollView and the HorizontalScrollView are containers specifically designed for scrolling
Both these containers are extensions of the FrameLayout
Once a View has been placed in either of these containers, the view can be made scrollable
12/25/2018

51. SearchView
The SearchView is typically added to the menu and provides an easy way to incorporate a standard search into the header of any activity  
The Android system controls all search events 
A SearchView object can be placed anywhere in your layout and will behave like a standard EditText View
12/25/2018

52. 2.11.4 VideoView A VideoView is an extension of a SurfaceView
It is used to display a video file
This means that it can load images from various sources (such as resources or content providers), and provides various display options such as scaling and tinting
12/25/2018

53. 2.12 Using an Adapter
Adapter provides a common interface to the data model behind an AdapterView, such as a ListView object
An Adapter is responsible for accessing the data to be supplied to a container widget and converting the individual elements of data into a specific format
The Adapter behaves as a middleman between the data source and the AdapterView layout
12/25/2018

54. 12/25/2018