Jetpack Compose

In the last 2 articles related to Jetpack compose we learnt about what Compose is, how to set it up for an existing app and the look and feel of composables with simple example.

In this article, we will learn about the features available in Compose to start off with our UI.

Layouts:

Compose provides Row, Column and Box layouts to arrange the elements horizontally, vertically and on top of one another respectively.

Arrangement and Alignment properties are used in the layouts as shown below to precisely place the child elements inside the layouts.

Note : To set child elements position within a Row, set the horizontalArrangement and verticalAlignment properties. For a Column, set the verticalArrangement and horizontalAlignment properties.

@Composable
fun layoutsInCompose(modifier: Modifier= Modifier){
  Column(
      modifier = Modifier.fillMaxSize(),
      verticalArrangement = Arrangement.Center,
      horizontalAlignment = Alignment.CenterHorizontally

  ){
      Text(text = "Welcome to Jetpack Compose")
      Text(text="Have fun composing")
  }
}

In the above code, if you notice arrangement and alignments are applied at the layout level and both the Text elements are inheriting that property. If in case, we want to set different alignment to one or more of the child elements, we can use align modifier at the child level as shown below.

Lazy Lists And Grids:

If our app needs to display large set of items in scrollable manner, then using simple column, row or box would cause performance issue. This is because all the items are composed and laid out even if they are not appearing on the screen. For such cases we can make use of Lazy lists and grids.

Note - Lazy lists and grids work on the same principle as that of RecyclerViews.

LazyColumn - It produces vertically scrollable lists by composing and laying out only the items which are currently visible on the screen.

LazyRow - It produces horizontally scrollable lists by composing and laying out only the items which are currently visible on the screen.

LazyListScope - It provides functions for describing items in the layout like item(), items(Int),itemsIndexed().

LazyVerticalGrid - It provides support for displaying items in a grid which are spanned across multiple columns and can be scrolled vertically.

LazyHorizontalGrid - It provides support for displaying items in a grid which are spanned across multiple rows and can be scrolled horizontally.

LazyVerticalStaggeredGrid - It is similar to that of LazyVerticalGrid but here we can display items of different widths or heights.

LazyHorizontalStaggeredGrid - It is similar to that of LazyHorizontalGrid but here we can display items of different widths or heights.

More details and examples can be found at compose documentation on Lists and Grids .

Modifiers :

As the name suggests modifiers are used to modify the appearance, layout behaviour and size of the UI elements. It also provides support for adding information to your elements and process user inputs.

For the available list of modifiers check the documentation here.

Note - As a best practice your function should have modifier parameter with empty Modifier assigned to it. And this has to be passed to the first composable which is called inside the function.

Find below an example of how to use modifiers in the compose code. For more details on available modifiers and best practices please refer the modifier documentation.

@Composable
fun WelcomeScreen(onContinueClicked: ()->Unit,
                     modifier : Modifier = Modifier){


    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Text("Welcome to the BasicsCodeLab!")
        Button(modifier= Modifier.padding(vertical = 24.dp),
            onClick = onContinueClicked
        ){
            Text("Continue")
        }
    }
}

Modifier Scope safety

Compose also provides scope safety for modifiers. Meaning, there are modifiers which can only be used inside certain composables. For example matchParentsize modifier can only be used inside BoxScope.

Conclusion:

Layouts and modifiers are the core UI components of Compose. While Layouts act as containers to hold the UI elements, Modifiers help to augment a composable. Modifier scope safety avoids trial and error method by not allowing the modifiers which wouldn't work under certain scopes. This makes Compose faster and saves lot of time during development unlike in the android view system approach.

Jetpack Compose- Part3

Table of contents

Layouts:

Lazy Lists And Grids:

Modifiers :

Conclusion: