5 Awesome Jetpack Compose Custom Button Designs

Jetpack Compose Custom Button Styles

By default, Jetpack Compose comes with a pre-built Button API. It follows material design guidelines. As a result, it doesn’t offer much customization. For example, we cannot add gradient background. If we want to create a custom button, we can use the Box API. Most of the following buttons are designed using it. Have a look:

Music Button:

Music Button

It is a music button with 3 states – play, pause, and loading. It fetches the song using the ViewModel.

Source Code: Music Button

Gradient Border:

Gradient Border

These are the buttons with a gradient border. I made them with Box, but you can also use OutlinedButton.

Source Code: Gradient Border Buttons

Gradient Background:

Gradient Background

The default Button() API doesn’t have the functionality to add a gradient background. So, I made it with Box and Brush APIs. You can also adjust the corner radius.

Source Code: Gradient Background Buttons

Buttons with Different Corner Sizes:

Jetpack compose custom button

They look beautiful. Thanks to Shapes API. I got this effect by adding different sizes to all four corners. These are the pure Jetpack Compose custom button designs.

Source Code: Buttons with Different Corner Sizes

Button with onClick Animation:

onClick Animation

When you tap on these buttons, their scale value will get animated. The first one is a normal button with text. The second one is an icon. You can use it when you need a heart animation.

Source Code: Button onClick Animation

These are the custom button designs I made with Jetpack Compose. I hope you like them. If you have any doubts or suggestions, leave a comment below.

Leave a Comment