Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5...
Transcript of Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5...
![Page 1: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/1.jpg)
Android IntroductionArchitecture
Activities, Lifecycle
Development Environment
1
![Page 2: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/2.jpg)
Why Android?
2
Pervasive Mobile Platform
- Runs on hundreds of millions of mobile phones, tablets
- World’s most popular & frequently installed mobile OS
- Open Source (minimum-definition).
Developer Friendly
- Familiar language (e.g. Java, Kotlin)
- Multi-platform support
- Android Studio, IntelliJ support
See http://developer.android.com/tools/index.html
![Page 3: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/3.jpg)
Development Environment
3
Java JDK
- https://adoptopenjdk.net/index.html
Android SDK
- https://developer.android.com/studio
- Included in the Android Studio installation
Development Environment
- Plan on using IntelliJ or Android Studio
- Examples are provided as IntelliJ projects
- https://www.jetbrains.com/idea/download
![Page 4: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/4.jpg)
Architecture
5
Applications are built in Java (or Kotlin)- Android compiler generates an Android Package (.apk file), which
contains code, resources etc.- Package is installed using SDK, which sets up environment for that app.
Applications run securely in the environment- Android is a Linux environment where every app is a distinct user!- When the app is installed, permissions are set to restrict access
(resources, data).- Every app runs in its own process.- Apps must request access to shares resources (e.g. file system,
camera)
As a developer, you create a manifest file in your package that describes how your application should be installed, what permissions it requires.
![Page 5: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/5.jpg)
6
![Page 6: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/6.jpg)
Setup
7
1. Download and install Java JDK.
2. Download and install Android Studio to get the Android SDK: https://developer.android.com/studio/
3. IntelliJ embeds an Android plugin that will use the Android SDK. Go to Settings to configure it (next slide).
4. Open a sample project (or create one) to check that it works.
![Page 7: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/7.jpg)
SDK Manager
8
Set the path to your Android SDK installation folder
Check the APIs you want
![Page 8: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/8.jpg)
Setup
9
Android SDK tools are accessed through a drop-down menu in your IDE.
AVD Manager: manage Android Virtual Devices (AVDs) for testing.
SDK Manager: maintaining the SDK itself.
![Page 9: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/9.jpg)
AVD Manager
10
![Page 10: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/10.jpg)
Sample Code
11
File -> Open (Project from Examples Directory)
Run, Select Deployment Target- Can launch AVD or push to connected device
![Page 11: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/11.jpg)
Getting Started: Project Wizard
12
Company Domain
- only important if you release your app, can just use something like:
cs349.uwaterloo.ca
API to target is the minimum Android version on target devices
- Use API 15 for Phone and Tablet (we won’t be doing anything restrictive)
SDK version is the version of the dev tools, libraries etc.
- Android Studio defaults to 29
Activity: Whatever you start with, do NOT use fragments
![Page 12: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/12.jpg)
Project Structure
13
Manifest (app/manifests/)
- Application setting
Java (app/java/)
- (*.java) source code
Resources (app/res/)
- layout: (*.xml) UI layout and View definitions
- values: (*.xml) constants like strings, colours, …
- also bitmaps and SVG images (mipmap*, drawable*, ….)
![Page 13: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/13.jpg)
Manifest - Activities
14
Metadata about the app
App components, Intent filters
<applicationandroid:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:theme="@style/AppTheme"><activity android:name=".MainActivity">
<intent-filter><action android:name="android.intent.action.MAIN" /><category
android:name="android.intent.category.LAUNCHER" /></intent-filter>
</activity></application>
![Page 14: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/14.jpg)
Manifest – Permissions
15
Android must request permission to access sensitive user data
User is prompted once on application launch (or on-demand with more recent versions of the OS)
Do not request more than you need (please!)
<manifest><uses-permission
android:name="android.permission.INTERNET" /><uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission
android:name="android.permission.SEND_SMS" /></manifest>
![Page 15: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/15.jpg)
App Resources
16
Each type of resource in located a specific subdirectory of your project's res/ directory
Access them using resource IDs that are generated in the project's R class
app/ manifest/ java/ res/
drawable/ graphic.png
layout/ activity_main.xml
mipmap/ icon.png
values/ strings.xml
![Page 16: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/16.jpg)
App Components
17
An application can consist of multiple “application components”.
Each component is an entry point through which the system or a user can enter or access your application.
Components Description
Activity Single-screen of an application
Service Long-running background process
Content provider Provides shared set of application data
Broadcast receiver Responds to system broadcast events
![Page 17: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/17.jpg)
Activities
18
The “standard” application component is an Activity
Typically represents a single screen of your application (and you may have multiple activities, one of which will be running at a time).
- Not a view, since it can contains both model + view
One activity will be the Main entry point for your application (aka Main).
![Page 18: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/18.jpg)
Activity Navigation
You can have multiple activities in your application (e.g. different screens), and switch between them as-needed.
- Activities can create other activities (i.e. “back stack” of activities that you can reach by using the back button)
- Navigation forward/back through activities is typically triggered by user actions
19
![Page 19: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/19.jpg)
Activity Lifecycle
20
Activities have an explicit lifecycle, and have a state reflecting what they are doing (e.g. “started” or “stopped”)
Changing state fires a callback method that corresponds to that state (e.g. going from “stopped” to ”started” causes the onStart() method to fire).
RunningPaused
/ Stopped
https://developer.android.com/guide/components/activities/activity-lifecycle.html
![Page 20: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/20.jpg)
Managing the Activity Lifecycle
21
Core callback functions:
onCreate()- being created or launching
onStart()- becomes visible to user
onResume()- prior to user interaction
onPause()- loses focus or background
onStop()- no longer visible to user
onDestroy()- being recycled and freed
![Page 21: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/21.jpg)
Interrupted Workflow
22
Applications can stop at any time (i.e. user quits, OS kills it, user presses the Back button- the activity transitions through
the onPause(), onStop(), and onDestroy()callbacks.
- the activity is also removed from the stack.
onRestoreInstanceState() is automatically called by the system after onStart().
onSaveInstanceState() is automatically called by the system after onStop().
To preserve simple transient-state data, override these methods- Save data in onSaveInstanceState()- Restore data in onRestoreInstanceState()
![Page 22: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/22.jpg)
Interrupted Workflow
23
Applications can stop at any time (i.e. user quits, OS kills it, user presses the Back button- the activity transitions through
the onPause(), onStop(), and onDestroy()callbacks.
- the activity is also removed from the stack.
onRestoreInstanceState() is automatically called by the system after onStart().
onSaveInstanceState() is automatically called by the system after onStop().
To preserve simple transient-state data, override these methods- Save data in onSaveInstanceState()- Restore data in onRestoreInstanceState()
![Page 23: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/23.jpg)
Intents
24
An Intent is a messaging object you can use to request an action from another application component- Starting an activity- Starting a service- Delivering a broadcast
This allows an application to use other application services! e.g. Instagram app can request access to the Camera activity to take a picture.- Eliminates the need to have functionality embedded in an application.- Allows the OS to control access/permissions to services.
We use intents to pass data between activities.- Basically a data structure holding an abstract description of an action
https://developer.android.com/guide/components/intents-filters.html
![Page 24: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/24.jpg)
Intents
25
Use startActivity() or startActivityForResult() methods to launch an activity with an intent.
- Use onActivityResult() to retreive the result of the activitylaunched with startActivityForResult()
- Can call explicit named activity (e.g. mySettingsActivity) or an implicit activity based on its capabilities (e.g. some camera activity)
![Page 25: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/25.jpg)
Intents
26
- Explicit intent that starts a download background service.
- Implicit intent that sends fires an intent to send a text message.
![Page 26: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/26.jpg)
Intents
27
- Start an activity to take a picture and retreive it
- Retrieve the taken photo from the camera activity that took the photo
![Page 27: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/27.jpg)
Android UI DevelopmentView hierarchies
Using different layouts
Using UI widgets
MVC
29
![Page 28: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/28.jpg)
Building User Interfaces
30
android.view.ViewGroup
Abstract container class that includes the layout
Subclasses:
LinearLayout, RelativeLayout, GridLayout, …
android.view.View
Base widget class (i.e. drawing and event handling)
Subclasses:
android.widget.Button
android.widget.ImageView
android.widget.ProgressBar
Android.widget.TextView
...
![Page 29: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/29.jpg)
User Interface Classes
31
UI is built using a hierarchy of View and ViewGroup
- A ViewGroup is an invisible container that defines the layout structure for View and other ViewGroup objects
- A View usually draws something the user can see and interact with
https://developer.android.com/guide/topics/ui/declaring-layout.html
![Page 30: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/30.jpg)
Common Layouts
32
Each subclass of the ViewGroup class provides a unique way to display the views you nest within it
Grid ViewDisplays items in a two-dimensional,
scrollable grid
Linear LayoutA layout that organizes
its children into a single horizontal or
vertical row
Relative LayoutEnables us to specify the location of child objects relative to
each other or to the parent.
![Page 31: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/31.jpg)
Specialized Layouts
33
RecyclerView
Display very long lists of items (and have the OS load/unload the items as you scroll).
https://developer.android.com/guide/topics/ui/layout/recyclerview
CardView
Customized cards (e.g. panels) that needs to be repeated over and over again.
e.g. blog posts each with a card
https://developer.android.com/guide/topics/ui/layout/cardview
![Page 32: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/32.jpg)
UI Definition and Layout
34
Layout can be handled in one of two ways:
- Programmatic: write code. You write code to instantiate ViewGroups, Views and bind them together (like in Java FX GuiBuilder).
- Declarative: use XML to describe your layout. In XML describe the screen elements (view groups and views) along with properties, and then tell your application to dynamically load it.
Using XML is the preferred way
- Android Studio & IntelliJ both include a GUI builder to make this easier!
![Page 33: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/33.jpg)
Layout: WYSIWYG Version
36
![Page 34: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/34.jpg)
Layout: XML Version
37
![Page 35: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/35.jpg)
Layout Example
38
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">
<EditTextandroid:id="@+id/editTextName”android:layout_alignParentTop="true”android:layout_marginTop="30dp"android:ems="12"android:text="@string/name”… />
<Buttonandroid:id="@+id/btnConfirm"android:layout_below="@id/editTextName"android:layout_marginTop="40dp"android:text="@string/confirm"… />
</RelativeLayout>
![Page 36: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/36.jpg)
Layout
39
When you compile your app, each XML layout file is compiled into a View resource
calling setContentView(), passing it the reference to your layout resource in the form of: R.layout.layout_file_name.
app/java/MainActivity.java
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);
}
![Page 37: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/37.jpg)
Linear Layout
40
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:orientationattribute.
All children of a LinearLayout are stacked one after the other
- a vertical layout will only have one child per row, no matter how wide is it
- a horizontal layout will only be one row high
https://developer.android.com/guide/topics/ui/layout/linear.html
![Page 38: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/38.jpg)
Key Attributes
41
Orientation
- Should the layout be a column or a row? Use "horizontal" for a row, "vertical" for a column.
Fill model
- MATCH_PARENT: the view wants to be as big as its parent
- WRAP_CONTENT: the view wants to be just large enough to fit its own internal content
Weight
- android:layout_weight attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen.
![Page 39: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/39.jpg)
Attributes
42
Gravity
- Specifies how an object should position its content, on both the X and Y axes (top, bottom, center,…)
Padding/margin
- Setting padding/margin
![Page 40: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/40.jpg)
LinearLayout
43
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingLeft="16dp"android:paddingRight="16dp"android:orientation="vertical" ><EditText
…/><EditText
…/>
<Button…
/></LinearLayout>
![Page 41: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/41.jpg)
LinearLayout
44
<LinearLayout …><EditText
android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/to" />
<EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/subject" />
<EditTextandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="top"android:hint="@string/message" />
<Buttonandroid:layout_width="100dp"android:layout_height="wrap_content"android:layout_gravity="right"android:text="@string/send" />
</LinearLayout>
Fill
![Page 42: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/42.jpg)
Relative Layout
45
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)
- in positions relative to the parent’s area (such as aligned to the bottom, left or center).
https://developer.android.com/guide/topics/ui/layout/relative
![Page 43: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/43.jpg)
View Positioning
46
RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID).
By default, all child views are drawn at the top-left of the layout
Example of some layout properties :
- android:layout_alignParentTop
- android:layout_centerVertical
- android:layout_below
- android:layout_toRightOf
- More: RelativeLayout.LayoutParams
https://developer.android.com/guide/topics/ui/layout/relative
![Page 44: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/44.jpg)
View Positioning in Relative Layout
47
android:layout_aboveandroid:layout_below
android:layout_toLeftOfandroid:layout_toRightOf
android:layout_alignBottomandroid:layout_alignTop
android:layout_alignLeftandroid:layout_alignRight
Widget 1
Widget 2
Widget 2
Widget 1
Widget 1Widget 2 Widget 2Widget 1
Widget 1Widget 2
Widget 1Widget 2
Widget 1
Widget 2
Widget 1
Widget 2
![Page 45: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/45.jpg)
Relative layout alignment parameters
48
android:layout_alignParentTop
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_centerInParent
android:layout_centerVertical
android:layout_centerHorizontal
android:layout_alignParentBottom
![Page 46: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/46.jpg)
49
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingLeft="16dp"android:paddingRight="16dp" ><EditText
…/><Spinner
…/><Spinner
…/><Button
…/>
</RelativeLayout>
Relative Layout
![Page 47: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/47.jpg)
50
<RelativeLayout …<EditText
android:id="@+id/name"android:layout_width="match_parent"android:layout_height="wrap_content” />
<Spinnerandroid:id="@+id/times"android:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/name"android:layout_alignParentRight="true" />
<Spinnerandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_below="@id/name"android:layout_toLeftOf="@id/times”android:layout_alignParentLeft="true” />
<Buttonandroid:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/times"android:layout_alignParentRight="true"android:text="@string/done" />
</RelativeLayout>
![Page 48: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/48.jpg)
Layout test
52
Check the layout with multiple screen sizes
![Page 49: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/49.jpg)
Code Demo: WidgetDemo
53
Notes
- TextView
- EditText
- RadioButton
- CheckBox
- Spinners
- Relative Layout
- Linear Layout
- Nested Layout
![Page 50: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/50.jpg)
Nested Layout
54
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextView
android:id="@+id/name_title"android:text=“@string/name">……
</TextView>……
<LinearLayoutandroid:layout_below="@+id/session">………<CheckBox
android:id="@+id/checkbox_morning"android:text="@string/morning”…… />
<CheckBox…… />
</LinearLayout></RelativeLayout>
Views
View
![Page 51: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/51.jpg)
View (Widget)
55
Properties:
Background color, text, font, alignment, size, padding, margin, etc
Event Listeners and Handlers:
respond to various events such as: click, long-click, focus change, etc.
Set focus:
Set focus on a specific view requestFocus() or use XML tag <requestFocus />
Visibility:
You can hide or show views using setVisibility(…).
![Page 52: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/52.jpg)
Views: TextViews
56
<TextViewandroid:id="@+id/txtHello"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!" />
TextView helloTextView = findViewById(R.id.txtHello);helloTextView.setText("CS349 W19");
![Page 53: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/53.jpg)
Views: EditText
57
<EditTextandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content”android:inputType="textPersonName" android:text=”@string/name” ><requestFocus/>
<EditText/>
EditText nameView = findViewById(R.id.name);String name = nameView.getText().toString();
![Page 54: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/54.jpg)
Views: Buttons
58
<Buttonandroid:id="@+id/btnAlarm"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/alarm" />
https://developer.android.com/guide/topics/ui/controls/button.html
Button button = (Button) findViewById(R.id.btnAlarm);. . .
![Page 55: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/55.jpg)
Responding to Events
59
<Buttonandroid:id="@+id/btnAlarm"……android:onClick="sendMessage"/>
/** Called in activity when the user touches the button */public void sendMessage(View view) {
// Do something in response to button click}
Button button = (Button) findViewById(R.id.btnAlarm);button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {// Do something in response to button click
}});
Option 1: Listeners
Option 2: Registered in Layout file
![Page 56: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/56.jpg)
Radio Buttons
60
<RadioGroupandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButton
android:id="@+id/radio_yes"android:layout_width="wrap_content"android:layout_height="wrap_content"android:weight=”1"android:onClick="onRadioButtonClicked"android:text="@string/yes" />
<RadioButtonandroid:id="@+id/radio_no"android:layout_width="wrap_content"android:layout_height="wrap_content"android:weight=”1"android:onClick="onRadioButtonClicked"android:text="@string/no" />
</RadioGroup>
![Page 57: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/57.jpg)
Radio Buttons
61
public void onRadioButtonClicked(View view) {// Is this button checked?boolean checked = ((RadioButton) view).isChecked();
// Check which radio button was clickedswitch (view.getId()) {
case R.id.radio_yes:if (checked)
// code for yesbreak;
case R.id.radio_maybe:if (checked)
// code for may bebreak;
case R.id.radio_no:if (checked)
// code for nobreak;
}}
https://developer.android.com/guide/topics/ui/controls/radiobutton
![Page 58: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/58.jpg)
Checkboxes
62
<CheckBoxandroid:id="@+id/checkbox_morning"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="onCheckboxClicked"android:text="@string/morning" />
<CheckBoxandroid:id="@+id/checkbox_afternoon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="onCheckboxClicked"android:text="@string/afternoon" />
https://developer.android.com/guide/topics/ui/controls/checkbox.html
![Page 59: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/59.jpg)
Checkboxes
63https://developer.android.com/guide/topics/ui/controls/checkbox.html
public void onCheckboxClicked(View view) {// Is the view now checked?boolean checked = ((CheckBox) view).isChecked();
// Check which checkbox was clickedswitch (view.getId()) {
case R.id.checkbox_morning:if (checked)// Add morning session
else// Remove morning sessionbreak;
case R.id.checkbox_afternoon:if (checked)// Add afternoon session
else// Remove afternoon sessionbreak;
}}
![Page 60: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/60.jpg)
ImageView
64
Display images
Save image resources to drawable folder
- app/src/main/res/drawable/ <ImageView
android:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content”android:src="@drawable/lollipop" />
![Page 61: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/61.jpg)
Events
65
Android uses the Java event model with additional mobile events
- Event listener: interface for specific type of event
- Event handler: registered callback method to handle the event
Event Listener Event Handler Type of event
OnClickListener onClick() Touch, click
OnLongClickListener onLongClick() Press and hold
onTouchListener onTouch() Generic touch events; can beused for touch_up, second_touch
![Page 62: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/62.jpg)
Multiple Views ApplicationUsing intents to launch activities
MVC in Android
ViewModel
68
![Page 63: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/63.jpg)
Activity Lifecycle
69
Usually, one view per activity
Only one activity is running at any given time
We often want to let users navigate between different views.
How can we share data between views? Intents
RunningRunning
Paused
![Page 64: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/64.jpg)
Start Another Activity: Pass Data
70
int version = 0;switch (radio_id){
case R.id.radioButton1:version = 6;break;
…
Intent intent = new Intent(this, VersionActivity.class);intent.putExtra("version", version); // data to passstartActivity(intent);
![Page 65: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/65.jpg)
Start Another Activity: Receive Data
71
// Get the Intent that started this activity //and extract the value in intIntent intent = getIntent();int v = intent.getIntExtra("version",0);
// Set the string match to the valueTextView label = findViewById(R.id.version_txt);switch(v){
case 6:label.setText(R.string.v6);
![Page 66: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/66.jpg)
Return “Home” to Previous Activity
72
In Manifest file, specify “parentActivity”
<applicationandroid:allowBackup="true”
…>
<activity android:name=".MainActivity">…
</activity>
<activity android:name=".VersionActivity"android:parentActivityName=".MainActivity”>
</activity></application>
![Page 67: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/67.jpg)
MVC in Android
73
With MVC, there is a data model that ensures consistent state across views.
Android makes MVC difficult, because
Activities cannot easily share data (since they exist independently)
An activity that creates a model may be later paused or destroyed.
How do we share our data across activities? Options:
1. Save and restore data within each activity.
2. Create a static model that is shared between activities.
3. Use Google’s ViewModel, a persistent Model class that survives activity changes.
![Page 68: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/68.jpg)
MVC Structure Option 1: Save and Restore Data in Views
74
view2.xmlView2
MainActivity
Model
view1.xmlView1
ViewGroup
ViewGroup
Activity Other ClassUI xml
![Page 69: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/69.jpg)
Code Demo: MVC1
75
Views as Android ViewGroups
- similar to desktop MVC we discussed earlier
Notes:
- Model essentially identical to desktop Java
- “Inflating” view layouts into main view
- onPostCreate() when inflating view layouts
- Save and restore model
![Page 70: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/70.jpg)
Recreating an Activity
76
protected void onSaveInstanceState(Bundle outState) {outState.putInt("Counter", model.getCounterValue());...
}
protected void onRestoreInstanceState(Bundle savedInstanceState) {model.setCounterValue(savedInstanceState.getInt("Counter"));...
}
Use built-in methods to save and restore model state.
![Page 71: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/71.jpg)
Application
MVC Structure Option 2: Shared Static Model
77
View1Activity
Model
view1.xmlcontentView
Activity Other ClassUI xml
View2Activity
view2.xmlcontentView
intents
![Page 72: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/72.jpg)
Code Demo: MVC2
78
Views as Activities, global static model
Notes:
- Application class- onDestroy(), deleteObserver()- Create options menu
- Intents to start activity- finish()- no need to persist model!
![Page 73: Android Introduction - student.cs.uwaterloo.cacs349/s20/slides/17.android.pdf · Architecture 5 Applications are built in Java (or Kotlin) -Android compiler generates an Android Package](https://reader034.fdocuments.in/reader034/viewer/2022043014/5fb255d6b7559315995300a0/html5/thumbnails/73.jpg)
MVC Structure Option 3: ViewModel
79
Google provides a ViewModel helper class
Use to asynchronously fetch data.
But NOT persistent across Activities.
https://developer.android.com/topic/libraries/architecture/viewmodel#java