Narrative & Reflection
CS 360 Version
The original application with a monolithic structure and rigid UI design.
Original Capabilities
- Monolithic design
- Tightly coupled UI & Database
- Hardcoded colors and strings
- Fixed, non-responsive layout
CS 499 Enhanced Version
The enhanced application featuring MVVM architecture and responsive design.
Enhanced Capabilities
- MVVM Architecture Pattern
- Responsive Tablet Layouts
- Centralized Dynamic Theming
- Separation of Concerns
- Lifecycle-Aware Components
Reflection on the Process
Learning & Challenges: The biggest challenge was untangling the tight coupling in the original code. I employed iterative testing techniques by isolating the business logic in the ViewModel, which allowed me to verify functionality without launching the full Android UI. Adopting the industry-standard MVVM architecture involved trade-offs; while it increased the initial file count, it significantly reduced the "God Class" complexity, making the system modular and easier to maintain for future developers.
Course Outcomes Met:
- Outcome 3: Designing a computing solution using the MVVM architecture to solve the problem of UI state loss, carefully managing the trade-offs between code complexity and maintainability.
- Outcome 4: Demonstrating the use of well-founded techniques, such as the Repository pattern and dynamic theming, to implement a solution that delivers value through enhanced usability and adaptability.
Better App Structure
The Problem: The original code was messy. The code that controlled the screen was mixed directly with the code that saved data. This meant that if you rotated your phone, you might lose what you were typing, and it was very hard to fix bugs.
The Solution: I reorganized the app using a standard pattern called MVVM. Now, a separate "ViewModel" holds the data. If the screen rotates, the data stays safe because it isn't stuck to the screen layout anymore.
// From Original IIM App/app/src/main/java/com/example/cs360finalproject/AddItemActivity.java
dbHelper = new DatabaseHelper(this); // Initialize DatabaseHelper once
// ...
success = dbHelper.addItem(itemName, itemQuantity, requiredInventory);
// From CS360FinalProject/app/src/main/java/com/example/cs360finalproject/AddItemActivity.java
inventoryViewModel = new ViewModelProvider(this).get(InventoryViewModel.class);
// ...
success = inventoryViewModel.addItem(itemName, itemQuantity, requiredInventory);
To improve the application's usability across different devices, I implemented a responsive design fix in AddItemActivity.java.
Originally, input fields would stretch uncomfortably wide on tablet screens. I introduced a programmatic check for screen width
to constrain these views, ensuring a polished look on both phones and tablets.
Responsive Layout Logic
// AddItemActivity.java
// Fix for tablet layout: restrict width of input fields and buttons
if (getResources().getConfiguration().screenWidthDp >= 600) {
int widthPixels = (int) (400 * getResources().getDisplayMetrics().density);
adjustViewWidth(itemNameEditText, widthPixels);
adjustViewWidth(itemQuantityEditText, widthPixels);
adjustViewWidth(requiredItemQuantityEditText, widthPixels);
adjustViewWidth(saveItemButton, widthPixels);
adjustViewWidth(goBackButton, widthPixels);
adjustViewWidth(deleteItemButton, widthPixels);
}
/**
* Helper method to adjust view width and center it for tablets.
*/
private void adjustViewWidth(View view, int width) {
ViewGroup.LayoutParams params = view.getLayoutParams();
if (params != null) {
params.width = width;
if (params instanceof android.widget.LinearLayout.LayoutParams) {
((android.widget.LinearLayout.LayoutParams) params).gravity = android.view.Gravity.CENTER_HORIZONTAL;
}
else if (params instanceof android.widget.FrameLayout.LayoutParams) {
((android.widget.FrameLayout.LayoutParams) params).gravity = android.view.Gravity.CENTER_HORIZONTAL;
}
else if (params instanceof ConstraintLayout.LayoutParams) {
ConstraintLayout.LayoutParams constraintParams = (ConstraintLayout.LayoutParams) params;
constraintParams.startToStart = ConstraintLayout.LayoutParams.PARENT_ID;
constraintParams.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID;
}
view.setLayoutParams(params);
}
}
UI Improvements & Themes
I created a tool called ThemeUtils to handle colors. Instead of hard-coding colors into every file, I can now change the look of the entire app in one place.
I also added an Orders Page that automatically finds items that are running low, so the user doesn't have to search for them manually.