Understanding Compose code

In Jetpack Compose, each component that needs to be rendered on the screen can be defined as a Kotlin Unit function marked with the @Composable annotation like this:

@Composable
fun Article(title: String, description: String) {
    Card {
        Column {
            Text(title)
            Spacer(Modifier.height(10.dp))
            Text(description)
        }
    }
}

We call those functions composables. The above composable will render a Card with a title and a subtitle, with a spacing of 10 dp in between.

Every time the title and description change, the UI will be updated to reflect the updated values. This is what we call recomposition.

You may only call composable functions from other composable functions. Because of this, activities that use Composable to render their layouts will look like this:

class MyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // use your composables here
        }
    }
}

setContent {} is an extension function of the ComponentActivity. ComponentActivity is part of the androidx.activity:activity-compose dependency. Using composables in a Fragment needs a ComposeView like so:

class MyFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater?,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // use your composables here
            }
        }
    }
}

In the View world, there are some common attributes and features found in most Views out there. Things like setting click and touch listeners, applying elevation, alpha, to name a few. For anyone creating their own custom views, there was a lot of boilerplate code to implement for your view to support such operations.

Compose introduces the concept of Modifiers. Modifiers provide functionality and features to composables without being tied to specific composables. Some Modifiers can be used for styling the composable (see background(), border() , clip() , shadow(), alpha(), animateContentSize()), others help with the placement and sizing of the composable (see fillMaxWidth() , size(), heightIn(), padding()) and others can bring functionality to the composable such as enabling click behavior or dragging (see clickable() , draggable(), toggleable(), swipeable()).

It is considered a good practice to always provide a Modifier when creating your own composable. This will allow callers of your composable to provide custom styling and specify any layout requirements they might have independently of the composable's code.

That was the basic knowledge you need, in order to understand Compose code you see in the wild. There are a few concepts that are new to Compose. Those new concepts will be explained in later parts of this book.