Jetpack Compose vs XML: Which Should You Learn?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/emailInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/email"
        android:inputType="textEmailAddress" />

    <Button
        android:id="@+id/signInButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:enabled="false"
        android:text="@string/sign_in" />

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:visibility="gone" />
</LinearLayout>

class LoginActivity : AppCompatActivity() {
    private lateinit var binding: ActivityLoginBinding
    private val viewModel: LoginViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLoginBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.emailInput.doAfterTextChanged { viewModel.onEmailChange(it.toString()) }
        binding.signInButton.setOnClickListener { viewModel.signIn() }

        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                viewModel.uiState.collect { state ->
                    // Every view must be updated manually for every state.
                    binding.signInButton.isEnabled = state.canSubmit
                    binding.progress.isVisible = state.isLoading
                    binding.emailInput.isEnabled = !state.isLoading
                }
            }
        }
    }
}

@Composable
fun LoginScreen(viewModel: LoginViewModel = viewModel()) {
    val state by viewModel.uiState.collectAsStateWithLifecycle()
    LoginContent(
        state = state,
        onEmailChange = viewModel::onEmailChange,
        onSignIn = viewModel::signIn,
    )
}

// Stateless and previewable: everything it shows comes from parameters.
@Composable
fun LoginContent(
    state: LoginUiState,
    onEmailChange: (String) -> Unit,
    onSignIn: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Column(modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = state.email,
            onValueChange = onEmailChange,
            label = { Text(stringResource(R.string.email)) },
            enabled = !state.isLoading,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
            modifier = Modifier.fillMaxWidth(),
        )
        Button(
            onClick = onSignIn,
            enabled = state.canSubmit,
            modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
        ) { Text(stringResource(R.string.sign_in)) }

        if (state.isLoading) {
            CircularProgressIndicator(Modifier.align(Alignment.CenterHorizontally).padding(top = 16.dp))
        }
    }
}

@Preview(showBackground = true)
@Composable
private fun LoginPreview() {
    LoginContent(LoginUiState(email = "dev@example.com", canSubmit = true), {}, {})
}

data class LoginUiState(
    val email: String = "",
    val canSubmit: Boolean = false,
    val isLoading: Boolean = false,
)

class LoginViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(LoginUiState())
    val uiState: StateFlow<LoginUiState> = _uiState.asStateFlow()

    fun onEmailChange(email: String) = _uiState.update {
        it.copy(email = email, canSubmit = Patterns.EMAIL_ADDRESS.matcher(email).matches())
    }

    fun signIn() {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true) }
            delay(1_500) // stand-in for a real authentication call
            _uiState.update { it.copy(isLoading = false) }
        }
    }
}

// ❌ Reads scroll state on every frame at the top of the screen → whole screen recomposes while scrolling.
val showButton = listState.firstVisibleItemIndex > 0

// ✅ derivedStateOf only notifies readers when the boolean result actually changes.
val showButton by remember { derivedStateOf { listState.firstVisibleItemIndex > 0 } }

class ProfileFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View =
        ComposeView(requireContext()).apply {
            // Dispose the composition when the Fragment's view is destroyed.
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent { MaterialTheme { ProfileScreen() } }
        }
}

@Composable
fun LegacyChart(points: List<Float>, modifier: Modifier = Modifier) {
    AndroidView(
        factory = { context -> LineChartView(context) },   // created once
        update = { view -> view.setPoints(points) },         // called when points change
        modifier = modifier,
    )
}