Photo by Hello I'm Nik 🪴 on Unsplash

Exploring Button in Jetpack Compose Beta — Android

The moment Jetpack Compose is announced in beta version there is plenty of excitement in the Android Community to explore this new UI toolkit.

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.

I will not go through all the benefits it provides you can clearly get to know once you started using it.

In this post, we are going to explore types of buttons in jetpack compose and how to create them.

Let's first go through the setup

Since Jetpack Compose is still in a beta mode we will be requiring the Android Studio Canary or Android Studio Arctic Fox version to run it.

Step 1:

Please make the following selection

1. File > New Project > Empty Compose Activity

New Project > Empty Compose Activity

Step 2: Create a file name Title.kt

This file will contain a Text input to show as HeaderTitle for Buttons that we are going to see.

We have also created a class for Icon so that we don’t have to write contentDescription =null multiple times.

I have specified the contentDescription: String = “”

Step 3: We are going to create ButtonTypes.kt file

In this we are showing the numerous types of basic Buttons we can create.

These buttons can be used in our daily Android essential UI building.

Types of Button

1. Normal Button
2. Normal Button with full width
3. Outlined Button
4. Rounded Button
5. Rounded edge at the top start
6. Cut Corner Shape Button
7. Text Button
8. Outlined Button with Border stroke
9. Icon button
10. Horizontal gradient button
11. Vertical gradient button
12. Icon button
13. Icon button with tint color
14. Outline icon button
15. Floating Action Button
16. Floating Action (Text+Icon)
17. Floating Action (Text)

Please find the code inside the ButtonTypes.kt file

Output Screenshots:

Buttons UI

If you want the complete source code you can find my GitHub repository link

cpratik711/JetpackComposePlayground

Please clap 👏 if you learn something new. It will motivate me to write more such posts for you.