/BreathWell

A sample app which will be used for showcasing how to create Android app with Jetpack Compose

Primary LanguageKotlinMozilla Public License 2.0MPL-2.0

BreathWell

A sample app which will be used for showcasing how to create Android app with Jetpack Compose.

Jetpack Compose

Jetpack Compose allows developers to build UIs using a reactive and composable programming model. Instead of using traditional XML-based layouts or the older View-based system, Compose allows developers to define the user interface using Kotlin code. With Compose, UI elements are described as functions or composables that can be combined and reused to create complex UI hierarchies.

One of the key advantages of Jetpack Compose is its simplicity and productivity. The declarative nature of Compose makes it easier to understand, maintain, and modify UI code compared to the imperative and XML-based approaches. It also provides a live preview feature that allows developers to see the changes in the UI in real-time as they write the code.

ViewModel

ViewModel is an architectural component provided by the Android Jetpack library. It is designed to store and manage UI-related data in a lifecycle-aware manner. ViewModel helps separate the concerns of the user interface (UI) and the underlying data, improving the overall architecture of Android applications.

Repo

In Android, the repository is a component of the Model layer in the recommended architecture patterns like Model-View-ViewModel (MVVM) or Model-View-Presenter (MVP). It acts as an intermediary between the data sources (such as a local database, network API, or cache) and the rest of the application components, such as ViewModel or Presenter.

Data Source

In the context of Android development and software architecture, a data source refers to the origin or location of data that an application interacts with. It can be any storage or retrieval mechanism that provides the application with the necessary data.

Sample App

As the objective is just to demonstrate the functioning of each layer hence a dummy data is prepared which in reality for production app could be the original source of data from local or cloud.



FakeDataSource - It provides the data for the display
BreathRepo - It fetch the data from the data source and provide it to the viewmodel, it basically have just two methods

object BreathRepo {

    fun getAllBreathingExercises() = FakeDataSource.breathList

    fun getBreathingExerciseBasedOnType(type: String?) = FakeDataSource.getBasedOnType(type)

}

BreathViewModel - It fetch the data from the BreathRepo and provides it to the UI elements created through the Compose UI
Dashboard (Composable) - It shows the list of all breathing exerices available
ScheduleTimer (Composable) - It shows the countdown timer associated for the breathing exerices selected from the dashboard ui



Codebase

Codebase Documentation: Dashboard Composable and Related Functions

Dashboard Composable

Overview

The Dashboard Composable function represents the main UI component for the dashboard screen. It displays a list of breath exercise tiles and a top app bar. It receives a BreathViewModel instance and a callback function for handling click events on the exercise tiles.

Parameters

  • breathViewModel: An instance of BreathViewModel that provides access to the breath exercise data and related operations.
  • onClick: A callback function that takes a String parameter representing the label of the clicked exercise tile.

Usage

To use the Dashboard Composable, simply call it from your UI code and pass the required parameters. For example:

Dashboard(breathViewModel = breathViewModel, onClick = { label ->
    // Handle click event here
})

Functionality

  1. The Composable function collects a list of exercise types using the exerciseTypes flow from the provided BreathViewModel.
  2. It launches an effect using LaunchedEffect to fetch the list of all exercises by calling getListOfAllExercises() on the breathViewModel.
  3. The UI is built using the Scaffold composable from the Jetpack Compose Material library.
  4. The top app bar is created using the TopAppBar composable and displays the title "BreathWell".
  5. The content area of the screen contains a Box composable that wraps the BreathExerciseList.
  6. The BreathExerciseList composable is responsible for rendering the list of breath exercise tiles.
  7. The BreathExerciseList receives the list of breath exercise types (types) and the onClick callback function.
  8. The list of breath exercises is displayed using LazyVerticalGrid, a composable that creates a grid layout with a fixed number of columns and lazily composes only the visible items for efficiency.
  9. Each item in the types list is mapped to a BreathTypeTile composable, which represents an individual breath exercise tile.
  10. The BreathTypeTile composable displays a card with an image and label for each exercise type.
  11. Clicking on a BreathTypeTile triggers the provided onClick callback function, passing the label of the clicked exercise tile.

BreathExerciseList Composable

Overview

The BreathExerciseList Composable is responsible for rendering the list of breath exercise tiles. It receives a list of Breath objects representing the exercise types and a callback function for handling click events on the exercise tiles.

Parameters

  • types: A list of Breath objects representing the breath exercise types.
  • onClick: A callback function that takes a String parameter representing the label of the clicked exercise tile.

Usage

The BreathExerciseList composable is used internally within the Dashboard composable and doesn't need to be called directly.

Functionality

  1. The LazyVerticalGrid composable is used to create a grid layout with a fixed number of columns.
  2. The list of exercise types (types) is iterated using the items composable function, which allows efficient composition of only the visible items.
  3. For each exercise type, a BreathTypeTile composable is rendered, passing the exercise's label, URL, and the onClick callback function.

BreathTypeTile Composable

Overview

The BreathTypeTile Composable represents an individual breath exercise tile. It displays a card with an image and a label for each exercise type. It also receives a callback function to handle click events on the tile.

Parameters

  • label: A String representing the label of the exercise type.
  • url: A String representing the URL of the image for the exercise type.
  • onClick: A callback function that takes a String parameter representing the label of the clicked exercise tile.

Usage

The BreathTypeTile composable is used internally within the BreathExerciseList composable and doesn't need to be called directly.

Functionality

  1. The Card composable is used to create a card-like container for the exercise tile.
  2. Clicking on the card triggers the provided onClick callback function, passing the label of the clicked exercise tile.
  3. The Box composable is used to create a container for the image and label.
  4. The AsyncImage composable is used to display the exercise image retrieved from the provided URL.
  5. The Text composable is used to display the label of the exercise type.

Timer

Codebase Documentation

ScheduleTimer Composable

Overview

The ScheduleTimer Composable represents the screen for scheduling a breath exercise timer. It displays a countdown timer for the selected exercise type. It receives a BreathViewModel instance, the exercise type, and a callback function for handling the back button press.

Parameters

  • breathViewModel: An instance of BreathViewModel that provides access to the breath exercise data and related operations.
  • type: A String representing the exercise type.
  • onBackPressed: A callback function to handle the back button press.

Usage

To use the ScheduleTimer Composable, call it from your UI code and pass the required parameters. For example:

ScheduleTimer(
    breathViewModel = breathViewModel,
    type = "ExerciseType",
    onBackPressed = {
        // Handle back button press
    }
)

Functionality

  1. The Composable function collects the breathExercise state from the provided BreathViewModel.
  2. It launches an effect using LaunchedEffect to fetch the exercise based on the provided type using getExerciseBasedOnType() on the breathViewModel.
  3. The UI is built using the Scaffold composable from the Jetpack Compose Material library.
  4. The top app bar is created using the TopAppBar composable and displays the exercise type as the title. It also includes a back button to handle the onBackPressed callback.
  5. The content area of the screen contains the Timer composable.

Timer Composable

Overview

The Timer Composable is responsible for rendering the countdown timer screen. It displays the background image and the countdown timer itself. It receives the breath object representing the exercise and a callback function to handle the back button press.

Parameters

  • modifier: A Modifier specifying the layout attributes of the Timer composable.
  • breath: A Breath object representing the breath exercise.
  • onBackPressed: A callback function to handle the back button press.

Usage

The Timer composable is used internally within the ScheduleTimer composable and doesn't need to be called directly.

Functionality

  1. The Box composable is used as a container to hold the timer screen content.
  2. If the breath object is null, the ErrorType composable is displayed, indicating that an appropriate type of breathing exercise could not be found.
  3. If the breath object is not null, the CountDownScheduler composable is displayed, showing the countdown timer for the exercise.

CountDownScheduler Composable

Overview

The CountDownScheduler Composable is responsible for rendering the countdown timer UI. It displays the background image, a circular dial representing the progress of the timer, and handles the timer expiration event. It receives the breath object representing the breath exercise and a callback function to handle the timer expiration.

Parameters

  • breath: A Breath object representing the breath exercise.
  • onBackPressed: A callback function to handle the back button press.

Usage

The CountDownScheduler composable is used internally within the Timer composable and doesn't need to be called directly.

Functionality

  1. The Box composable is used as a container to hold the countdown timer content.
  2. The background image is displayed using the AsyncImage composable.
  3. The CountDownTimer composable is used to display the circular dial representing the progress of the timer. It receives the actionList representing the actions for the breath exercise, the background color, progress color, border color, and the onTimerExpired callback function to handle the expiration of the timer.