Skip to main content

How to customize the appearance of a button in Kotlin Android

How to customize the appearance of a button in Kotlin Android.

Here's a step-by-step tutorial on how to customize the appearance of a button in Kotlin Android:

  1. Open your Android Studio and create a new project. Choose the "Empty Activity" template.
  2. In the res folder of your project, create a new directory called drawable. This is where we will store the custom button background.
  3. Inside the drawable directory, create a new XML file, for example, button_background.xml. This file will define the shape and color of the button.
  4. Open the button_background.xml file and add the following code:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000" /> <!-- Change this color to your desired button color -->
    <corners android:radius="8dp" /> <!-- Change this value to adjust the button's rounded corners -->
</shape>
  1. Now, go to your layout XML file, for example, activity_main.xml. Add a button to the layout by adding the following code:
<Button
    android:id="@+id/customButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Custom Button"
    android:background="@drawable/button_background" />
  1. In your Kotlin file, for example, MainActivity.kt, find the onCreate method and add the following code:
val customButton = findViewById<Button>(R.id.customButton)
customButton.setTextColor(Color.WHITE) // Change this color to adjust the button's text color
customButton.setOnClickListener {
    // Add your button click logic here
}
  1. Run your app and you will see the custom button with the specified background color and rounded corners.

You can further customize the button appearance by modifying the XML and Kotlin code. Here are a few examples:

  • Changing the button size: In the layout XML, adjust the android:layout_width and android:layout_height attributes of the button.
  • Adding padding: In the layout XML, use android:padding or android:paddingLeft, android:paddingTop, android:paddingRight, android:paddingBottom attributes to add padding around the button.
  • Changing the button text style: In the Kotlin code, use customButton.setTypeface() to change the font style of the button text.
  • Modifying the button shape: In the button_background.xml file, use different attributes like android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, android:bottomRightRadius to create different shapes.

That's it! You've learned how to customize the appearance of a button in Kotlin Android.