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

Issue

I have a simple button

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/add"
        android:backgroundTint="@color/add_bg"
        android:textColor="@color/add_fg"
        <!--android:borderColor?="@color/button_border"-->
        android:text="@string/add"/>

I would like to have white background, blue text and blue border around. I am aware that I can achieve that through a drawable as shown here and in numerous other places. However I have observed that if you add a drawable to the button then it will lose all of its material properties (such as shadow and also upon clicking having the fancy ripple animation). So how would I add a border around the button without losing the material theme animations (shadow and tipple animation on click)?

Solution

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>

Answered By - Paris B. G.