Software Design & Engineering

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:


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.

View Full Source