Introduction to Jetpack Compose
Jetpack Compose is a declarative UI framework for building native Android apps. The framework lets us build out our UI using composable functions. These functions take in data and emit UI elements that are declared within it.
Create an app
- Download Android Studio
- Go to File -> New -> New Project
- Under the "Phone and Tablet" tab, click on "Empty Compose Activity". Then click on "Next"
- Name your app something
- Click on Finish
Wait until all the configuration and building are finished and now you're ready to run your app!
Running your app in an Emulator
- Go to Tools -> Device Manager
- Click on a phone and click on "Next"
- Click on the recommended System image (usually the first one) and click on "Next"
- Give your phone a name or use the default name and click on "Finish"
- Select your newly added device on the dropdown next to the "Run" arrow and click on "Run"
Composables
Composable are functions that take data and emit the UI elements declared within it.
@Composable
fun Greeting(name: String) {
Text(text = "Hello, $name!")
}
To make a function a composable (which means telling the Compose compiler that this function will take in data and emit UI elements), you add the @Composable
annotation.
Notice that this function doesn't return anything. Why? Because they don't actually create UI widgets-- they don't render anything. Rather, they describe how we want the screen to look.
To create different UI components, you nest your composables:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposePracticeTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting(name = "World")
}
}
}
}
}
Here, ComposePracticeTheme
, Surface
, and Greeting
are composables that we define in the app
There are a bunch of built-in composables we can use like Text
, Button
, Column
etc, that we can use while we are building our app.