Android - border for button

Question

How do I add a border to a button? Is it possible to do this without resorting to use of images?

Solution 1

Step 1 : Create file named : my_button_bg.xml

Step 2 : Place this file in res/drawables.xml

Step 3 : Insert below code

<?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>

Step 4: Use code "android:background="@drawable/my_button_bg" where needed eg below:

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

Solution 2

• Android Official Solution

Since Android Design Support v28 was introduced, it's easy to create a bordered button using MaterialButton. This class supplies updated Material styles for the button in the constructor. Using app:strokeColor and app:strokeWidth you can create a custom border as following:

1. When you use androidx:

build.gradle

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

• Bordered Button:

<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" />

• Unfilled Bordered Button:

<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" />

---

2. When you use appcompat:

build.gradle

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

style.xml

Ensure your application theme inherits from Theme.MaterialComponents instead of Theme.AppCompat.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

---

• Bordered Button:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

• Unfilled Bordered Button:

<android.support.design.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" />

---

Visual Result

Solution 3

Create a button_border.xml file in your drawable folder.

res/drawable/button_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#FFDA8200" />

    <stroke
        android:width="3dp"
        android:color="#FFFF4917" />

</shape>

And add button to your XML activity layout and set background android:background="@drawable/button_border".

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_border"
    android:text="Button Border" />

Solution 4

create drawable/button_green.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient
    android:startColor="#003000"
    android:centerColor="#006000"
    android:endColor="#003000"
    android:angle="270" />
  <corners android:radius="5dp" />
  <stroke android:width="2px" android:color="#007000" />
</shape>

and point it out as @drawable/button_green:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/button_green"
        android:text="Button" />

Solution 5

Please look here about creating a shape drawable http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Once you have done this, in the XML for your button set android:background="@drawable/your_button_border"

View more solutions

Comments

[asenovm]

stackoverflow.com/questions/7626554/… Same way as here :)

[Android Killer]

thanks.+1 for this.After saving it into drawable folder as a xml file.How can we use it ?

[slayton]

@AndroidPower you can use it with R.drawable.FILE_NAME

[theJerm]

Where does this code go, in the .axml code for the markup for the button? Does it go in a styles.xml type file?

[Kibi]

I used just the stroke (and made it white) to outline a Button with white. Works great with 4.4 but in 4.0.3 the button goes black - any ideas why?

[Pedantic]

@Kibi sorry someone edited my answer and gave you incorrect advice. I have changed it but I'm shocked that someone can edit an accepted answer and change the usefulness.

[Vasil Valchev]

can we handle clicked and focus cases whit <selector>

[StarWind0]

You should use DP not PX. Never PX in android.

[Someone Somewhere]

I see you've got textColor and textSize declared in your button XML. What do you suggest if someone already has a style defined for textColor and textSize and now they want to add the style="@style/Widget.AppCompat.Button.Borderless" ?

[Someone Somewhere]

I've got it figured out, see developer.android.com/guide/topics/ui/look-and-feel/…

[aminography]

As you mentioned, it is possible to define a style which inherits from borderless style, then add preferred attributes according to the base style.

[i336_]

Slightly OT, but what's the interesting 4th icon in the action bar at the bottom of the GIF? (Also it looks like the GIF was grabbed from a real device, cool)

[aminography]

@i336_ :) Yes, I was running it on a real device which supports 2 SIMs.

[xarly]

Maybe I'm wrong but for me in the • Unfilled Bordered Button, I had to change, app:backgroundTint="@color/transparent" to app:backgroundTint="@android:color/transparent"

[aminography]

@xarly: You are right since I was declared transparent color in the project resource values.

[CDrosos]

it doesnt work for me in Xamarin.Android. the Unfilled Bordered Button with the same code does not have solid border but it has something like a shadow border around the button

[pw2]

worked for me using <com.google.android.material.button.MaterialButton style="@style/Widget.MaterialComponents.Button.OutlinedButto‌​n"