Build a Note App with Jetpack Compose & MVVM architecture: Project Setup & Overview (Part 1 of Series)
Note-taking apps have become an integral part of our daily lives, both for personal and professional purposes. The increasing demand for such applications has led to a need for developers to create apps that not only provide a seamless user experience but also ensure scalability and maintainability. That’s why, in this guide, we will build a well-architected note-taking app using Jetpack Compose, MVVM architecture, and the MAD guide, which follows the latest trends in Android development.
Our guide is designed to take you through the entire process of building a note-taking app using the MAD approach. We’ll start with the basics in Part 1 of our series, including setting up your project and creating the necessary files and directories. We’ll also explain the various components of the MAD architecture, including Model-View-ViewModel, Android Jetpack, and Data Binding.
By the end of this article, you’ll have a clear understanding of what to expect from the upcoming parts of the series.
Tutorial Series
Part 2: List of Notes
What is MAD?
MAD is an acronym for Modern Android Architecture. It is a set of guidelines provided by Google for building Android applications using the latest recommendations and best practices. The main objective of following these guidelines is to create a more stable and robust application that is less prone to crashes and bugs. In addition, MAD aims to improve the overall productivity of developers by reducing the amount of code that needs to be written and maintained. This not only saves time but also helps to create a more efficient codebase.
To fully comply with the MAD guidelines, developers need to follow several key steps, which include (you can read the complete guide here MAD by Android).
At the end of the day, you can focus on your business and the user experience instead of dealing with messy and complex code
Prerequisites
- Android Studio (Newest if Possible)
- Google Docs / Book if you need to scribble something
- Installed Git (Optional)
- At least 8 GB ram laptop with fast CPU (more is better) because mobile development needs high-end hardware
Project Architecture
The project architecture follows the MVVM (Model View ViewModel) pattern, effectively separating the business logic. In this pattern, the ViewModel handles the business logic, while the View consumes the results through function calls or LiveData, which are updated whenever there is a change.
The view in this project is implemented using Compose functions. These functions are organized in separate folders and treated as individual pages, each associated with a ViewModel. Within the ViewModel, functions are implemented to invoke core business logic from the repository. The repository, in turn, incorporates versatile functions responsible for fetching and modifying data, whether from local storage or remote APIs like the Google Drive API and others.
To provide a more comprehensive understanding of the project architecture, please refer to the accompanying diagram below.
In the project, every service, repository, and ViewModel is utilized within a single abstraction layer by creating their respective instances. For example, when using the repository, it is necessary to create an instance of the Room Service. However, manually creating these instances can lead to boilerplate code in a centralized location, such as within an activity, resulting in longer and less readable code.
To address this issue and enable reusability without the need for repeated instantiation, the singleton pattern can be employed. By utilizing the singleton pattern, instances are created only once and can be shared throughout the application. This approach not only reduces boilerplate code but also facilitates easier testing, as the code can be instantiated in the same manner as in the production environment. This concept is inspired by the Dagger website’s recommendations.
Hilt emerges as a solution to these challenges. With Hilt, developers can annotate the classes that need to be injected into other classes, a technique known as dependency injection. Upon rebuilding the project, Hilt automatically generates the necessary instantiation code, freeing developers from the manual instantiation process.
By leveraging Hilt, developers can improve code readability, reduce boilerplate, and enhance testability. Hilt’s dependency injection approach automates the instantiation process, allowing developers to focus on the core functionality of their application rather than dealing with manual instantiation code. For more information about the hilt, you can read here. I will elaborate more in the next article.
By leveraging Hilt, you can enhance code maintainability, reduce boilerplate, and improve the testability of your project. Hilt’s dependency injection approach automates the instantiation process, simplifying development and allowing you to focus on building the core functionality of your application.
Project Setup
To create a new empty initial project as a Compose activity, follow the steps below.
Define the application name, project location, package name (must be unique), and minimum Android version.
There will be an activity called MainActivity with minimum composable function like the following.
To use Compose in an existing Android project, you simply need to add the Compose dependency to it.
Compose Tooling
When developing a page or component, an essential step is to observe how it is displayed on a mobile device. Jetpack Compose provides a fantastic tool called Compose Preview. With Compose Preview, you can preview the entire page or specific parts of it in real time. What makes it even more powerful is the ability to use dummy data to populate the UI for previewing when data is required. Here is a screenshot showcasing this feature.
For a comprehensive guide on how to use Compose Preview, please refer to my previous article linked below.
There are multiple tools available for Compose, such as Relay, Recomposition Tracing, Animation Preview, and many more.
The Note App Main Features
- Displaying the list of notes
The app displays a list of notes that the user has previously added. If there are no notes, the page will appear blank. Additionally, on this page, users have the ability to filter the notes based on their titles. Another notable feature is the ability for users to select multiple notes and delete them accordingly.
- Create a new note
The user has the ability to add a new note by providing a title and content for the note. This feature allows users to create personalized notes with specific titles and corresponding content.
- View the note details, share the note, and edit an existing note
After the user selects a note, the application will display the complete details of the selected note, including the title and description. On this page, the user has the option to either edit the note or share it with multiple applications. If the user chooses to edit the note, the text field becomes editable, allowing the user to modify the content or title as desired.
Alternatively, if the user selects the option to share the note, a bottom sheet will appear, presenting a list of available applications to choose from for sharing.
- Backup your note in Google Drive
This feature will be elaborate on outside this series (separate article). The user could back up and sync their database in google drive.
Last Words
Stay tuned for the next article, which will be available soon. As a developer, patience, hard work, and attention to detail are essential qualities that can help you improve your skills and become a better developer.
If you are interested in the source code for the project, you can find it in my repository. I would greatly appreciate it if you could show your support by giving it a star.
Thanks for reading this article. Don’t forget to clap👏/recommend as much as you can and also share 📤 with your friends. It means a lot to me.
Also, Let’s become friends on Linkedin or Instagram. See you in the next article!
