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:
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:
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:
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:
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:
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.
