Button Composable in Jetpack Compose (with updated Material Design 3)
Hello guys,๐
If you have yet not setup Basic Compose project, please jump for 1st day of learning for Introduction to Compose & Setup ๐๏ธ
Introduction to Button in Compose
Button is most common UI element used in Android. Almost 80 % of actions are initiated by Button. Button contains Text, Clickable property, Image to one of its side etc.
In Material Design 3 we can have 5 version of Button as Elevated, Filled, Filled Tonal, Outlined & Text.
Note : Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.
We already have a Material Design 2 buttons specification. But Recently, Material Design 3 was released. Have a Look on Whatโs New
Note : To start using Material Design 3 components add a dependency inside
implementation "androidx.compose.material3:material3:1.0.0-alpha12"
The general Information & syntax of all Button types looks like ๐
Elevated Button
Basic Outline Buttons with Shadow. Use only when required separation from Background.
Filled Button
Button with filled container. Itโs contrasting surface with colour make it most prominent Button
Outlined Button
They are mostly used for non-primary actions. This is a kind of Button where we depict user to give some opportunity to perform action or escape from flow
Text Button
This are type of buttons used when we want to depict actions as less remarkable. When we are presenting multiple options to user we can give a thought to use this type of button.
FilledTonalButton
This are light Background & Dark label colors. They can be used to depict actions which are less remarkable to show than a Filled Button.
So this is basics ๐, what else we can do with Button Parameters ๐ค
In each Button Composable syntax, some common parameters are there, which you can use to satisfy your use cases like
- Enable/Disable Button
This can be controlled using enabled parameter - Set Elevation to differentiate Button from Background
This can be controlled using elevation parameter - Set different Shape to Button
This can be controlled using shape parameter - Set Border color to Button
This can be controlled using border parameter - Set different Background/Content/Disable/Enable color
This can be controlled using colors parameter - Pass Different Text & Image in Button (in Row fashion)
This can be controlled using content parameter
You can view the usage inside code.
Thatโs all about the basics of Button. This article may not cover everything based on your complex Implementation & use cases but you are good to start with. All the best.๐
You can Clone this repository for basic setup. Further, all concepts source code can be updated from same. (Switch to branch ButtonCompose)
https://github.com/SatyamGondhale/LearnCompose
If you think this has helped you, feel free to ๐๐ป (claps) & share. Thanks.๐