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>

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.

Creating a ProgressBar in Android with no background

I would like to create a ProgressBar with no background. I've been able to turn the background transparent, but there is still padding in the space where the background normally shows. Setting padding to 0 does not change this. Is it possible to achieve what I want without creating a custom drawable?

The issue is that the default 9Patch images used for ProgressBar have space around them. For example below is the standard holo_dark image used for the primary progress, secondary progress and background . As you can see, they each have areas of transparent space in their images.
progress_primary_holo_dark.9.png
progress_secondary_holo_dark.9.png
progress_bg_holo_dark.9.png
To achieve what you are after, you'll need to supply your own 9Patch images which do not have this extra space. Use setProgressDrawable() in your code or android:progressDrawable in xml, to set the Drawable for your ProgressBar.
You can combine all the necessary images in a single LayerList Drawable like the Android OS does. For example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/my_progress_bg" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_secondary" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_primary" />
</item>
</layer-list>
You can find all the default graphic resources used by Android in the sdk/platforms/android-xx/data/res/ folder on the computer you're developing on.

Equally distributed icons in an Android Progressbar

I'm trying something that would sound fairly easy to implement. However, it doesn't respond as expected. I'm using a Progressbar to draw a 5 state bar, where the user can click on any of the states to change the behavior of the application. My progressbar uses this drawable (just pay attention to the background element).
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/statusbar_thin" />
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:endColor="#ffeeeeee"
android:startColor="#ffeeeeee" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/statusbar_thin" />
</item>
</layer-list>
This is the #drawable/statusbar_thin.
You may see they just don't look like vertically centered spots, but it doesn't matter. The problem is that, when the image is stretched (it's a 9 patch, as you may expect), the "superior black mark that expands the pixels below it" (I don't know how it's called. Anyone?) expands them randomly (By that I mean some parts expand twice more than others).
I'm not sure if there's a trick I didn't use, or it's just Android that uses indistinctly any block, instead of all of them evenly. Any ideas on that?
EDIT:
As #sandkasten suggested, I used the draw9patch application. However, as you see, it looks perfectly distributed, but on Nexus 7, it just doesn't work.
EDIT 2:
The status bar in black background. As you see, there's a big distance between the first and the second icon, while the selector is inbetween.
EDIT 3: Such an amazing world. I started playing with the top black marks, and, despite they weren't equally distributed at last, it worked.

If I understand you right, this should be the solution. Take a look at draw9patch.bat, which shows you a preview of your image and how android strech it. It's deliverd with the android sdk.

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!