android14-6.1, android15-6.6, android16-6.12,
android17-6.18), vendor code lives in loadable modules with a stable interface (KMI)
A composable function always has the annotation @Composable. Within the function the basic building blocks are
declared and describe the UI. It might contain several UI elements.
@Composable
fun MovieItem(movie: Movie, onMovieClick: (Movie) -> Unit) {
Image(
painter = painterResource(R.drawable.ic_movie_placeholder),
contentDescription = null
)
Text(text = movie.title)
Text(text = movie.year)
}
Without a layout the three elements are drawn on top of each other. In most cases you can just use the standard
layout elements Box, Row or Column to place the items on the screen:
@Composable
fun MovieItem(movie: Movie, onMovieClick: (Movie) -> Unit) {
Row {
Image(
painter = painterResource(R.drawable.ic_movie_placeholder),
contentDescription = null
)
Text(text = movie.title)
Text(text = movie.year)
}
}
Note: the screenshots show the real poster loaded from the web with the Coil library, which is introduced in lecture
12. Until then we use a drawable from res/drawable as placeholder.
There are also parameters to align the elements accordingly:
@Composable
fun MovieItem(movie: Movie, onMovieClick: (Movie) -> Unit) {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(R.drawable.ic_movie_placeholder),
contentDescription = null
)
Text(text = movie.title)
Text(text = movie.year)
}
}
You can also nest layouts like you need them:
@Composable
fun MovieItem(movie: Movie, onMovieClick: (Movie) -> Unit) {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(R.drawable.ic_movie_placeholder),
contentDescription = null
)
Column {
Text(text = movie.title)
Text(text = movie.year)
}
}
}
A special parameter is the Modifier. It changes size, layout and behaviour of an element and adds information such
as accessibility labels or test tags. It also makes elements clickable, which finally uses the onMovieClick parameter:
@Composable
fun MovieItem(movie: Movie, onMovieClick: (Movie) -> Unit) {
Row(
modifier = Modifier
.fillMaxWidth()
.testTag("movieItem") // the UI test finds the item by this tag
.clickable { onMovieClick(movie) } // whole row reacts to taps
.padding(8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(R.drawable.ic_movie_placeholder),
contentDescription = null,
modifier = Modifier.width(80.dp).padding(8.dp)
)
Column {
Text(text = movie.title, fontSize = 20.sp)
Text(text = movie.year)
}
}
}
.clickable { }.padding(8.dp) makes the padding part of the touch area, .padding(8.dp).clickable { } does notfillMaxWidth(), width(), height(), padding(), background(), clickable(), testTag(),
weight() (inside Row/Column) are the ones you will use mostmodifier: Modifier = Modifier as first optional parameter and passes it to its
root element, so the caller can position it. See Compose modifiers
Sizes of UI components should be defined in Density Independent Pixels (dp) in order to always get the best results.
More information here.
res/layout/, inflated into a tree of View objects
(setContentView(R.layout.activity_main)), accessed with findViewById() or View BindingViewGroups) you will meet in existing apps and in old tutorials:LinearLayout: children in one row or column, layout_weight distributes spaceRelativeLayout: children positioned relative to each other or the parentFrameLayout: children stacked on top of each otherConstraintLayout (AndroidX): flat hierarchy, children positioned by constraints, built with the Layout EditorRecyclerView: the list component, replaced by LazyColumn (lecture 7)Column/Row (LinearLayout), Box (FrameLayout), ConstraintLayout also exists
for ComposeAndroidView { } embeds a View in Compose, ComposeView embeds Compose in XML
(see Interoperability APIs)
.class files.class files (and those of all libraries) into .dex files; in release builds R8 additionally
shrinks, obfuscates and optimizes the code (isMinifyEnabled = true)aapt2 compiles the resources, generates the R class and the binary AndroidManifest.xml.aab for the Play Store)adb install copies it to the device, ART compiles it on installation and while it runs
