Adding Borders with Shape Drawables in Android: A Kotlin XML Guide

In Android development, customizing the visual appearance of your app’s UI is crucial for providing a polished user experience. One common requirement is adding borders or strokes to UI elements like buttons, text fields, or views. Using Shape Drawables in Kotlin XML is a straightforward and efficient way to achieve this. This approach allows you to define borders with custom colors, widths, and even rounded corners without writing complex code.

What are Shape Drawables?

Shape Drawables are XML files that define geometric shapes and patterns which can be used as backgrounds for Android views. They offer a flexible and efficient way to create simple vector graphics and customize UI elements directly from XML, reducing the need for complex drawing code.

Why Use Shape Drawables for Borders?

• Simplicity: Define borders in XML without needing custom drawing code.
• Flexibility: Customize stroke color, width, dash effects, and corner radius easily.
• Reusability: Shape Drawables can be reused across multiple views, maintaining a consistent style.
• Performance: Efficiently rendered by the Android system.

How to Add Borders with Shape Drawables in Kotlin XML

To add borders to your UI elements using Shape Drawables, follow these steps:

Step 1: Create a New Drawable XML File

In your res/drawable directory, create a new XML file (e.g., bordered_background.xml) to define the Shape Drawable.

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

Explanation of the attributes:

• <shape>: Defines the shape type, such as rectangle, oval, line, or ring.
• <stroke>: Specifies the border (stroke) properties:
  • android:width: The width of the border.
  • android:color: The color of the border.
• <corners>: Adds rounded corners with a specified radius.
• <solid>: Defines the background color of the shape. Setting it to #00FFFFFF makes it transparent.

Step 2: Apply the Drawable to a View

In your layout XML file, apply the Shape Drawable as the background of your desired view (e.g., Button, TextView, or LinearLayout).

<Button
    android:id="@+id/borderedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Bordered Button"
    android:background="@drawable/bordered_background" />

Step 3: Customize the Stroke (Border)

You can further customize the stroke with different attributes:

• android:dashWidth and android:dashGap: Create a dashed or dotted border.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="#FF000000"
        android:dashWidth="4dp"
        android:dashGap="2dp" />
    <corners android:radius="8dp" />
    <solid android:color="#00FFFFFF" />
</shape>

Complete Example

Here’s a complete example demonstrating how to add a bordered background to a TextView:

Drawable XML (bordered_text_view.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="3dp"
        android:color="#FF4CAF50" />
    <corners android:radius="12dp" />
    <solid android:color="#00FFFFFF" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

Layout XML (activity_main.xml):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/borderedTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bordered_text_view"
        android:text="This TextView has a border!"
        android:textSize="20sp" />
</RelativeLayout>

Benefits of Using Kotlin

When working with XML layouts, Kotlin can be used to manipulate views programmatically. Here’s an example of how you can reference the bordered TextView in your Kotlin activity and modify it further if needed:

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

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

        val borderedTextView: TextView = findViewById(R.id.borderedTextView)
        // You can further customize the TextView here if needed
        borderedTextView.textSize = 24f
    }
}

Using Kotlin provides you the flexibility to interact with UI elements defined in XML, further enhancing the customization capabilities of your Android app.

Conclusion

Adding borders or strokes to UI elements in Android using Shape Drawables offers a clean and efficient approach. It allows you to customize your UI without writing extensive code, promotes reusability, and improves the visual appeal of your application. By leveraging the simplicity of XML and the power of Kotlin, you can create a professional and engaging user interface.