Jetpack Compose Tutorials

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Audience

This tutorial has been prepared for the beginners to help them understand the basics of Jetpack compose. After completing this tutorial, you would understand the basics of Jetpack compose and will be able to build a simple android app using it.

Prerequisites

In this tutorial, I strongly recommend that you gain some basic knowledge of Kotlin programming language before proceeding with Jetpack compose.

Table of Content

• Overview
• Environment set up
• Hello World example
• UI Layouts
• mini project
• UI Controls
• mini project
• State Management
• mini project
• Navigation
• mini project
• Styles and Theme
• Material Design Components
• mini project
• Android Useful Examples
• Local Database
• Internationalization
• Accessing Rest API
• Animation
• Testing
• Jetpack Compose Mini Project

Note: as at the time of writing this tutorial jetpack compose version is alpha-06, I will always make changes to this document to be updated

Overview:

What is Jetpack Compose?

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Why Jetpack Compose?

* Concise and Idiomatic Kotlin

— Built with the benefits that Kotlin brings

* Declarative

— Fully declarative for defining UI components

* Compatible

— Compatible with existing views

* Enable Beautiful Apps

— Designed with Material Design

* 100% Kotlin

– written in Kotlin programming language

* Accelerate Development

— writing less code and using tools

* One codebase

• No need to write XML anymore.

* Less code

• Do more with less code and avoid entire classes of bugs, so code is simple and easy to maintain.

* Accelerate Development

• Compatible with all your existing code so you can adopt when and where you want. Iterate fast with live previews and full Android Studio support.

Jetpack Compose is currently in Developer Preview. The API surface is not yet finalized, and should not be used in production apps.

Environment Set-Up:

For the best experience developing with Jetpack Compose, you should download the latest canary version of Android Studio Preview.

Hello World example

Create A Compose Application

Click on “Create New Project”

you will click o the “Empty Compose Activity”

In this section, you give your compose project a name, package name, save location, language(default is Kotlin) and Minimum SDK. then you click the “Finish” button

your Hello World Compose project has been created now run your app, you will see the image below

Compose Hello World app

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

This is how easy and simple it is to create a compose projet in Android studio, in the next section you will learn about Compose UI Layouts.

UI Layouts

A layout defines the visual structure for a user interface, such as the UI for an activity or app widget.

Compose Layouts

This section will focus more on creating a UI based on compose layout.

A layout may contain any type of widgets such as Fabs, buttons, , Textfield,Text etc.

Jetpack Commpose Layout types:

Column: A Column will show each child below the previous children. It’s similar to a LinearLayout with vertical orientation.

Row: A Row will show each child next to the previous children. It’s similar to a LinearLayout with a horizontal orientation.

Constraint layout: A ConstraintLayout in Compose is similar to a ConstraintLayout from the classic Android View System

A ConstraintLayout requires a ConstraintSet as a parameter. In the ConstraintSet all constraints of the layout have to be declared. children will set the children of the layout

Box: The children of the Box layout will be stacked over each other. You can use the gravity modifier to specify where the composable should be drawn.

Thanks for reading my article, I have moved the tutorial to Github so people can contribute to it.

Its Open source 😍😍❤️❤️❤️❤️❤️👌

This is the Complete tutorial here

Thanks for reading Let’s connect on
Twitter: https://twitter.com/Joklinztech
LinkedIn: https://www.linkedin.com/in/wisdom-nwokocha-76212a77/