Jetpack Compose: Button, Outlined Button, and Text Button in Android

In this article, you will learn to create Button(), OutlinedButton() and TextButton() composables and how to customise their appearance such as style, size, elevation, border stroke color, background color, content colour, and apply onClick listener to it.

Source code link at the end of this article.

Yay! Let’s learn about buttons in Jetpack Compose

Don’t like reading? Watch the video instead 👇 OR click here to watch

Watch video on Youtube. It’s engaging 😎

Ok, let’s start the tutorial.

In general, there are three types of Buttons provided by Material Design Component library for Jetpack Compose.

1. Button(): A normal and regular button

Button

2. OutlinedButton(): Transparent background but with an outline

OutlinedButton

3. TextButton(): A normal button that appears like a text

TextButton looks like a Text but when you click it — its shape will appear as Button

These three buttons can optionally contain an Icon as shown in the pic below.

Top to Bottom: Button, OutlinedButton, and TextButton with icon

How to create a Normal Button?

We can use Button() composable for that.

Code

Output

The above code 👆 will render a simple button. To add text we are using the Text() composable widget as the content of the Button.

• The onClick parameter is mandatory. It expects us to pass a lambda function.

How to add an icon to the Button?

We can use Icon() composable for that.

Icon and Spacer composables added

Output

The Icon() composable expects us to define at least two parameters: imageVector and contentDescription.

• imageVector: Mandatory. Provide a reference to the image. I am using a vector image from Android SDK.
• contentDescription: Mandatory. Provide what type of image you are using. This is important to make your app accessible (accessibility feature). You may use null as its value if you don’t want it.
• modifier: Optional but important. I am using it to resize the image as per the standard size of the Text being used in the Button. If you don’t use it, your icon will appear a little bigger than the standard text size.

Additionally, I have removed the comment from onClick and replaced it to display a Toast message. You can get the source code in the end.

• ButtonDefaults is an object declaration that contains default values which can be used by developers without thinking too much about what values to use. Such as ButtonDefault.IconSize and ButtonDefaults.IconSpacing are pre-defined constants — with dp values of 18 dp and 8 dp respectively.

What is the purpose of Spacer() composable?

The Spacer composable represents empty space. In our code, we have used it to add some space between the Icon and the Text.

How to create OutlinedButton?

It’s really simple. Just replace Button with OutlinedButton composable.

OutlinedButton example

Assuming we are using the phone Icon, Spacer and a Text “Call” as the content of OutlinedButton

How to create TextButton?

Again very simple. Just use TextButton composable.

TextButton example

Assuming we are using Share Icon, Spacer and Text “Share” as the content of TextButton

How to customise a Button, OutlinedButton, and TextButton?

These three buttons can be customised using the same parameters. i.e. same parameters can be used with all the three types of buttons. Let’s see examples.

The following is an example of a simple Button with a width of 200dp, elevation of 10dp, background color of Black, and content color of White.

The same parameters can be used for OutlinedButton and TextButton

OUTPUT: Assuming the content is Heart Icon, Spacer, and Text “Like”.

The above parameters can be used with OutlinedButton and TextButton. Test yourself, how they look with exactly the same values of parameters.

Similarly, if you want an OutlinedButton with a border stroke, then you can make use of the border parameter:

OutlinedButton with a border

Output: The border of 1dp and its stroke color is Blue.

In this way, you can use any type of parameter with any type of button. Just change the values and get the result.

Get the source code from Github: Click Here . Give it a STAR ⭐

One clap, two claps, three claps…. Forty! 👏👏👏👏 💕

If you want video tutorials, subscribe to my youtube channel Smartherd.
100 thousand already did. Don’t wait!