Develop Reference

Styling a AppCompatButton in v21 to have no shadow and corner radius of zero

I have a AppCompatButton defined in a XML layout, and I have set a theme for it like this:
android:theme="#style/CustomAccentOverlay"
And I have set:
android:stateListAnimator="#null"
to remove the shadow. I have two problems with this.
The height of the button is deducted the height of the shadow, even though the shadow is not shown. Should I remove the shadow in some other way, or how do I fix this?
The button has rounded corners, and I want the corners to be sharp. I can not set a background on the button, because I want to keep the standard ripple effect and that goes away if I set a background (at least I don't know how to keep it if I set a background). I have tried setting
<item name="android:bottomLeftRadius">0dp</item>
and all the other corners to the CustomAccentOverlay theme and also its corresponding style, but it does not work. How can I set the corner radius to zero on my button?
Thank you
Søren

Use the following code for the Button.
<android.support.v7.widget.AppCompatButton
android:layout_width="200dp"
android:layout_height="200dp"
android:text="Button"
android:stateListAnimator="#null"
android:elevation="0dp"
android:background="#android:color/darker_gray"
android:foreground="?attr/selectableItemBackground"
/>
I will explain the attributes.
android:elevation="0dp" and android:stateListAnimator="#null". No shadow for the button.
android:background . Set the desired color as background. It removes the rounded corners.
android:foreground="?attr/selectableItemBackground" . It gives the ripple effect when the button is pressed.
Update 1:
It seems like android:foreground attribute for View works from API 23. For below APIs, create a drawable with ripple in drawable-v21 folder and set it as background to the button,
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="NewApi"
android:color="#color/ripple_color">
<item android:drawable="#color/normal_state_button_background_color"/>
</ripple>
For pre Lollipop versions, create a drawable with selector in drawable folder with the same name.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_color"
android:state_pressed="true" />
<item android:drawable="#drawable/focused_color"
android:state_focused="true" />
<item android:drawable="#drawable/normal_color" />
</selector>

First question:How to remove shadow of a button?
Here is the answer:
Just add this attribute to your button
android:stateListAnimator="#null"
Second question: How to make the corner of button sharp without losing the standard ripple effect.
Here is the answer: But first you have to make two drawble file with same name but one for below api 21 and one for api > 21 because the ripple is only available only api > 21.So now I am showing how to create that.Read the following text carefully
Right click on the drawble folder and choose new and "Drawble resource file" and hit next then name the drawble whatever you like and press ok.Then again right click on the drawble folder and choose new and "Drawble resource file" and hit next and name the drawble exactly what you named the previous drawble folder but this time at the bottom you can see a section called "available qualifiers".Go to this section and at the very bottom you can see "Version",click it and then you can see a arrow icon at the right,click it then in the "Platform api level" add 21 and then press ok.And now if you expand drawble folder you can see two file of your created drawble file.Once for api that is below 21 and once for upper 21.Open drawble file that you have created and make sure you open that have "(v21)" at the last.Now delete everything from there and add the following code
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="?attr/colorControlHighlight" xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="0dp"/>
<solid android:color="#D6D7D7"/>
</shape>
</item>
</ripple>
And add this attribute to your button
android:background="#drawable/youdrawblefilethatyouhavecreated"
And now if you run your application you can see that there is no shadow and your button has sharp corner and if you click the ripple shows up.
Lastly,your button look something like this
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button 1"
android:background="#drawable/yourcreatddrawblefile"
android:stateListAnimator="#null"/>
Hope this help!

It really sounds like you want to use a clickable TextView rather than a Button. TextView by default will not have shadow and has sharp corners and you can attach a click listener to it. Remember, Button is just a fancy TextView with a lot of visual add-ons to it, and it sounds like you want to remove a lot of it.
If you want to keep the ripple on the TextView and define your own background, set android:foreground="?attr/selectableItemBackground"
EDIT: Even though the other answer was marked accepted, I would still argue that the OP should use a TextView with a click listener and applying the ripple effects to that than using a Button. Clickable TextViews in this manner are exactly how the Google I/O app implements all of their flat buttons that meet Material Design spec.

Use this code
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorAccent"
android:text="#string/button" />

Android - Text overlays icon on toggle button

I have a toggle button with an icon and text as shown above (pointed at with the green arrow). Most devices I have tested worked just fine.
Just with so far two Samsung tablets (Samsung Galaxy Tab 7.0 and a 10 inch Galaxy Tab) there is this problem where the text overlays the icon (pointed at with the red arrow) as shown below.
I have tried all aligments, paddings and such with no working result.
The web and SO surprisingly did not come up with a solution nor the problem.
This is the XML I am using right now for the toggle button. It is wrapped amongst other defintions into a RelativeLayout:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/label_subscriptions"
android:id="#+id/subscription_button"
android:textOff="#string/btn_subscribe"
android:textOn="#string/btn_subscribed"
android:button="#drawable/star_selector"
android:background="#android:color/transparent"
android:textColor="#color/textColor"
android:layout_toLeftOf="#+id/navigation_next_item"
android:layout_alignBottom="#+id/channel_headline_image"
/>
The #drawable/star_selector has the following definition:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/ic_like" />
<item android:state_checked="true" android:drawable="#drawable/ic_liked_fav" />
</selector>
Thank you for any hints pointing me in the right direction!

Actually its not working on lower APIs
Change
android:button="#drawable/star_selector"
to
android:drawableLeft="#drawable/star_selector"
Hope it will help.

To allow crossVersion properly you should use drawableStart instead of drawableLeft. This issue appears only with Android 4.1
If you use drawableLeft you will not be able to add a padding between text and drawable, but with drawableStart you can use the "drawablePadding" property
Regards!!!

Custom switch widget in Android 4

I am getting crazy with switch buttons in Android 4.
First of all, I have set a selector as background with two different PNG files selected from drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/form_switch_no" android:state_checked="false"/>
<item android:drawable="#drawable/form_switch_ok" android:state_checked="true"/>
<item android:drawable="#drawable/form_switch_no"/>
</selector>
but I don't know why they are x-scaled. I want to manage this size, but I have tried to change layout_width/height/weight... without succes.
I have also a custom PNG file to be used as the thumb of the switch. I also need to manage the size of this thumb, because if I set textOn and textOff propieties as "", thumb gets a very small size. Moreover, I would like to change thumb padding in respect of the background, because It does not appears centered.
Here is my Switch XML definition:
<Switch
android:id="#+id/switchUsers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/user"
android:textOn=""
android:textOff=""
android:thumb="#drawable/form_switch_slider"
android:track="#drawable/switch_user_selector" />
I have tried to change image sizes and making them nine-patch ones, but I can't reach my target.
Any help will be appreciated. Thank you!

The solucion for the extremely small slider with no text was solved with a combination of:
android:thumbTextPadding="25dp"
android:textOn=""
android:textOff=""
Then, the problem of the small padding in the same slider was a 9-patch image problem. I had to extend bottom and right black lines one more pixel simetrically.
Hope this helps someone with the same problem.

Android MapView control change background color without affecting other visual properties

I have an Android application that uses a MapView with an ImageButton control (to move to the user's current location) I've added in the top right-hand corner. The problem I am having is that the ImageButton control's background is too transparent, but changing it with android:background="#BBFFFFFF" alters both the size of the background and removes the blue "flash" that you normally see when the button is pressed - two qualities I wish to retain.
I start with something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.google.android.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="my api key"
/>
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:src="#drawable/device_access_location_found"/>
</RelativeLayout>
Which achieves something that looks like this:
So then I add:
android:background="#BBFFFFFF"
And I get this:
Note that although this is basically the level of opacity I want, changing the background has affected the padding, and also doesn't display a blue "flash" when pressed (which obviously isn't illustrated in this question).
So my question is, how can I change just the background color/opacity in the non-pressed state, while retaining the other visual qualities of the button? I had a brief read about Android styles and themes, but can't even figure out where this button is getting its style/theme from and how I would go about just overriding the background color/opacity while retaining all of the other visual features.

Issue
When you are assigning a fixed color to the a view background, you are replacing the default background in the view by the fixed color you define.
In reality, the background of a button is not a simple fixed color. It's a state list of color or drawables, which means, depending on button status (focous, selected, pressed, etc.) a different background is used, resulting in the "flash" animation you see when button is pressed. If you replace this state list by a simple fixed color, not depending on buttons status, you get a fixed background (i.e. not changing when button is pressed).
Resolution
There is a xml parameter that can be used to change the image view's alfa (i.e. transparency) which is:
android:alpha="1"
where the value 1 above can be any float between 0 and 1, being 1 the maximum opacy.
However, I believe this is not solving your issue, because you want to change the alfa of background not the image alfa, if I correctly understood your issue. Anyway the default seems to be 1.
One possibility the should work for you is to define a selector to be used as background. The selector will choose the drawable based on his status.
Example
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#android:color/darker_gray" />
<item android:drawable="#android:color/white" />
</selector>
Save the xml file above in your drawable-xxxx folder with the name my_selector
In this example I'm using standard android colors, but you can define your own colors. You need to assigne a color for each different button status that you want to have a different color.
Then you need to define your ImageView backgroung to be the selector you defined above:
<ImageButton
android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:background="#drawable/my_selector"
android:src="#drawable/device_access_location_found" />
With the above changes, the bacground color used by the button will change when the button is pressed and you can have the "flash" effect.

I ended up using a style to inherit the look of Widget.ImageButton with just a few minor tweaks for my purposes:
My /res/values/styles.xml file now looks like:
<resources>
<style name="AppTheme" parent="android:Theme.Light" />
<style name="my_loc_btn_style" parent="#android:style/Widget.ImageButton">
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginRight">8dp</item>
</style>
</resources>
And my layout file has:
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
style="#style/my_loc_btn_style"
android:src="#drawable/device_access_location_found"/>
This seems to have inherited a background from Widget.ImageButton that seems to be just slightly transparent, which is what I was after anyway, so I don't set the transparency at all now.

How can I tint a nine-patch image?

I've learned how to tint an image when it's pressed by adding an OnTouchListener in which I call setColorFilter on the image.
I've learned how to use nine-patch images as the background for Buttons and ImageButtons.
The problem is, nine-path images don't stretch if they're the src for an ImageButton, and the tint has no effect on the background image.
How can I tint a nine-patch ImageButton when it's pressed? Any suggestions?

I know it's an old question but it seems that it's the only one on this topic.
You can tint nine patch images by creating an xml resource file containing a nine patch node and a tint node. Example :
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/nine_patch_image"
android:tint="#android:color/black"/>
You may then reference this file in your background attributes :
<LinearLayout
android:id="#+id/some_id"
android:background="#drawable/xml_filename">
Hope this will help someone

So I'm 3 years late but I found a way to do this.
(I'm using Xamarin so excuse any C# formatting I miss)
#Override
protected void onDraw(Canvas canvas)
{
NinePatchDrawable bg = (NinePatchDrawable)getResources().getDrawable(R.Drawable.whatev);
bg.setBounds(0, 0, getWidth(), getHeight());
bg.setColorFilter(new PorterDuffColorFilter(color, PorterDuff.Mode.MULTIPLY));
bg.draw(canvas);
base.onDraw(canvas);
}

Another option, is using backgroundTint (available on API21 and above):
<TextView
android:id="#+id/chat_bubble_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/left_bubble"
android:backgroundTint="#color/main_color"
android:gravity="center_vertical"
android:minWidth="200dp"
android:textColor="#android:color/white"
android:visibility="visible"
tools:text="message" />

I found one way you can kinda sorta of do this. Using a purely gray-scale, semi-transparent 9-patch image as your button background, wrap the button in a view group which has your tint color as its background like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F00"
android:orientation="vertical" >
<Button
android:id="#+id/my_butt"
android:background="#drawable/my_semi_transparent_gray_9_patch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I'm a tinted 9-patch button!" />
</LinearLayout>
The main problem is that if your image has transparent edges, the tint color will show through where you don't want it, but if your image edges used a fully opaque color that matched the background of whatever container you put this thing in, it might work well enough. You also might need to write your own selector that changes those background colors for each state you care about. I'm not recommending this approach but maybe it will help someone. I agree that it's a shame that tinting isn't built into the 9-patch design because it feels stupid to maintain a bunch of identical images that differ only in tint, especially when you multiply that by a number of different drawable sizes. Even better would be for Android to natively support SVG. I've modified the open-source "svg-android" library so that with the right art I only need a single image that can be stretched and tinted as needed.

I think you'd have better results by making a separate asset for each button state. For instance, you can make a drawable xml file like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_focused"
android:state_pressed="false"
android:state_focused="true" />
<item android:drawable="#drawable/btn_default"
android:state_focused="false"
android:state_pressed="false" />
</selector>
Then create a style for your buttons like this:
<style name="PushButton">
<item name="android:background">#drawable/btn</item>
</style>
Then you should be able to style your image buttons and set the src to whatever image you want.
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
style="#style/PushButton" />