Create a Circular Button with an Icon in Android Jetpack Compose Last Updated : 03 Mar, 2025 Comments Improve Suggest changes Like Article Like Report In Android, Buttons are the most basic and frequently used UI element that lets users call a function or start a task from the application context. It is provided to the user to give input to the application with the help of a click. These Buttons are largely customizable and visual attributes can be altered according to the theme of the application. In this article, we will show you how you could create a Circular Button with an Icon in Android using Jetpack Compose. Step by Step ImplementationStep 1: Create a New Project in Android StudioTo create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.Note: Select Kotlin as the programming language.Step 2: Working with the MainActivity.kt fileGo to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.MainActivity.kt: Kotlin package com.geeksforgeeks.demo import android.os.Bundle import android.widget.Toast import androidx.activity.* import androidx.activity.compose.setContent import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.* import androidx.compose.ui.graphics.* import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.geeksforgeeks.demo.ui.theme.DemoTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { DemoTheme(dynamicColor = false, darkTheme = false) { Surface(color = Color.White) { MyContent() } } } } } @Preview(showSystemUi = true) @Composable fun MyContent(){ val mContext = LocalContext.current Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) { // Create an Outlined Button and set the shape to CircleShape OutlinedButton(onClick = { Toast.makeText(mContext, "This is a Circular Button with a + Icon", Toast.LENGTH_SHORT).show()}, modifier= Modifier.size(100.dp), shape = CircleShape, border= BorderStroke(5.dp, Color(0XFF0F9D58)), contentPadding = PaddingValues(0.dp), colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Blue) ) { // Adding an Icon "Add" inside the Button Icon(Icons.Default.Add ,contentDescription = "content description", tint=Color(0XFF0F9D58)) } } } Output: Comment More infoAdvertise with us Next Article Create a Circular Button with an Icon in Android Jetpack Compose A aashaypawar Follow Improve Article Tags : Kotlin Android Android-Jetpack Similar Reads Android Jetpack Compose Button with Icon and Text Many times in android applications while using a button we have to display an image along with the text in our button. So that users will get to know about what the button actually does rather than simply displaying icons within the button. In this article, we will take a look at How to combine text 2 min read Floating Action Button in Android using Jetpack Compose Floating Action Button is added to the android application to perform some important within the android application. These are implemented in the android application UI for some primary actions within the application. There are different types of floating action buttons such as simple, square, and e 3 min read Circular ImageView in Android using Jetpack Compose Circular ImageView is used in many of the apps. These types of images are generally used to represent the profile picture of the user and many more images. We have seen the implementation of ImageView in Android using Jetpack Compose. In this article, we will take a look at the implementation of Cir 2 min read Icon Toggle Button in Android using Jetpack Compose Toggle Buttons are used in most applications. These buttons are used to perform multiple operations. Toggle buttons are seen used in many social media applications such as Instagram. In social media apps, we can get to see a heart icon that is used to like the image. We can also unlike that image by 3 min read Change Button Size in Android Jetpack Compose In Android, Button is a very common UI element that is used to call a function or perform a task when clicked by the user. A Button by default occupies specific space depending upon the text that it displays. If the Button text is longer or has a larger font size, the Button width, and height increa 3 min read Like