Commonly used Design patterns in Jetpack compose based Android apps

Kotlin has become increasingly popular in the Android development community, and in 2019, Google introduced Jetpack Compose, a modern UI toolkit that simplifies the process of building native Android apps with Kotlin. With Jetpack Compose, developers can create custom UI components using declarative programming techniques.

In this article, we will discuss common design patterns used in Kotlin with Jetpack Compose in Android apps, along with code samples.

1. Model-View-ViewModel (MVVM) pattern

The MVVM pattern is widely used in Kotlin with Jetpack Compose as it separates the UI logic from the business logic of the app. In this pattern, the View observes the changes in the ViewModel, which is responsible for the business logic. The ViewModel, in turn, observes the changes in the Model, which is responsible for storing the data.

// Model
data class User(val name: String, val age: Int)

// ViewModel
class UserViewModel : ViewModel() {
    private val _user = MutableLiveData<User>()
    val user: LiveData<User> = _user

    fun updateUser(name: String, age: Int) {
        _user.value = User(name, age)
    }
}

// View
@Composable
fun UserScreen(userViewModel: UserViewModel) {
    val user by userViewModel.user.observeAsState()
    Column {
        // Display user details
        user?.let { user ->
            Text("Name: ${user.name}")
            Text("Age: ${user.age}")
        }
        // Update user details
        Button(onClick = { userViewModel.updateUser("John", 30) }) {
            Text("Update User")
        }
    }
}

2. Single-activity architecture

With Jetpack Compose, developers can create single-activity architectures where the app has only one activity and multiple fragments. This helps reduce the number of context switches in the app and makes it easier to manage the state of the app.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyTheme {
                MyApp()
            }
        }
    }
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("detail/{id}") { backStackEntry ->
            val id = backStackEntry.arguments?.getString("id")
            DetailScreen(id)
        }
    }
}

3. Navigation component

The Navigation component is another popular design pattern used in Kotlin with Jetpack Compose. It provides a standardized way of navigating between screens in the app. With the Navigation component, developers can define a graph of destinations and the actions that connect them. This makes it easy to handle back navigation and deep linking in the app.

@Composable
fun HomeScreen(navController: NavHostController) {
    Column {
        Text("Home Screen")
        Button(onClick = { navController.navigate("detail/1") }) {
            Text("Go to Detail Screen")
        }
    }
}

@Composable
fun DetailScreen(id: String?) {
    Text("Detail Screen: $id")
}

4. State hoisting

State hoisting is a design pattern used to manage the state of the app in Jetpack Compose. In this pattern, the state is lifted up to the parent component, making it easier to manage the state of the app. State hoisting helps to avoid the need for passing callbacks or interfaces to the child components.

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    Counter(count, { count++ })
}

@Composable
fun Counter(count: Int, onClick: () -> Unit) {
    Column {
        Text("Count: $count")
        Button(onClick = onClick) {
            Text("Increment")
        }
    }
}

In the above example, the CounterScreen component manages the state of the count variable. The Counter component is a child component that displays the value of count and provides a button to increment the value. The onClick callback is passed as a parameter to the Counter component, and it updates the count variable in the CounterScreen component.

Conclusion

In this article, we discussed common design patterns used in Kotlin with Jetpack Compose in Android apps, along with code samples. Jetpack Compose provides a modern way of building native Android apps using Kotlin, and these design patterns can help developers build scalable and maintainable apps.