Android - Border for Button

Android - border for button

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

How to create a button with border and transparent background android

you should create a shape in a xml file like below, and set it as your button background

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        >
        <solid android:color="@android:color/transparent" />

        <stroke
            android:width="2dp"
            android:color="@color/your_border_color" />
    </shape>

How to add border to button in android

Create a Shape in Drawable Resource

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
   <solid android:color="#C0213A" />`<!--Background Color-->`
   <stroke android:width="2dip" android:color="#C0213A"/> `<!--Border-->`
</shape>

In your XML

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="15dp"
android:background="@drawable/your_shape"> `<!--This is your shape created--`>

Android - cannot set button border as expected

You can achieve this using a Material Button. There is a lot of useful attributes you can use to make the button based on your needs, like app:strokeWidth, app:strokeColor, app:cornerRadius, app:backgroundTint, app:icon, app:iconSize and much more where you can find them in the above link.

Below is a sample of your Button using the above Material Button attributes:

<com.google.android.material.button.MaterialButton
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:padding="0dp"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        app:cornerRadius="12dp"
        app:strokeWidth="10dp"
        app:strokeColor="@color/start_button_color_selector"
        app:backgroundTint="@android:color/white"
        app:icon="@drawable/button_selector"
        app:iconTint="@null"
        app:iconSize="80dp"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

where @color/start_button_color_selector.xml will be like below to set the stroke color based on selected/unselected state:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/black" android:state_pressed="true"/>
    <item android:color="#969292"/>
</selector>

and @drawable/button_selector will be like below to set the correct vector icon based on selected/unselected state:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_arrow_black_right_24dp" android:state_pressed="true"/>
    <item android:drawable="@drawable/ic_arrow_gray_right_24dp"/>
</selector>

and @drawable/ic_arrow_black_right_24dp is a sample black selected arrow:

<vector android:autoMirrored="true" android:height="24dp"
    android:tint="@android:color/black" android:viewportHeight="24"
    android:viewportWidth="24" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/black" android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

and @drawable/ic_arrow_gray_right_24dp is a sample gray unselected arrow:

<vector android:autoMirrored="true" android:height="24dp"
    android:tint="#969292" android:viewportHeight="24"
    android:viewportWidth="24" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#969292" android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

Final result for unselected state will be:

Sample Image

and final result for selected/clicked state will be:

Sample Image

Android add border to button without losing material theme (using drawable)

Most of the items that android comes with are simply a pre-packaged set of attributes.

It would be almost impossible to expect the Android API developers to include a pre-packaged set of attributes for every possible color/border combination, but there is always a solution!

Unfortunately,as you mentioned, the solution does reside in creating your own custom XML file which can often be intimidating until you get the hang of it. Once you do, you too will marvel at the flexibility it allows.

Specifically for your situation, there are two options...

1) Create a custom XML border drawable.

2)under your buttons background property set your new custom border drawable

3)then also set the ripple effect under your buttons xml properties by adding:

    android:foreground="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"

----OR----

A more complex way is to make a drawable like the one below. This will add the "ripple" button effect as well as a custom shadow, button color, and border color!

"For anybody reading this later that may be less experienced)

1)In your project view go to res/drawable

2)right click the folder itself and select new/drawable resource file

3)Enter a file name my_ripple_button.xml(the root doesn't really matter because you wil replace it with the below code)

4)Click on the text tab if you aren't already there

5)select all text and basically replace with the following: (creating a custom color border is basically the same steps)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/ripple">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="@dimen/button_radius_large" />
       </shape>
   </item>

    <item android:id="@android:id/background">
       <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
               android:startColor="@color/colorPrimary"
                android:type="linear" />
           <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

Is it possible to specify border in android button with keeping its background?

Use a ImageButton : use your png image as android:src and for background border add a drawable xml .

<ImageButton
    android:id="@+id/button"
    android:layout_width="75dp"
    android:layout_height="70dp"
    android:background="@drawable/border"
    android:padding="15dp"
    android:scaleType="fitCenter"
    android:src="@drawable/your_image" />

in res/drawable/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="@android:color/transparent" />
    <stroke
        android:width="3dp"
        android:color="@color/stroke_color"></stroke>
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
</shape>

To change the shape Border color programetically use:

ImageButton button = (ImageButton) findViewById(R.id.button);
GradientDrawable backgroundGradient = (GradientDrawable) button.getBackground();
backgroundGradient.setStroke(5, Color.RED);  // set stroke width and stroke color

Change background of button with border

Try this,

    Button colorButton = (Button) findViewById(R.id.colorButton);
    GradientDrawable background = (GradientDrawable) colorButton.getBackground();
    background.setColor(getResources().getColor(R.color.some_color));

Material design button with border

You can also use the Material Components for Android.

Add the dependency to your build.gradle:

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

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

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button.OutlinedButton"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

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.

Sample Image

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

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

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

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

Sample Image

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:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXX"
    android:textSize="18sp"
    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

Also

Is it possible to specify border in android button?

This is not the recommended way to do it because it causes overdraw and adds unnecessary views, Gunaseelan has the proper method.

There's no concept of borders as an attribute. The accepted way is to use a separate drawable as the background to the View (using stroke as you've mentioned and as @gunaseelan writes).

The other (not recommended) way is to enclose your Button in another View like a LinearLayout, set the background color to the desired border colour on the encapsulating View and padding on the outer View too.

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="#342334"
    android:padding="5dp"
    >
    <Button
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="whatwhaaat"
        />
</LinearLayout>

The value of the padding will indicate the thickness of the border. This method is not recommended as you end up with an extra View in your layout, and another layer of overdraw (it draws the LinearLayout then the Button on top).

Android - Border for Button