/Jetpack-Compose-Tutorial

Jetpack Compose Tutorial - 4 lessons - Composable functions, Layouts, Material design, Lists and animations

Primary LanguageKotlin

Jetpack Compose Tutorial

Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

In this tutorial, you'll build a simple UI component with declarative functions. You won't be editing any XML layouts or using the Layout Editor. Instead, you will call Jetpack Compose functions to say what elements you want, and the Compose compiler will do the rest.

Lesson 1: Composable functions

Jetpack Compose is built around composable functions. These functions let you define your app's UI programmatically by describing how it should look and providing data dependencies, rather than focusing on the process of the UI's construction (initializing an element, attaching it to a parent, etc.). To create a composable function, just add the @Composable annotation to the function name.

Lesson 2: Layouts

UI elements are hierarchical, with elements contained in other elements. In Compose, you build a UI hierarchy by calling composable functions from other composable functions.

Lesson 3: Material design

Compose is built to support material design principles. Many of its UI elements implement material design out of the box. In this lesson, you'll style your app with material widgets.

Lesson 4: Lists and animations

Lists and animations are everywhere in apps. In this lesson, you will learn how Compose makes it easy to create lists and fun to add animations.

Here’s what you've learned so far:

Here’s what you've learned so far:

  • Defining composable functions
  • Adding different elements in your composable
  • Structuring your UI component using layout composables
  • Extending composables by using modifiers
  • Creating an efficient list
  • Keeping track of state and modifying it
  • Adding user interaction on a composable
  • Animating messages while expanding them