Android Button Border Implementation: Complete Guide from XML Shapes to MaterialButton

Implementing Button Borders with XML Shape Resources

In Android development, adding borders to buttons without relying on image resources is a common requirement. XML shape resources provide a flexible way to define button background styles, including borders, rounded corners, and gradient effects.

First, create an XML file to define the button's shape. This file should be placed in the res/drawable directory, using the <shape> element as the root element with the shape type specified as rectangle. Within the shape definition, the <stroke> element sets the border width and color, the <corners> element controls the corner radius, and the <gradient> element enables color gradient effects.

Here is a complete example of a bordered button background definition:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient android:startColor="#FFFFFF" 
    android:endColor="#00FF00"
    android:angle="270" />
  <corners android:radius="3dp" />
  <stroke android:width="5px" android:color="#000000" />
</shape>

After defining the background resource, apply it to the button in the layout file using the android:background attribute:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your Text"
    android:background="@drawable/my_button_bg"
    />

Implementing Transparent Background Bordered Buttons

For bordered buttons with transparent backgrounds, a combination of <selector> and <layer-list> can be used to achieve more precise control. This approach is particularly suitable for scenarios where the default button appearance needs to be maintained while adding a border.

First, create a basic shape defining the transparent background and border:

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

To match the default padding of Android buttons, create a layer list to add appropriate spacing:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="6dp"
android:drawable="@drawable/transparent_bg_bordered"
android:top="6dp" />
</layer-list>

Border Implementation with MaterialButton

With the popularity of Material Design, Android provides more modern button implementation approaches. The MaterialButton component includes built-in support for borders, significantly simplifying the creation of bordered buttons.

To use MaterialButton, first add the corresponding dependency in the project's build.gradle file:

dependencies {
    implementation 'com.google.android.material:material:1.0.0'
}

Then, you can directly use MaterialButton in the layout file and set border properties:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

For unfilled bordered buttons, set the background to transparent and adjust other properties:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNFILLED MATERIAL BUTTON"
    android:textColor="@color/green"
    android:textSize="15sp"
    app:backgroundTint="@android:color/transparent"
    app:cornerRadius="8dp"
    app:rippleColor="#33AAAAAA"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

Comparison and Selection of Implementation Approaches

The XML shape resource method offers maximum flexibility, allowing complete customization of button appearance, including complex gradient effects and precise border control. This approach is suitable for scenarios requiring highly customized designs or in projects not using the Material Design component library.

The MaterialButton method is more modern and convenient, incorporating Material Design best practices including appropriate shadows, ripple effects, and consistent visual hierarchy. This approach is particularly suitable for projects following Material Design guidelines, enabling quick implementation of aesthetically pleasing and fully functional bordered buttons.

When selecting an implementation approach, consider the project's design specifications, target API levels, and maintenance costs. For new projects, MaterialButton is recommended for better user experience and lower maintenance costs. For existing projects or cases requiring special customization, the XML shape resource method remains a reliable choice.