- Composable Functions
- A regular function annotated with
@Composable
- Can call other
@Composable
functions within it.
- Preview Composable Functions
-
Used to preview the UI in Android Studio
-
Can mark any
parameterless
Composable Functions (or) Composable Functions withdefault parameters
@Preview(showBackground = true, name= "DefaultTextPreview") @Composable fun DefaultText(text: String= "Default Text"){ Text(text) }
- androidx.compose.* contains compiler and runtime classes
- androidx.ui.* contains UI toolkit and libraries
- Composable functions can only be called from within the scope of other composable functions.
Think of
@Composable
functions as a language feature rather than being a part of compose toolkit.
- Composable functions has the ability to
re-compose
. - Composable functions have a
lifecycle
. - Composable functions can be
re-invoked
.
Since they have a
lifecycle
and can bere-invoked
, they have memory
Modifiers allow us to decorate a composable.
- The possible decorationsa are
- Change Composaable's behaviour
- Change it's appearence
- Add informations like accesibility labels
- Process User Input
- High-Level interactions like making something clickable , scrollable, draggable , zoomable.
- We can chain Modifiers
- Modifiers are applied in the order in which we chain them.
By convention, the modifier is specified as the first optional parameter of a function.
This enables you to specify a modifier on a composable without having to name all parameters.
-
The
compose-compiler
andkotlin
versions are incompatible -
You don't have an
@Preview
annotated @Composable in the corresponding Source File -
Android Studio is not compatible with a particular version of
androidx.compose.ui:ui-tooling
.val compose_version = '1.0.0-rc02' implementation("androidx.compose.ui:ui-tooling:$compose_version") { version { // TODO: Remove this when Android Studio has become compatible again // Android Studio Bumblebee | 2021.1.1 Canary 3 is not compatible with module ui-tooling 1.0.0-rc01 or higher. // The Run Configuration for Composable Previews that Android Studio makes expects a PreviewActivity class // in the `androidx.compose.ui.tooling.preview` package, but it was moved in 1.0.0-rc01, and thus causes error: // "androidx.compose.ui.tooling.preview.PreviewActivity is not an Activity subclass or alias". // For more, see: https://stackoverflow.com/questions/68224361/jetpack-compose-cant-preview-after-updating-to-1-0-0-rc01 strictly("1.0.0-beta09") } }
Observe Changes in App Data and automatically re-call the impacted Compose Functions.
@Composable
fun StateDemoCounter() {
val counter = remember { mutableStateOf(0) }
Button(onClick = { counter.value++ }) {
Text("${counter.value}")
}
}
@Composable
fun StateDemoCounter1() {
val (counter, setCounter) = remember { mutableStateOf(0) }
Button(onClick = { setCounter(counter + 1) }) {
Text("$counter")
}
}
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
@Composable
fun StateDemoCounter2() {
var counter by remember { mutableStateOf(0) }
Button(onClick = { counter++; }) {
Text("$counter")
}
}
mutableStateOf
gives a Composable mutable memory. When this mutable memory is changed, re-composition happens.remember
only invokes the passed lambda during composition and returns the same value during every re-composition.
CompositionLocalProvider
provides a Composition local to the sub-tree.compositionLocalOf
creates a Composition local.LocalContentColor
gives you the preferred color for content such as Icons and Typography.
It is changed by composables such as Surface that draw a background.
A pattern compose uses to bring a layer of customization of top of Composables
.
Slots leave an empty space in the UI for the developer to fill as they wish.
Button(
onClick = {},
modifier = Modifier.align(Alignment.CenterHorizontally)
) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = null,
modifier = Modifier.size(25.dp)
)
Spacer(Modifier.size(4.dp))
Column {
Text("Button")
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
Text("subtitle", style = MaterialTheme.typography.caption)
}
}
}
- Top App Bar
Slot
TopAppBar( title = { Text(text = "Page title", maxLines = 2) }, navigationIcon = { Icon(myNavIcon) } )
Slot Filled
Android Studio Version | Gradle Version | Android Build tools - Gradle PLugin | Kotlin Gradle Plugin | JDK Version | Compose Version |
---|---|---|---|---|---|
Android Studio Artic Fox - 2020.3.1 |
gradle-6.8.2 -bin.zip |
com.android.tools.build:gradle:7.0.0-alpha09 |
org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.30 |
jdk-11.0.10 |
1.0.0-beta01 |
Android Studio Artic Fox - 2020.3.1 |
gradle-7.0.2 -bin.zip |
com.android.tools.build:gradle:7.0.0 |
org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10 |
jdk-11.0.10 |
1.0.0 (First Stable Release) |
- Jetpack Compose - Pathway
- Jetpack Compose - Setup
- Jetpack Compose - Library Structure
- Jetpack Compose - Github Repo
- Jetpack Compose - Basics
- Jetpack Compose - State
- Jetpack Compose - Samples
- Google Codelabs - Github
- Jetpack Compose App - Collection Most Popular Tools & Demos
- Jetpack Compose Official Docs
- Simple Android Animation
- Expandable Lists in Jetpack Compose
- Creating a Repeating Button
- InteractionSource, Ripple and Stuff
- Shopping Cart - Bubble Shape