Develop Reference

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

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

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>

How to change error background of TextInputLayoutText error when using a border?

I'm using Android Design Library's TextInputLayout and TextInputEditText with a background. When setting an error, the field is highlighted with a rather jarring red background that my client dislikes.
I can style away the red background if I don't include the field border, but not if I use one. I've tried all the styling options that I've seen in the relevant S/O answers with no success.
I also tried setting the background in code after setting the error as described in the top answer here, and the red background is temporarily removed from the input field, but reappears as soon as the field is reentered. I tried adding a focus change listener and redoing the setBackgroundResource call, but I still get the red background. Stepping through with a debugger shows that there is a frame choreographer message posted that eventually adds the background color back. Since this approach always felt like a work-around, I haven't tried to post my own messages to set it back.
It appears to me that my desired background resource is being replaced by a background color one. Is there a way to style that away that I'm just not seeing?

i've managed to do it by putting transparent background like this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:top="5dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#color/colorWhite" />
<corners android:radius="50dp" />
<padding
android:bottom="13dp"
android:left="13dp"
android:right="13dp"
android:top="13dp" />
</shape>
</item>
</layer-list>

How to change the background color of EditText without removing the standard bottom border

After the call of EditText.setBackgroundColor(Color.RED) I see only a red rectangle with text inside it, but I want to change only the text background and to keep the standard bottom border which is grey when the field has no focus and blue if it has focus. Can I do it programmatically?
I want to change the text background to red if the input is invalid and to transparent if it is valid.

I think the best way is to work with drawable/shape.xml as background and upon logic code situation call EditText.setBackground(some_other_shape.xml). Here is an example for shape file xml demonstrating how to use:
Border color ("stroke"): In this example some custom color from colors.xml
Fill color ("solid"): In this example Android default transparent color
Even image icon inside
<!--Example for custom shape file xml design-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#mipmap/icon_image" />
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#color/orange_primary" />
</shape>
</item>
</layer-list>
So just prepare several shapes for each situation you need. Another approach is to work with layout params etc. but I think this one is faster and gives more control for custom design in easy to understand code.

Adding a border to an AlertDialog

I am trying to add a border to an alert dialog. I am hoping to make it look like this:
The best solution I have found thus far is to use a nine patch drawable as the background for the dialog.
The problem with this is that I have not found a way to make a nine patch background that actually gives the dialog a consistent white line around it. This has been my best attempt thus far (sorry it is a little hard to see...) :
The problem is that this produces a dialog like this:
The problems here are twofold; the lines at the sides are way too thick, and the lines at the top are kind of faded by the shadow.
My only ideas are to either find a working nine patch that gives a consistently thick border, or to find a way to get the 'main layout' of the alert dialog, so I can add a padding to that directly.
What is the best way to go about setting up a border on an Alert Dialog like this?

The answer by questioner was very close to what I wanted, but it still left a big black line around the dialog that I was not interested in.
I deleted one of the layers from the layer list, and customised the padding on the white border. I also did not set the background to transparent as suggested would be a good idea in the comments.
The shape the is inside the item is to give the background the same curved edges on a dialog (if you look really closely on 3.0+, you can see a few pixels of round corners).
In a dialog_border.xml file in the drawable folder, I had this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="6dp"
android:left="13dp"
android:right="13dp"
android:bottom="6dp">
<shape android:shape="rectangle" >
<solid android:color="#color/offWhite" />
<corners
android:radius="3dp"/>
</shape>
</item>
</layer-list>
And in my style I had this:
<style name="DialogTheme" parent="android:Theme.Holo.Dialog">
<item name="android:windowBackground">#drawable/dialog_border</item>
</style>
Although it could probably be set programatically rather than in the style if necessary.

In your dialog's xml set following background for top level view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white"/>
<item
android:bottom="1dp"
android:drawable="#color/black"
android:left="1dp"
android:right="2dp"
android:top="2dp">
</item>
</layer-list>
You can customise border width on each side.

Complex custom button states in Android

in my current project I'm building an App with API 10 which should look like an ICS App.
Since my GUI is not very complex I can build this all manually, but I have some problems with button states.
I googled a lot and found nothing that would work for me so I would appreciate any help ;)
I designed an action bar with google ICS stock icons. When for example someone touches the search-loupe-icon, which has an 8dp padding around it, it's background color should change to a defined highlight-color-value.
So now you would suggest probably a selector drawable. But my case is: I have an icon-drawable which has an background-color, which I want to change. I dont want to change the icon, so since I cant change the backgroundcolor from a selector-xml this doesn't work.
(I thought I can setup multiple drawable-xml with my icon static bg colors so that I could refer with one selector to those different colored icons, but since a shape-drawable-xml cannot have a source and an bitmap-drawable-xml cannot have a background color, this is no sollution.)
If I try to change the background color in my onclick-listener (also tried onTouch) with:
ImageButton searchIcon = (ImageButton) findViewById(R.id.upper_actionbar_icon_search);
searchIcon.setBackgroundColor(R.color.android_ics_blue_light);
The Icon gets a dark grey bg color. This is also true for any other color altough nothing lies on top of the ImageButton. I also tried an ImageView.
So could someone explain to my please how the hell I can define a highlighted bg color-image without any hacks (default-gone image that lies above the icon and is set visible onclick).
Thanks so much!!

Okay the solution is simple.
Write yourself a drawable selector which looks like this:
<?xml version="1.0" encoding="utf-8"?>
<item android:state_selected="true">
<shape android:shape="rectangle">
<solid android:color="#color/android_ics_blue_light"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/android_ics_blue_light"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/light_grey"/>
</shape>
</item>
Within your ImageButton code define your icon as src and your new drawable as background, like this:
<ImageButton
<!-- ... -->
android:src="#drawable/icon_search"
android:background="#drawable/actionbar_ontouch"
/>
Works like a charm!