Material design button with border

You can also use the Material Components for Android.

Add the dependency to your build.gradle:

dependencies { implementation '' }

In this case you can use the MaterialButton in your layout file:


Apply the style @style/Widget.MaterialComponents.Button.OutlinedButton.

In your case use the app:cornerRadius attribute to change the size of corner radius. This will round off the corners with specified dimensions.
Use te attribute app:strokeColor and app:strokeWidth to change the color and the width of the border.
enter image description here

You can also customize the corners using ShapeApperance (it requires version 1.1.0)

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
<style name="MyShapeAppearance" parent="">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSize">8dp</item>

The official doc is here and all the android specs here.

With jetpack compose you can use the OutlinedButton and the border attribute:

        onClick = { },
        border = BorderStroke(1.dp, Color.Blue),
        shape = RoundedCornerShape(8.dp) 
    ) {
        Text(text = "Save")

enter image description here

OLD (support library)

With the new Support Library 28.0.0, the Design Library now contains the Material Button.

You can add this button to our layout file with:

    app:icon="@drawable/ic_android_white_24dp" />

You can customize the button with these attributes:

  • app:backgroundTint: Used to apply a tint to the background of the button. If you wish to change the background color of the button, use this attribute instead of background.

  • app:strokeColor: The color to be used for the button stroke

  • app:strokeWidth: The width to be used for the button stroke


Leave a Comment