What is compose and Why we should use it?

Compose is a UI toolkit for android that follows a declarative pattern to build and manage UIs. When you’ve got complex layouts, handling all the widgets in the layout can be tricky sometimes, and that’s what Compose allows you to solve on top of simplifying the UI development process. While working with XML layouts, you have a hierarchy of views, and each time you want to update or initialize a view by using findViewById(), the app needs to traverse through the hierarchy, which is expensive. In complex layouts, when there’s a state change, you’ve to manually write the code to make sure that you update the related widgets when the state of the app changes. Using compose, you don’t have to worry about manually going through the code to ensure that you’re updating your views because Compose handles it for you. Besides, when there is a change in the app’s state, compose only regenerates the composables that rely on the state rather than regenerating the whole screen. This process is called Recomposition, and Composables are the functions you create to include your UI parts.

Before we start using Compose, you’d need the latest canary version of Android Studio. Once you install it, create a new project and select Empty Compose activity. Android Studio will automatically generate all the necessary files and dependencies for you to start developing with Compose. I got the idea of the design from here

Themes and Colors

By default, compose includes Material theme and components making it easier for you to use material components and design a theme for your application with colors, typography, and shape. The first thing that we will do is define colors that we’re going to use in the app. For the app that we’re going to design, we’ll only need the yellow color, and we’re going to define it in Color.kt, which is where you’ll define all the colors you want to use in the app. Color in Compose only accepts a parameter of type RGB, ARGB, ColorSpace, and colorInt when defining colors. So, we’ll parse the hex string color to colorInt and get the yellow color.

val yellow = Color(android.graphics.Color.parseColor("#FFE301"))

It is in Theme.kt file where you define all the themes for your app. We’ll only look into the LightColorPalette for now to add the yellow background for the app. LightColorPalette includes colors that the app will use when the system is not in dark theme. In the LightColorPalette, we’ll use the color yellow for the surface, and since we want the color contents on the surface to be black, we’ll define onSurface color to be black.

private val LightColorPalette = lightColors(
        primary = purple500,
        primaryVariant = purple700,
        secondary = teal200,
        surface = yellow,
        onSurface = Color.Black
)

Building the UI

Now to build the UI, we’ll define a composable function called AppUI, which will hold all the app contents. We annotate composable functions with @Composable, and only composable functions can call other composable functions. Also notice that we declare composable functions outside of the activity class. AppUI accepts lambda as a parameter, a composable content that we want in the upper half of the screen. Since the composable functions don’t return anything, the type of the parameter is @Composable () -> Unit. If you look into the first line of code in the AppUI, you can see that we are calling Y_DesenharPortugalTheme, a theme that’s automatically generated for us and implements MaterialTheme, and you can see it in Theme.kt file. Depending on the name of the app, the name of the theme will be different.

@Composable
fun AppUI(
    upperHalfContent: @Composable () -> Unit,
) {
    Y_DesenharPortugalTheme {
        Surface(
            color = MaterialTheme.colors.surface,
            contentColor = contentColorFor(color = MaterialTheme.colors.surface),
        ) {
            Column (
                modifier = Modifier.fillMaxSize()
            ) {
                Column (
                    modifier = Modifier.weight(1f)
                ) {
                    upperHalfContent()
                }
                BottomHalf()
            }

        }
    }
}

#android #jetpack-compose #mobile-apps #programming #developer