mobile application development€¦ · •overview of what android is •creating projects,...
TRANSCRIPT
Recap from last lecture
• Overview of what Android is
• Creating projects, emulated devices
• Basics of Application lifecycle
• Basics of Resources and UI Layouts• Advantages of declarative approach
• Simple user interaction
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 2
Outline
• Views & Layouts continued
• Navigation
• Event handling
• Structure & Components of applications
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 3
Android View Hierarchy
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 4
Viewgroup and View
• A hierarchy of Viewgroup and View objects
• View – something the user can see/interact with
• Viewgroup – an invisible container for structuring other view & viewgroup objects
• View inflation
14/09/2018
https://developer.android.com/guide/topics/ui/declaring-layout
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 5
View items (Widgets)
• EditText
• TextView
• Button
• Switch
• Checkbox
• RadioButton
• ToggleButton
• Spinner ( dropdown list )
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 6
14/09/2018
Figure on right: Ableson, W. Frank, Robi Sen, and Chris King. Android in Action Second Edition. Manning Publications Co, 2011.
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 7
ViewGroup items
• Contain other view elements
• Invisible
• Define the positioning
• Support nesting
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 8
ViewGroup Item examples
• Layouts• LinearLayout: single row (column) of items
• ConstraintLayout: flat hierarchy
• FrameLayout: each child a layer
• TableLayout• similar to HTML tables
• consist of TableRow objects
• GridLayout: index-based row and column layout
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 9
ViewGroup Item examples (2)
• ListView
• GridView
• ScrollView
• Toolbar
• AdapterView – contents are handled by dynamic adapter
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 10
XML Attributes
• View objects let you specify various XML attributes• textSize for TextView• hint for EditText
• While there are lots of object-specific attributes, some are shared:• ID• layout_width, layout_height
• MATCH_PARENT: Expand the View to fill the space of parent container (Layout)
• WRAP_CONTENT: Expand the View just enough to fit the contents of the View (e.g. the text contained in TextView)
• Fixed: e.g. 10dp (density-independent pixel) (https://developer.android.com/training/multiscreen/screendensities)
14/09/2018
<EditText
android:id="@+id/nameInput"
android:hint=“E.g. John Doe"
…
/>
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 11
Attributes example with LinearLayout• orientation horizontal, vertical
• gravity: “Specifies how an object should position its content, on both the X and Y axes, within its own bounds. “
• For children of a LinearLayout:• android:layout_weight – specify how to divide
remaining space
14/09/2018
https://developer.android.com/guide/topics/ui/layout/linear.html
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 12
Linear Layout Example
14/09/2018
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FF0000"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00FF00"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#0000FF"/>
</LinearLayout>
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 13
Exercise 1: Nested Layouts
• Create an Activity with the Estonian and Italian national flags one after the other
• Use XML attributes & nesting with LinearLayout
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 14
RelativeLayout
• A Layout where the location for Views can be described: • Relative to other Views added (“to the left of X”)
• Relative to the parent RelativeLayout container (“aligned to the container bottom”)
• Suggested for use over nested LinearLayouts• More complex, deep the nesting of a layout, the longer
to inflate
• Especially with weights
14/09/2018
https://developer.android.com/guide/topics/ui/layout/relativehttps://developer.android.com/training/improving-layouts/optimizing-layout
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 15
RelativeLayout attributes
layout_alignParentTop
• If "true", makes the top edge of this view match the top edge of the parent.
layout_centerVertical
• If "true", centers this child vertically within its parent.
layout_below
• Positions the top edge of this view below the view specified with a resource ID.
layout_toRightOf
• Positions the left edge of this view to the right of the view specified with a resource ID.
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 16
Example RelativeLayout
• A flat layout! ImageView
android:layout_centerHorizontal="true" android:layout_centerVertical="true"
Button android:layout_below="@id/image" android:layout_centerHorizontal="true"
SearchView android:layout_alignTop="@id/button" android:layout_toRightOf="@id/button"
CheckBox android:layout_alignBottom="@+id/button" android:layout_toRightOf="@+id/button"
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 17
14/09/2018
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:id="@+id/logo"
android:src="@mipmap/ic_launcher"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<Button
android:id="@+id/button"
android:text="@string/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/logo"
android:layout_centerHorizontal="true" />
<SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@id/button"
android:layout_toRightOf="@id/button" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/checkbox_text"
android:layout_alignBottom="@+id/button"
android:layout_toRightOf="@+id/button" />
</RelativeLayout>
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 18
ConstraintLayout
• Effectively similar to RelativeLayout• All views are laid out according to the constraint rules
specified• More performant• More flexible
• E.g. bias options and negative margins
• Visual design• Takes advantage of Layout Editor’s visual tools, thus
improving the visual design process• (Layout Editor was purpose-built for ConstraintLayout)
• Thus, further helps avoid nesting
14/09/2018
https://developer.android.com/training/constraint-layout/
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 19
ConstraintLayout
• Recall, every object must have at least 2 constraints: 1 horizontal and 1 vertical
• By default, all constraints also have margins
14/09/2018
https://developer.android.com/training/constraint-layout/
Resizing handlesConstraint handles
Margin
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 20
Opposing constraints
• Centered when size is set to "wrap_content“ or a fixed value
• Stretched when size is set to match_constraint
14/09/2018
https://developer.android.com/training/constraint-layout/
With two constraints on the same axis, a View is:
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 21
Constraint bias
• The centering behaviour is due to the default bias value of 50%
• Adjust the Bias to get other alignments
14/09/2018
https://developer.android.com/training/constraint-layout/
app:layout_constraintHorizontal_bias="0.25"
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 22
Layout Editor: Attributes pane
• Easiest way to adjust various attributes, including:
• Bias
• Margins
• Constraints
• ID
14/09/2018
https://developer.android.com/training/constraint-layout/#adjust-the-view-size
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 23
Chaining
A group of views linked bi-directionally
1. Evenly (default)
2. Spread Inside
3. WeightedWith (1) and (2) and match_constraints + app:layout_constraintHorizontal_weight
4. Packed
14/09/2018
https://developer.android.com/training/constraint-layout/#constrain-chain
app:layout_constraintHorizontal_chainStyle="packed"
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 24
Guidelines, Ratios
• Guidelines• Are not rendered during runtime
• Allow attaching constraints
• Help you create a nice design
• Ratio• Let’s you constraint an object to a
given aspect ratio
• Have to set match_constraint
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 25
Exercise 2: ConstraintLayout1. Divide view vertically into 2 using a
guideline2. Top should have 1 TextView with long
text• Vertically centered w.r.t. guideline• Horizontally constrained to edges of layout,
with 32dp margin• Width set to match constraint
3. Add 3 TextViews to bottom• Vertically centered• Create a horizontal chain of them
• Set chain to “spread inside”• Horizontally constrained to edges of the
top TextView
14/09/2018
2/3
1/3
32dp
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 26
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 27
Landscape Mode should appear like this
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 28
Support & Compatibility libraries
• We’ve already seen how the framework has evolved over the years• e.g. RelativeLayout ConstraintLayout
• Look & Feel of Android in general has also changed• Material design
14/09/2018
https://developer.android.com/topic/libraries/support-library/
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 29
Support & Compatibility libraries
• Some API features don’t exist on older versions• E.g. ConstraintLayout supported for API v9+ (2010),
although ConstraintLayout introduced in 2016
• Some modern UI features are packaged as a Support library• E.g. Floating action button• android.support.design.widget.FloatingActionButton
• Convenience and Helper classes• E.g. RecyclerView – manage large list views
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 30
App Bar (Action Bar)
• A dedicated space for familiar user interaction
• Access to important actions in a quick, predictable way
• Common uses:• Show current location/state within the App
• Search
• Additional settings
• Navigation & view switching (with tabs or drop-down lists)
14/09/2018
https://developer.android.com/training/appbar/
MainActivity extends AppCompatActivity
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 31
Adding Action Buttons
• Activities using the default theme have an ActionBar as an app bar.
• Create a XML resource file in res/menu
14/09/2018
https://developer.android.com/training/appbar/actions
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 32
Adding Action Buttons (2)
• Override onCreateOptionsMenu
• Handle interaction by overriding onOptionsItemSelected
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 33
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.mymenu, menu);
return true;
}
Fragments
• Fragment – a portion of the UI
• Dynamic, multi-pane user interfaces:• With larger screens, there’s more room to combine,
interchange, re-use UI elements
• Fragments manage this for you
• Fragments are hosted within activities, thus they are also affected by the host activity's lifecycle!
14/09/2018
https://developer.android.com/guide/components/fragments
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 34
Creating Fragments
• Create a Fragment subclass• onCreateView!
• Add a Fragment tosome Activity with XML• E.g. landscape mode or tablet mode
14/09/2018
https://developer.android.com/training/basics/fragments/creating
<LinearLayout >
<TextView=“Hello World" />
<fragment
android:id="@+id/fragment_view"
android:name="example.com.app.MyFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
public class MyFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.fragment_view, container, false);
}}
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 35
App. Components
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 36
Basic Application Components
Essential building blocks of an Android application
Entry point through which the system or a user can enter your app
• Activities
• Services• Functionality that runs in the background• May be called by other components such as activities or services
• Broadcast Receivers • Enable delivering events from outside regular user flow• E.g. system-wide broadcast announcements• Avoids keeping an app running to wait for an event (e.g. battery low,
screen off)• Apps can also initiate Broadcasts
• ContentProviders• Enable applications to share data
14/09/2018
https://developer.android.com/guide/components/fundamentals
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 37
Starting Components - Intents
• Recall how applications run in their sandboxes• Isolated from each other
• In Android, any app can start another app’s component.• E.g. Camera
• My App -> Camera App -> My App
• Intents are used to activate 3 of the main component types:• Activities, Services and Broadcast receivers.
• Asynchronous
14/09/2018
https://developer.android.com/guide/components/intents-filters
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 38
Working with Intents
• Declare the details of which component you wish to invoke by creating an Intent object
• Send out the Intent message, with:• startActivity(intent);• startService(intent);• sendBroadcast(intent);• … and others
• System matches Intent with components that match the Intent description (e.g. intent to capture a photo)
• Activities and BroadcastReceivers describe what Intents they can service in their IntentFilters (via AndroidManifest.xml)
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 39
Example: Start an Activity
• Create an Intent object
• Specify the component class you want to launch
• Pass Intent to startActivity()
• How do we know whether the activity was actually successfully started or finished?
• What if we want to receive some results?
• How do we pass data?
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 40
Extras
• You can add your own data to the Intent using Extras• Intent.putExtra(key, value)
Extra- a Bundle (Key-value pairs ) of any additional information
• Can be used to provide extended information to the component• Example: if we have an action to send an e-mail
message, we could also include extra pieces of data here to supply a subject, body, etc.
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 41
Exercise 3: Start an Activity
• Activity 1:• User inputs their name
• Hitting a button forwards user to Activity 2
• Activity 2:• Displays a greeting with user’s name using Toast:
• What’s a Toast?• Simple and effective way to show temporary messages
14/09/2018
https://developer.android.com/guide/topics/ui/notifiers/toasts
Context context = getApplicationContext();Toast toast = Toast.makeText(context, text, Toast.LENGTH_SHORT);toast.show();
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 42
Implicit & Explicit Intents
• Explicit• Targeted at a specific application by specifying the
package name or class name
• Use it to start components of your own app
• Implicit• Do not specify the component exactly, but rather a
general action
14/09/2018
https://developer.android.com/guide/components/intents-filters#Types
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 43
Intent Object details
• Component name• name of the component to start - specify using a fully
qualified class name • Optional (determines whether implicit or explicit Intent)
• Action - The general action to be performed• ACTION_CALL - Initiate a phone call• ACTION_WEB_SEACH - Perform a web search• ACTION_VIEW – show something to the user (e.g.
contact)
• Data• The URI of the data to be acted on• Uri uri = Uri.parse(“content://contact/people”);
14/09/2018
https://developer.android.com/reference/android/content/Intent.html
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 44
Examples of action/data pairs
• ACTION_VIEW content://contacts/people/1• Display information about the person with identifier "1"
• ACTION_DIAL content://contacts/people/1• Display the phone dialer with the person filled in
• ACTION_VIEW tel:123• Display the phone dialer with the given number filled in
• VIEW action does what is considered the most reasonable thing for a particular URI
• ACTION_EDIT content://contacts/people/1• Edit information about the person whose identifier is "1"
14/09/2018
https://developer.android.com/guide/components/intents-common
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 45
Intent Object - continued
• Category• Category of component that should handle the intent
• CATEGORY_BROWSABLE - The target activity can safely be invoked by the browser
• CATEGORY_LAUNCHER - The activity is the initial activity of a task and is listed in the system's application launcher.
• ACTION_MAIN with category CATEGORY_HOME • Launch the home screen.
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 46
Intent Object - continued
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 47
Intent intent = new Intent(Intent.ACTION_SEND);
intent.setType("plain/text");
intent.putExtra(Intent.EXTRA_EMAIL, emailAddressList);
intent.putExtra(Intent.EXTRA_SUBJECT, emailSubject);
intent.putExtra(Intent.EXTRA_TEXT, emailText);
startActivity(intent);
Intent filters
• Specifies the type of intents that the component would like to receive
• Declared in the app’s manifest
14/09/2018
https://developer.android.com/guide/components/intents-filters#Receiving
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 48
<activity android:name=".BasicActivity">
<intent-filter>
<action android:name="android.intent.action.SEND"/>
<category android:name="android.intent.category.DEFAULT"/>
<data android:mimeType="text/plain"/>
</intent-filter>
</activity>
Intent resolution
• Android puts together a list of Intent Filters
• Input Filters that do not match the action or category are removed from the list
• Each part of the Intent’s data URI is compared to the Intent Filters data tag
• If more than one component is resolved, they are offered to the user to select
14/09/2018
Image: https://developer.android.com/guide/components/intents-filters#ForceChooser
Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 49
Launching activities for results
• You can get back results once the started activity has finished
• startActivityForResult()
• onActivityResult()
• Inside the started Activity, you can indicate the status of the result with:• setResult(Activity.RESULT_OK, resultIntent);
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 50
Context
• When working with Intents, we have been using context by referring to the current activity:• new Intent(this, OtherActivity.class);
• Context- An abstract interface to the application environment & system• The Context object returned can vary, depending on where
you access it (e.g. from an Activity vs from a Service)
• We need to context to• invoke other components of our app• Invoke system services
• context.getSystemService(Context.WIFI_SERVICE)
• Access the resources tied to our app/the system
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 51
Getting a reference of Context
• Different ways to get the Context:• getContext();
• getApplicationContext();
• getBaseContext();
• this-keyword inside an Activity or Service
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 52
Working with Context
• The different Context types can be roughly divided into 2:• UI-based context, includes theming-related aspects
• (e.g. using Activity as Context), getContext() in Fragment• Non-UI Context
• getApplicationContext() (in Activity, Service, etc)
• (UI-based) context is meant to be short-lived• So don’t store UI-based context in a static variable, for example!
• Use the Context available to you from the enclosing component you’re working within. • Let the component lifecycle take care of releasing the Context
object• If you need the Context reference to outlive the component, use
getApplicationContext() instead
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 53
Next time
• Rest of the main Component types• Service, Content Provider, Broadcast Receiver
• Data Storage, incl.• File access
• Working with databases
• Background tasks
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 54
Homework 2
• Simple User Profile creator• App opens with MainActivity:• “Picture” button starts an
intent to capture a photo• Once captured, the ImageView of
MainActivity is updated
• “Details” button opens a 2nd
activity with EditText and Spinner elements for entering data• Hitting ‘Save’ should finish this
activity and return the data back to MainActivity
14/09/2018 Mobile & Cloud Lab. Institute of Computer Science, University Of Tartu 55