Android Rounded Corners: Shape Drawables with Kotlin XML Tutorial

In Android development, visually appealing UIs play a crucial role in user engagement. Rounded corners are a common design element that can soften the appearance of UI components, providing a more modern and user-friendly experience. While you can achieve rounded corners programmatically, using shape drawables (<corners>) in XML offers a cleaner, more maintainable solution, especially when working with Kotlin.

What are Shape Drawables?

Shape drawables are XML files that define geometric shapes. You can use them to customize the appearance of views, backgrounds, and other UI elements. The <corners> tag within a shape drawable allows you to create rounded corners with a specified radius.

Why Use Shape Drawables for Rounded Corners?

  • Maintainability: Changes to corner radii can be made in one place (the XML file) without modifying code.
  • Readability: XML is often more readable than programmatic shape creation, making it easier for other developers to understand and modify.
  • Performance: Drawables are pre-rendered, which can offer better performance than creating shapes dynamically in code.
  • Reusability: Shape drawables can be easily reused across multiple views in your application.

How to Create Rounded Corners with Shape Drawables in Kotlin Android

Here’s a step-by-step guide to creating rounded corners using shape drawables in your Kotlin-based Android project.

Step 1: Create a Drawable XML File

Create a new XML file in your res/drawable directory. Name it something descriptive, like rounded_corner_background.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/your_background_color"/>
    <corners android:radius="8dp"/>
</shape>

In this XML file:

  • <shape> is the root element defining the shape. We set android:shape="rectangle" for a rectangular shape.
  • <solid> sets the background color. Replace @color/your_background_color with the actual color you want.
  • <corners> defines the radius of the corners. android:radius="8dp" creates rounded corners with an 8dp radius. You can adjust this value to change the roundness of the corners.

Step 2: Customize Corner Radius (Optional)

If you want different radii for each corner, you can use android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, and android:bottomRightRadius individually.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/your_background_color"/>
    <corners
        android:topLeftRadius="12dp"
        android:topRightRadius="4dp"
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="12dp"/>
</shape>

In this example, the top-left and bottom-right corners have a radius of 12dp, while the top-right and bottom-left corners have a radius of 4dp.

Step 3: Apply the Drawable to Your View

You can apply the drawable as a background to any view in your layout XML file or programmatically in your Kotlin code.

In XML:
<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_corner_background"
    android:padding="16dp"
    android:text="Hello, Rounded Corners!"
    android:textColor="@android:color/white"/>

Here, the android:background attribute is set to @drawable/rounded_corner_background, applying the shape drawable to the TextView.

Programmatically in Kotlin:
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView: TextView = findViewById(R.id.myTextView)
        textView.background = ContextCompat.getDrawable(this, R.drawable.rounded_corner_background)
    }
}

In this Kotlin code:

  • We retrieve the TextView using its ID.
  • We get the drawable resource using ContextCompat.getDrawable(this, R.drawable.rounded_corner_background).
  • We set the background of the TextView to the drawable we obtained.

Adding a Stroke (Border)

To add a border or stroke to your rounded corner, use the <stroke> tag within the shape drawable XML.


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/your_background_color"/>
    <corners android:radius="8dp"/>
    <stroke
        android:width="2dp"
        android:color="@color/your_border_color"/>
</shape>

Here, android:width specifies the width of the stroke, and android:color sets the color of the stroke. Replace @color/your_border_color with the color you want.

Gradient Backgrounds with Rounded Corners

You can also combine rounded corners with gradient backgrounds using the <gradient> tag. Make sure that android:type is set to `linear` otherwise the shape will ignore the radius properties.


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FF0000"
        android:endColor="#0000FF"
        android:angle="45"
        android:type="linear"/>
    <corners android:radius="8dp"/>
</shape>

In this example, the background will have a gradient from red (#FF0000) to blue (#0000FF) with a 45-degree angle and rounded corners.

Conclusion

Using shape drawables with <corners> is an efficient and maintainable way to create rounded corners in your Android UIs. Whether you apply them in XML or programmatically in Kotlin, shape drawables provide a flexible solution for enhancing the visual appeal of your app.