Applications for Mobile Devices
Design Patterns
Dr. Vítor Luiz da Silva Verbel
vitor.dasilva@udl.cat
Course: 105025-2425
Contents
Sprint 01 - Retrospective
Design Patterns
MVC
MVP
MVVM
States in Composable
Sprint 02
Applications for Mobile Devices
Scrum
Applications for Mobile Devices 3
Sprint 01 - Retrospective
What worked well?
What could be improved?
How will it be improved?
Applications for Mobile Devices 3
Project – Travel Planner
Development of an Android application that allows users to document their trips through itinerary management, image
storage, interactive maps, and AI-based activity suggestions.
Project Goals Sprints and Features
Seamless Navigation – Implement Splash Screen, Basic Navigation, Sprint 1: Splash Screen, Basic Navigation, Main Screen Layout, Scaffolding, and
and Main Screen Layout. Domain Model. Delivery 02/03/2025
Trip Management – Enable CRUD for travel lists and itineraries. Sprint 2: Travel List (CRUD), Trip Itinerary (CRUD). Delivery 16/03/2025
Data Persistence – Store travel logs, user preferences, and integrate Sprint 3: Data Persistence, External API Usage, User Preferences Screen. Delivery
external APIs. 28/03/2025, oral presentation*
Secure Authentication – Implement Login and Firebase Sprint 4: Login Screen, Authentication. Delivery 27/04/2025
Authentication.
Sprint 5: Images, Upload Document and Map Screen: Image Capture and
Media & Maps – Enable image capture/storage and interactive Storage, Interactive Maps. Delivery 11/05/2025
maps.
Sprint 6: Explore Screen + Custom Functionality – Implement Gemini AI for
AI-Powered Assistance – Use Gemini AI for activity suggestions personalized suggestions in the Explore Screen, and develop a separate Custom
and custom functionality. Screen where each group creates and integrates their own unique functionality.
Delivery 23/05/2025, oral presentation*
*The professor will visit each group (10m) to review the deliverable
Applications for Mobile Devices 3
Project – Travel Planner
*Delays will incur a 30% penalty. The last delivery cannot be delayed.
Applications for Mobile Devices 3
Project – Groups
Group Student 1 Student 2
GROUP 1 Ivonne Hernán Mireia Terricabras
GROUP 2 Daniel Grao Ferran Sidera
GROUP 3 César Gallardo Mikael Rodríguez
GROUP 4 Hugo Fernández Sisquella Pol Marsol Torras
GROUP 5 Nígel Boada Martí Farran
GROUP 6 Oriol Ferrer Francesc Xavier
GROUP 7 Alex Lillo Alberto Martino
GROUP 8 Xiaolong JI Jan Castells
GROUP 9 Iker Infantes Axel Berral
GROUP 10 Nil Torres Sergio Lorca
GROUP 11 Jakub Wysocki
GROUP 12 Gerard Moliner
GROUP 13 Guillem Farriols
Applications for Mobile Devices 3
Design Patterns
Applications for Mobile Devices
Applications for Mobile Devices 3
Applications for Mobile Devices 3
Observer Pattern
Applications for Mobile Devices
Applications for Mobile Devices 3
Figure 1: Schema of the observer pattern
Applications for Mobile Devices 3
Applications for Mobile Devices 3
Applications for Mobile Devices 3
Applications for Mobile Devices 3
Applications for Mobile Devices 3
https://codepumpkin.com/wp-content/uploads/2017/11/ObserverDesignPattern.jpg.webp
Applications for Mobile Devices 3
Model View Controller (MVC)
Applications for Mobile Devices
Applications for Mobile Devices 3
Figure 2: Schema of the Model View Controller
Applications for Mobile Devices 3
https://developer.mozilla.org/en-US/docs/Glossary/MVC
Applications for Mobile Devices 3
Figure 3: Sequence Diagram for processing events (MVC)
Applications for Mobile Devices 3
Figure 4: Sequence Diagram for starting (MVC)
Applications for Mobile Devices 3
Applications for Mobile Devices 3
Model View Presenter (MVP)
Applications for Mobile Devices
Applications for Mobile Devices
Applications for Mobile Devices
Figure 5: Schema of the Model View Presenter
Applications for Mobile Devices
Code Example (MVC and MVP)
Applications for Mobile Devices
Code Example
DEMO: AgeApp
• All the source code can be found in this github repo DAM-MVC-MVP.
Master branch
• Model-View-Controller using observer pattern. (Approach 1)
MVP branch
• Model-View-Presenter.
MVC (Approach 2)
• Not included in the repo (only in slides).
Figure 6: Screenshot of the demo app
Applications for Mobile Devices
Let’s check the MVC Code Example
Applications for Mobile Devices
Applications for Mobile Devices
Applications for Mobile Devices
Applications for Mobile Devices
Applications for Mobile Devices
Applications for Mobile Devices
Model-View-ViewModel (MVVM)
Applications for Mobile Devices
Applications for Mobile Devices
ViewModel Class
The ViewModel class is designed to store and manage UI-related data
in a lifecycle. So, it allows data to survive configuration changes, for
example, in screen rotations.
• ViewModel objects are scoped to the Lifecycle passed to the
ViewModelProvider. The ViewModel keeps in memory from
(onCreate) until the Lifecycle it’s scoped to goes away permanently
(Activity-Finish, Fragment-Detached).
• Note: onCreate may be called several times during the life of an
Activity, such as when the app is rotated, but the ViewModel survives
throughout.
• Architecture Components provides the ViewModel helper class for
the UI controller responsible for preparing data for the UI.
Applications for Mobile Devices
Implementation of the ViewModel (Java)
Applications for Mobile Devices
Implementation of the ViewModel
data class DiceUiState(
val firstDieValue: Int? = null,
val secondDieValue: Int? = null,
val numberOfRolls: Int = 0,
)
class DiceRollViewModel : ViewModel() {
// Expose screen UI state
private val _uiState = MutableStateFlow(DiceUiState())
val uiState: StateFlow<DiceUiState> = _uiState.asStateFlow()
// Handle business logic
fun rollDice() {
_uiState.update { currentState ->
currentState.copy(
firstDieValue = Random.nextInt(from = 1, until = 7),
secondDieValue = Random.nextInt(from = 1, until = 7),
numberOfRolls = currentState.numberOfRolls + 1,
)
}
}
}
Applications for Mobile Devices
What is the MVVM?
Definition
A design pattern overcomes all drawbacks of MVP and MVC in the Android environment.
Figure 7: Schema of the MVVM architecture
Applications for Mobile Devices
Applications for Mobile Devices
https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=es-419
Applications for Mobile Devices
States in Compose
Applications for Mobile Devices
State
State in an app is any value that can change over time.
State and MutableState types in Compose to make state in your app observable, or tracked, by Compose. The State type is immutable, so you can only
read the value in it, while the MutableState type is mutable.
Eg. var count: MutableState<Int> = mutableStateOf(0)
OR
var count = mutableStateOf(0)
The value returned by the mutableStateOf() function:
● Holds state, which is the count of how many times button is tapped.
● Is mutable, so the value can be changed.
● Is observable, so Compose observes any changes to the value and triggers a recomposition to update the UI.
States generators in Android
https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=es-419
Applications for Mobile Devices
Lifecycle of Compose
https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=es-419
Applications for Mobile Devices
State In Composables
Remember API
● remember
● rememberSavable
Note: remember stores objects in the Composition, and forgets the object when the composable that called remember is removed from
the Composition.
Applications for Mobile Devices
MutableState
● val mutableState = remember { mutableStateOf(default) }
● var value by remember { mutableStateOf(default) }
● val (value, setValue) = remember { mutableStateOf(default) }
Applications for Mobile Devices
MutableState
@Composable
fun CounterButton() {
var count by remember { mutableStateOf(0)}
Button(onClick = {
count += 1 // count = count + 1
Log.d("Counter", "Count: $count")
},
shape = CircleShape,
elevation = ButtonDefaults.elevation(8.dp),
colors = ButtonDefaults.buttonColors(backgroundColor =
Color.LightGray),
modifier = Modifier Note:
.height(150.dp) ● During initial composition, value in the Text is set to the initial
.width(150.dp)) { value, which is 0.
Text(text = "Tap $count", fontSize = 30.sp, ● When the user clicks the tap button, the count variable is
fontWeight = FontWeight.Bold) set to the update its value.
} ● The count variable is the mutable state being tracked by the
Compose, recomposition is scheduled.
} ● The Card() composable function is recomposed. Since you
are using remember { } the change survives the
recomposition, that is the state is not re-initialized to 0.
● The value of the text is set to the remembered value of
count. The text recomposes (redrawn on the screen with
new value).
Applications for Mobile Devices
State Hoisting
State hoisting is a pattern of moving state up to a different function to make a component stateless.
Understand stateful versus stateless composables
• A stateless composable is a composable that doesn't have a state, which means that it doesn't hold, define, or modify a new
state.
• A stateful composable is a composable that owns a piece of state that can change over time.
When applied to composables, this often means introducing two parameters to the composable:
• A value: T parameter, which is the current value to display.
• An onValueChange: (T) -> Unit – callback lambda, which is triggered when the value changes so that the state can be
updated elsewhere.
Applications for Mobile Devices
State Hoisting
Applications for Mobile Devices
State Hoisting (1)
@Composable
fun MoneyCounter() {
Column(modifier = Modifier
.fillMaxHeight()
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center) {
Text(text = "$0", fontWeight = FontWeight.Bold, fontSize = 50.sp)
Spacer(modifier = Modifier.height(200.dp))
CounterButton()
}
}
Applications for Mobile Devices
State Hoisting (example 2)
@Composable
fun MoneyCounter() {
Column(modifier = Modifier
.fillMaxHeight()
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center) {
var count by remember {
mutableStateOf(0)
}
Text(text = "$$count", fontWeight = FontWeight.Bold, fontSize = 50.sp)
Spacer(modifier = Modifier.height(200.dp))
CounterButton(count) {
count = it + 10
}
}
}
Applications for Mobile Devices
State Hoisting (3)
@Composable
fun CounterButton(count: Int, UpdateCount: (Int) -> Unit) {
Button(onClick = { UpdateCount(count) },
shape = CircleShape,
elevation = ButtonDefaults.elevation(8.dp),
colors = ButtonDefaults.buttonColors(backgroundColor =
Color.LightGray),
modifier = Modifier
.height(150.dp)
.width(150.dp)) {
Text(text = "Tap", fontSize = 30.sp, fontWeight = FontWeight.Bold)
}
}
Applications for Mobile Devices
State Hoisting (example 4)
@Composable
fun MoneyCounter() {
Column(){
..
..
..
Spacer(modifier = Modifier.height(50.dp))
if(count >= 100) {
Text(text = "You have lots of money", fontSize = 30.sp)
}
}
}
Applications for Mobile Devices
Hands On
Applications for Mobile Devices
MutableStateOf and VM (1)
Download:
https://github.com/VitorDaSilvaUdL/android-states.git
Run the project and click in TAP.
You will notice that it doesn't work… but, look at the logs…
Applications for Mobile Devices 3
MutableStateOf and VM (2)
Uncomment the code bellow and click in TAP.
You will notice that now it works… reason: Remember + MutableStateOf
Applications for Mobile Devices 3
MutableStateOf and VM (3)
Now click in rotate.
You will notice that the counter lost its value
Applications for Mobile Devices 3
MutableStateOf and VM (4)
Do the same (tap, tap, tap and rotate) in the Counter VM.
You will notice that the counter kept its value
Applications for Mobile Devices 3
MutableStateOf and VM (5)
Review the CounterViewModel implementation
Applications for Mobile Devices 3
MutableStateOf and VM (6)
Review the CounterViewModel usage
Applications for Mobile Devices 3
Sprint 02
Applications for Mobile Devices
Project – Travel Planner
Development of an Android application that allows users to document their trips through itinerary management, image
storage, interactive maps, and AI-based activity suggestions.
Project Goals Sprints and Features
Seamless Navigation – Implement Splash Screen, Basic Navigation, Sprint 1: Splash Screen, Basic Navigation, Main Screen Layout, Scaffolding, and
and Main Screen Layout. Domain Model. Delivery 02/03/2025
Trip Management – Enable CRUD for travel lists and itineraries. Sprint 2: Travel List (CRUD), Trip Itinerary (CRUD). Delivery 16/03/2025
Data Persistence – Store travel logs, user preferences, and integrate Sprint 3: Data Persistence, External API Usage, User Preferences Screen. Delivery
external APIs. 28/03/2025, oral presentation*
Secure Authentication – Implement Login and Firebase Sprint 4: Login Screen, Authentication. Delivery 27/04/2025
Authentication.
Sprint 5: Images, Upload Document and Map Screen: Image Capture and
Media & Maps – Enable image capture/storage and interactive Storage, Interactive Maps. Delivery 11/05/2025
maps.
Sprint 6: Explore Screen + Custom Functionality – Implement Gemini AI for
AI-Powered Assistance – Use Gemini AI for activity suggestions personalized suggestions in the Explore Screen, and develop a separate Custom
and custom functionality. Screen where each group creates and integrates their own unique functionality.
Delivery 23/05/2025, oral presentation*
*The professor will visit each group (10m) to review the deliverable
Applications for Mobile Devices 3
Sprint 02 – Logic
T1. Implement Travel Management Logic (5 Points) T2. Design and Implement Itinerary Flow (2 Points)
• T1.1 Implement CRUD operations for trips (addTrip, editTrip, • T2.1 Structure how users will interact with the itinerary.
deleteTrip). • T2.2 Implement a basic UI flow for adding and modifying trip details.
• T2.3 Ensure updates reflect dynamically in the main trip list.
• T1.2 Implement CRUD operations for itinerary items (addActivity,
updateActivity, deleteActivity). T3. Implement Data Validation and Testing (3 Points)
• T1.3 Ensure proper data validation (e.g., dates must be in the
future, required • T3.1 Implement basic input validation (e.g., empty fields, incorrect dates).
fields). • T3.2 Write unit tests for trip and itinerary CRUD operations.
• T3.3 Simulate user interactions and log errors or unexpected behaviors.
• T3.4 Update documentation with test results and fixes applied.
• T3.5 Add logs (to be seen in logcat) and commentaries applying good
practices
Applications for Mobile Devices 3
Project – Travel Planner
*Delays will incur a 30% penalty. The last delivery cannot be delayed.
Applications for Mobile Devices 3
Applications for Mobile Devices
That’s all
Full Name 2022 March 27
Week IV
Course: 105025-2425
Week 1
