UI migration plan from Android View System to Jetpack compose

Detailed Jetpack Compose Migration Plan

This document outlines the granular steps for migrating the ViewToolkit-based project to Jetpack Compose.

The goal was to modernize the RHO Studio UI by eliminating all legacy XML layouts, Fragments, and View-based navigation.

1. Architecture Strategy: MVVM Preservation

• View Layer: Replaced 100% with Jetpack Compose.
• ViewModel Layer: Preserved as the "Single Source of Truth."
• State Management: Bridged LiveData to Compose using observeAsState() and introduced MutableState in ViewModels for direct UI reactivity.
• Logic Migration: Moved UI-specific logic (like 300ms input debouncing) from Fragments to ViewModels to ensure unit-testability.

2. Implementation Phases

Phase 1: Preparation and Environment Setup

Verify and Align Dependencie:
Although build.gradle.kts already has Compose enabled, we need to ensure all required libraries for the specific migration steps are present.

• Checklist:
  • compose = true in buildFeatures
  • androidx.compose.bom
  • androidx.activity.compose
  • androidx.lifecycle.viewmodel.compose (Verify availability)
  • androidx.compose.runtime.livedata (Needed for existing LiveData in ViewModels)

Phase 2: Atomic Component Migration (Auth & Home)

• Inputs: Create LoginEmailField and LoginPasswordField with custom OutlinedTextFieldDefaults colors.
• Actions: Create LoginButton with reactive loading states.
• Lists: Replace RecyclerView and ServiceAdapter with LazyVerticalGrid in ServiceList.kt.
• Globals: Make PageHeader and PageFooter as reusable Composables.

Phase 3: Screen & Activity Consolidation

• Screen Assembly: Built LoginScreen and HomeScreen to unify the components.
• Main Entry Point: Migrated MainActivity to ComponentActivity.
• Compose Navigation: Implemented a NavHost in MainActivity to handle routing based on SessionManager state, replacing nav_graph.xml.

Phase 4: XML Layouts clean up

• XML Deletion: Deleted all files in res/layout/ and res/navigation/.
• Fragment Deletion: Removed the entire Fragment hierarchy and BaseFragment.kt.
• Build Clean-Up: Disabled viewBinding and dataBinding in build.gradle.kts.

4. Security & Visual Enhancements

• Credential Safety: Implemented resetForm() in LoginViewModel using Compose state to ensure form clearing upon logout.
• Visual Identity: Synchronized the brand gradient background (RhoRed -> SilverGray -> Black) across all primary screens.
• Custom Borders: Applied specific Rho.studio colors.

5. Verification Plan

• Build Integrity: Project must build successfully with zero XML dependencies.
• Functional Check: Navigation between Login and Home must be triggered automatically by SessionManager state changes.
• UI Check: Verify 300ms debounce on inputs and 100% color accuracy on brand elements.