How to create Gradient Button using JetPack Compose

Hi Today we look on to how to create a gradient button using JetPack Compose first we will be creating a kotlin class named GradientButton inside we will be creating a composable fun GradientButton with input parameter text in the form of string and textcolor in the form of Color and gradient in the form of Brush

Now lets look how the function look with this input

Inside the function we will be creating a Button where we set background button default color to Transparent with the content Padding

Inside Button Scope we will be creating a Box with background gradient and content alignment center

And inside Box scope will be creating a Text with text string and color for text.So the final GradientButton Function will look like

And lets see how to call this from MainActivity class

You can pass your own gradient color from UI colors

Knowledge is everything.Check out my app at

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Extensions and Protocols in Swift

Improve your iOS team’s productivity by building features as frameworks

ARKit Tutorial: Image recognition and virtual content transform

Binding data without RxSwift

The UK authorities want to explore the possibilities of a #CBDC

Taylor Swift fired shots at ex with new song

SwiftUI & Combine learnings

How To Fix Your Fat ViewController

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
Pandiyan Mani

Pandiyan Mani

Knowledge is everything.Check out my app at

More from Medium

Kotlin Annotation with use-site targets on Jackson

How to add WebView in Jetpack Compose

Requesting Multiple Permissions in Jetpack Compose…

Kotlin — Basics 🪁 — Part 2