Jetpack Compose Tutorials

Image for post
Image for post

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

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

Image for post
Image for post

Click on “Create New Project”

Image for post
Image for post

you will click o the “Empty Compose Activity

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
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.

Image for post
Image for post
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/

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Nwokocha Wisdom Maduabuchi

Written by

A software engineer with considerable experience in mobile development, native Android, and IOS development(Xcode), flutter dev, technical writing and community

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Nwokocha Wisdom Maduabuchi

Written by

A software engineer with considerable experience in mobile development, native Android, and IOS development(Xcode), flutter dev, technical writing and community

The Startup

Medium's largest active publication, followed by +756K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store