compose-migrate-views-to-compose

Migrate View-system Screen to Compose

When to Use

When inheriting a legacy XML-based screen and converting it to Compose, or when an AI-generated codebase mixes View-system Activities with new Compose features.

Instructions

Apply per screen. Plan the migration screen-by-screen, not all at once.

Step 1: Inventory the screen

Identify:

• The Activity / Fragment + its XML layout.
• All findViewById references and what each view does.
• ViewModel (if any) and its state surface (LiveData / Flow / lateinit).
• Navigation entry points (which other screens navigate here, what arguments).

Step 2: Modernise the ViewModel

If the VM uses LiveData, convert to StateFlow:

// BEFORE
val users: LiveData<List<User>> = repo.observeUsers().asLiveData()

// AFTER
val users: StateFlow<List<User>> = repo.observeUsers()
    .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5_000), emptyList())

If the VM does not exist yet, create one with a sealed UiState.

Step 3: Create the Screen composable

Define the stateless Screen taking the UI state and event lambdas:

@Composable
fun UserListScreen(
    state: UserListUiState,
    onUserClicked: (User) -> Unit,
    onRefresh: () -> Unit,
) {
    when (state) {
        UserListUiState.Loading -> CircularProgressIndicator()
        is UserListUiState.Success -> LazyColumn {
            items(state.users, key = { it.id }) { user ->
                UserRow(user, onClick = { onUserClicked(user) })
            }
        }
        is UserListUiState.Error -> Text(state.message)
    }
}

Step 4: Create the Route composable

@Composable
fun UserListRoute(
    vm: UserListViewModel = hiltViewModel(),
    onUserClicked: (User) -> Unit,
) {
    val state by vm.state.collectAsStateWithLifecycle()
    UserListScreen(state, onUserClicked, onRefresh = vm::refresh)
}

Step 5: Replace setContentView with setContent

Make the Activity a ComponentActivity (not AppCompatActivity unless you genuinely need Material Components / AppCompat):