Android UI Toolkit is over 10 years old now! Over the years, it has received numerous updates regarding functionality, types of UI elements it provides, and optimizations. But because the UI team initially developed the toolkit, it also grew in complexity and the amount of code for even the simplest of components.
Finally, in 2020, a miracle happened: Jetpack Compose. The new UI toolkit was announced and started being thoughtfully developed by Google. Jetpack Compose is a new and fresh toolkit built-in Kotlin that offers a clean and declarative way to develop custom components and beautiful interfaces.
Create Project
Different from normal project initialization, instead of choosing Empty Activity. We choose Empty Compose Activity. Then select Next -> Finish.
By default, Android Studio initializes us with a project with a "Hello World" layout. We're going to erase all the components that look complicated to newbies and keep the parts that are easiest to understand
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting(name = "Android")
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
Composables
This is called Composables. You can break this code into two parts: First, it's a function, and second, that function has an annotation called @Composable.
You'll notice that you don't have to extend any class View or overwrite constructors or other functions. All you need to care about is writing a function and using this new fancy annotation.
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}In Compose, calling a function that displays something on the screen emits the UI. So, to emit your message, you need to call a Text function.
Text is also a composable function, and it's one of the default composable functions that make up Jetpack Compose. One thing to notice is that composable functions can only be invoked from other composable functions — if you try to remove @Composable, you'll get an error stopping you from using Text().
// Error
fun Greeting(name: String) {
Text(text = "Hello $name!")
}Displaying Composable
When it comes to displaying your composables, you still use activities or fragments as a starting point. To display the Greeting composable you just saw, you’d use method setContent. This is the difference between Jetpack Compose and The Original UI Toolkits when we use Composables instead of file XML. I will explain in the next post.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting(name = "Android")
}
}
}