Button in Android using Jetpack Compose

08 Sep, 2021
Jetpack Compose is a new toolkit provided by Google. This is useful for designing beautiful UI designs. A Button is a UI component in Android which is used to navigate between different screens. With the help of a button, the user can interact with your app and perform multiple actions inside your application. In this article, we will take a look at the implementation of buttons in Android using Jetpack compose. 
Attribute
Description
Step 1: Create a New Project.
To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.
Step 2: Working with the MainActivity.kt file
Navigate to the app > java > your app’s package name and open the MainActivity.kt file. Inside that file add the below code to it. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.graphics.drawable.shapes.Shapeimport android.media.Imageimport android.os.Bundleimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport androidx.compose.foundation.BorderStrokeimport androidx.compose.foundation.Imageimport androidx.compose.foundation.Textimport androidx.compose.foundation.layout.*import androidx.compose.foundation.shape.RoundedCornerShapeimport androidx.compose.foundation.text.KeyboardOptionsimport androidx.compose.material.*import androidx.compose.material.icons.Iconsimport androidx.compose.material.icons.filled.AccountCircleimport androidx.compose.material.icons.filled.Infoimport androidx.compose.material.icons.filled.Phoneimport androidx.compose.runtime.*import androidx.compose.runtime.savedinstancestate.savedInstanceStateimport androidx.compose.ui.Alignmentimport androidx.compose.ui.layout.ContentScaleimport androidx.compose.ui.platform.setContentimport androidx.compose.ui.res.imageResourceimport androidx.compose.ui.tooling.preview.Previewimport androidx.compose.ui.unit.dpimport com.example.gfgapp.ui.GFGAppThemeimport androidx.compose.ui.Modifierimport androidx.compose.ui.draw.clipimport androidx.compose.ui.graphics.Colorimport androidx.compose.ui.graphics.SolidColorimport androidx.compose.ui.platform.ContextAmbientimport androidx.compose.ui.res.colorResourceimport androidx.compose.ui.text.TextStyleimport androidx.compose.ui.text.font.FontFamilyimport androidx.compose.ui.text.input.*import androidx.compose.ui.unit.Dpimport androidx.compose.ui.unit.TextUnit class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            GFGAppTheme {                // A surface container using the 'background'                  // color from the theme                Surface(color = MaterialTheme.colors.background) {                    // at below line we are calling                      // our function for button.                    MyButton();                }            }        }    }} // @Preview function is use to see preview// for our composable function in preview section.@Preview(showBackground = true)@Composablefun DefaultPreview() {    GFGAppTheme {          // we are passing our composable        // function to display its preview.        MyButton();    }} @Composablefun MyButton() {     Column(            // we are using column to align our            // imageview to center of the screen.            modifier = Modifier.fillMaxWidth().fillMaxHeight(),             // below line is used for specifying            // vertical arrangement.            verticalArrangement = Arrangement.Center,             // below line is used for specifying            // horizontal arrangement.            horizontalAlignment = Alignment.CenterHorizontally,            ) {        // below line is use to get        // the context for our app.        val context = ContextAmbient.current         // below line is use to create a button.        Button(                // below line is use to add onclick                // parameter for our button onclick                onClick = {                    // when user is clicking the button                    // we are displaying a toast message.                    Toast.makeText(context, "Welcome to Geeks for Geeks", Toast.LENGTH_LONG).show()                },                // in below line we are using modifier                // which is use to add padding to our button                modifier = Modifier.padding(all = Dp(10F)),                 // below line is use to set or                // button as enable or disable.                enabled = true,                 // below line is use to                // add border to our button.                border = BorderStroke(width = 1.dp, brush = SolidColor(Color.Blue)),                 // below line is use to add shape for our button.                shape = MaterialTheme.shapes.medium,        )        // below line is use to        // add text on our button        {            Text(text = "Geeks for Geeks", color = Color.White)        }    }}
  
 
chardieaj
Android-Jetpack
Technical Scripter 2020
Android
Kotlin
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
How to Communicate Between Fragments in Android?
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android UI Layouts
Kotlin Array
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android