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.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

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

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

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

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

12/25/2018

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

12/25/2018

12/25/2018

12/25/2018

12/25/2018

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

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

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

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

12/25/2018

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

12/25/2018

12/25/2018

12/25/2018

12/25/2018

imeOptions actionSend actionDone actonGo actionNext actionPrevious 12/25/2018

12/25/2018

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

12/25/2018

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

12/25/2018

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

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

12/25/2018

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

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

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

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:id="@+id/spinner" android:layout_width="wrap_content" android:entries="@array/planets_arrays" android:prompt="@string/planets_prompt" android:layout_height="wrap_content" /> 12/25/2018

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

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

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

12/25/2018

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

12/25/2018

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

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

12/25/2018

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

12/25/2018

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

12/25/2018

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

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

2.11.3 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

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

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

12/25/2018