Jetpack Compose Ep:3 — Button App
Here, I’ve discussed a little bit in detail about the basic buttons and how to call other classes and functions to the main class file.
As we have already discussed about the text, scrolling and multiple other things. Today, in this episode, I’ll be drafting some informational content about creating a button.
Note: Currently, using Android Studio 4.2 Canary 1 with
classpath ‘com.android.tools.build:gradle:4.2.0-alpha01’
Many of you have read the title which displays about being some partitions in it. It is because the whole app is very big to complete it in a one go. So, I have decided to divide and conquer the whole app one by one.
Moving ahead, at first I would love to focus completely on Button’s over here. Thus keeping the topic in mind, I’ll provide an overview about What is a button? and then will discuss about its types which are listed below:
- Simple Button
- Bordered Button
- Rounded Cornered Button
- Cut Cornered Button
- Disabled Button
Furthermore, we will look into all the parameters that the button gives us and use it one by one to check it own benefits. Also, I’m going to use a little different approach by using an interface and a custom object to remove boilerplate code.
Note: The Android Studio Canary has got a recent update which is of version 10 and thus it has also brought some changes in the folder structure too.
As the Android studio has been updated, it provides extra code files in our main java package. These code are divided into 4 different files namely as Color, Shape, Theme and Type and it comes under a package name called ui.
All the files contains some constant values which is being used by the project itself. But the major part comes with the Theme file, as this file handles the light and dark mode of the app. There is no need to some additional code to do. It comes within this template by default.
What is a button?
It is a view component which is also known as a Contained Button. It has its own characteristics and they are:
- highly-emphasis.
- differs from elevation and fill.
- contains primary actions.
- by default the text color always tries to match the background color of the component.
- default text style is Typography.button.
- onClick is necessary to make it clickable or else it will get displayed as disabled by default.
Let’s begin by creating an interface file named as ComposableLayout and define a function containing all the parameters which are allowed by the Button Component himself. The code looks like:
interface ComposableLayout {
@Composable
fun ButtonBuild(
mModifier: Modifier? = null,
mBackgroundColor: Color? = null,
mEnabled: Boolean? = true,
mElevation: Dp? = null,
mShape: Shape? = null,
mBorder: Border? = null,
mContentColor: Color? = null,
mInnerPadding: InnerPadding? = null,
mText: String? = "Compose Buttons"
)
}As the code mentioned above, each parameter checks for a value and if it is not been provided anything than it gets set as null by default.
Note: In Jetpack Compose, whenever we call a function which either it belongs to the same class, file or any other, it has to be annotated as Composable.
- mModifier — It is used to apply padding to the component itself by means all four corners individually.
- mBackgroundColor — It is used to set a background color for the component.
- mEnabled — It sets the state of a component by holding a boolean value. By default the state is true(Enabled).
- mElevation— It accepts dp type values to setup an elevation for the component.
- mShape — By using this parameter, we can apply two basic shapes to our component and i.e. round or cut corners.
- mBorder — To provide a border to the component, it accepts total of 3 parameters but only 2 at a time and the combinations are either “size & color” or “size & brush”.
- mContentColor — It helps to provide color to the content of the component.
- mInnerPadding — By using this, we can apply an inner padding to the component which gives a proper space to the content.
- mText — It accepts a string value which will be the content of the component. It is being set to “Compose Buttons” bu default if no value it been provided.
Then create an object named as ButtonComponent and implement the interface to it. Declare the function which was defined in the interface by calling the Button class and creating the Button component. Pass all the parameters to the view by specifying the default values to it.
object ButtonComponent: ComposableLayout {
@Composable
override fun ButtonBuild(
mModifier: Modifier?,
mBackgroundColor: Color?,
mEnabled: Boolean?,
mElevation: Dp?,
mShape: Shape?,
mBorder: Border?,
mContentColor: Color?,
mInnerPadding: InnerPadding?,
mText: String?
) {
Button(
onClick = {
},
modifier = mModifier ?: Modifier,
backgroundColor = mBackgroundColor ?: Color.White,
enabled = mEnabled ?: false,
elevation = mElevation ?: 0.dp,
shape = mShape ?: RoundedCornerShape(0.dp),
border = mBorder ?: Border(
size = 0.dp,
color = Color.Transparent
),
contentColor = mContentColor ?: Color.White,
padding = mInnerPadding ?: InnerPadding(),
text = {
mText?.let {
Text(text = it)
}
}
)
}
}Note: The onClick parameter in the component is used to make the component clickable or else it will remained disabled by default.
Simple Button
Moving to the MainActivity.kt file, I’ll create a function named as SimpleButton to showcase the look of a default button by called the ButtonComponent object as shown below:
@Composable
fun SimpleButton() {
ButtonComponent.ButtonBuild(
mModifier = Modifier.padding(
start = 16.dp,
top = 16.dp,
end = 16.dp
),
mBackgroundColor = MaterialTheme.colors.primary,
mContentColor = Color.White,
mInnerPadding = InnerPadding(16.dp),
mText = "Simple Button"
)
}
Bordered Button
This button holds a white background with an evenly outer padding and grey color border. The content inside it labelled the component as Bordered Button with a black color and some inner padding as show below:
@Composable
fun BorderedButton() {
ButtonComponent.ButtonBuild(
mModifier = Modifier.padding(
start = 16.dp,
top = 16.dp,
end = 16.dp
),
mBackgroundColor = Color.White,
mBorder = Border(
size = 1.dp,
color = Color.Gray
),
mContentColor = Color.Black,
mInnerPadding = InnerPadding(16.dp),
mText = "Bordered Button"
)
}
Round Cornered Button
This button holds many parameters which was being used in the above button(Bordered Button) with an additional features of Round Cornered Shape of a particular size and making the background transparent as shown below:
@Composable
fun RoundCorneredButton() {
ButtonComponent.ButtonBuild(
mModifier = Modifier.padding(
start = 16.dp,
top = 16.dp,
end = 16.dp
),
mBackgroundColor = Color.Transparent,
mShape = RoundedCornerShape(8.dp),
mBorder = Border(
size = 1.dp,
color = Color.Red
),
mContentColor = Color.Red,
mInnerPadding = InnerPadding(8.dp),
mText = "Round Cornered Button"
)
}
Cut Cornered Button
The major modifications in this button is that of the Cut Cornered Shape and the border as well as the content color which is of Material Theme as same as the default theme of the app.
@Composable
fun CutCorneredButton() {
ButtonComponent.ButtonBuild(
mModifier = Modifier.padding(
start = 8.dp,
top = 8.dp,
end = 8.dp
),
mBackgroundColor = Color.Transparent,
mShape = CutCornerShape(8.dp),
mBorder = Border(
size = 1.dp,
color = MaterialTheme.colors.primaryVariant
),
mContentColor =
MaterialTheme.colors.primarySurface,
mInnerPadding = InnerPadding(16.dp),
mText = "Cut Cornered Button"
)
}
Disabled Button
In this button, the state has been changed to false(disabled) from the default(enabled) along with a little of elevation provided to it.
@Composable
fun DisabledButton() {
ButtonComponent.ButtonBuild(
mModifier = Modifier.padding(16.dp),
mBackgroundColor = Color.Cyan,
mEnabled = false,
mElevation = 4.dp,
mContentColor = Color.White,
mInnerPadding = InnerPadding(16.dp),
mText = "Disabled Button"
)
}
Outline Button
Outline button is an action button which has an outline around it, but it is not a primary action in an app. Its text color correlates with its background color. The default text style is set to Typography.button. Also, it needs to provide a compulsory onClick attribute make the button enabled.
@Composable
fun OutlinedButtonComponent() {
ButtonComponent.OutlinedButtonBuild(
mModifier = Modifier.padding(8.dp),
mBackgroundColor = Color.Transparent,
mEnabled = true,
mBorder = Border(
size = 2.dp,
color = Color.Blue
),
mContentColor = Color.Black,
mInnerPadding = InnerPadding(8.dp),
mText = "Outlined Button"
)
}
Text Button
Text buttons are mostly used as less pronounced actions. They are located in cards and dialogs. Text default text style is Typography.button. To make the button enable, the attribute onClick is necessary. The text color correlates with the background color of the button.
@Composable
fun TextButtonComponent() {
ButtonComponent.TextButtonBuild(
mModifier = Modifier.padding(8.dp),
mBackgroundColor = Color.Magenta,
mContentColor = Color.White,
mElevation = 4.dp,
mInnerPadding = InnerPadding(8.dp),
mText = "Text Button"
)
}
And finally, calling all the functions into the onCreate method with a wrapping column function to make them align vertically as well as horizontally and applying a modifier to fill the max size of the screen as shown below:
AppTheme {
Column(
verticalArrangement = Arrangement.SpaceEvenly,
horizontalGravity = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
SimpleButtonComponent()
BorderedButtonComponent()
RoundCorneredButtonComponent()
CutCorneredButtonComponent()
DisabledButtonComponent()
OutlinedButtonComponent()
TextButtonComponent()
}
}Finally, run the app.
For the source code, visit to my github account given below:
If there is any issue, do let me know in the comment section. Happy coding!
