Develop Reference

Custom Button with Background color

I want to create four custom buttons(As Roundedrects in iOS) on the top of the screen.
Using the Custom xml with shape tag , I can get it .
Custom.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#F9FAFC" />
<corners android:radius = "20dp"/>
</shape>
I am using it as:
android:background = "#drawable/custom"
But I am getting only the color(grey) set as in the custom xml for all the buttons, which shouldn't.
I want to set different Hexa(#FF0000 ... ) colors to that custom buttons.After lot of research on this site, I think it will be better to rise a question.
Any of you geeks can point the link or please help me with some code , how to achieve above requirement.
PLEASE NOTE: I don't need three states of the button as Pressed, Focused, Disabled. I already have four buttons with Square Shape. Now I want to create them as Rounded Rect shape to make it look Attractively.As for the case I can't create 4 CUSTOM files in drawable folder for 4 BUTTONS. Because in future my requirement may extend to some 8-10 buttons or even more .*
Thank you.

you need to use item tags. here is an example containing button states, solid and gradient colors, strokes, paddings and corner radius. you need to put this into selector tags.
<item android:state_enabled="false" >
<shape>
<solid
android:color="#474141" />
<stroke
android:width="1dp"
android:color="#474141" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="true" >
<shape>
<solid
android:color="#f3ae1b" />
<stroke
android:width="1dp"
android:color="#f3ae1b" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#990000"
android:endColor="#990000"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#990000" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>

How to provide shadow to Button

As you can see in image, I want shadow behind a Button. I have created Button with rounded corners. But problem is I can't generate a shadow behind that Button. How can I achieve this?

Use this approach to get your desired look.
button_selector.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#D6D6D6" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270"
android:endColor="#E2E2E2" android:startColor="#BABABA" />
<stroke android:width="1dp" android:color="#BABABA" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
And in your xml layout:
<Button
android:background="#drawable/button_selector"
...
..
/>

For android version 5.0 & above
try the Elevation for other views..
android:elevation="10dp"
For Buttons,
android:stateListAnimator="#anim/button_state_list_animator"
button_state_list_animator.xml - https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/button_state_list_anim_material.xml
below 5.0 version,
For all views,
android:background="#android:drawable/dialog_holo_light_frame"
My output:

Here is my button with shadow cw_button_shadow.xml inside drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<layer-list>
<!-- SHADOW -->
<item>
<shape>
<solid android:color="#color/red_400"/>
<!-- alttan gölge -->
<corners android:radius="19dp"/>
</shape>
</item>
<!-- BUTTON alttan gölge
android:right="5px" to make it round-->
<item
android:bottom="5px"
>
<shape>
<padding android:bottom="5dp"/>
<gradient
android:startColor="#1c4985"
android:endColor="#163969"
android:angle="270" />
<corners
android:radius="19dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="5dp"
android:bottom="10dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list>
<!-- SHADOW -->
<item>
<shape>
<solid android:color="#102746"/>
<corners android:radius="19dp"/>
</shape>
</item>
<!-- BUTTON -->
<item android:bottom="5px">
<shape>
<padding android:bottom="5dp"/>
<gradient
android:startColor="#1c4985"
android:endColor="#163969"
android:angle="270" />
<corners
android:radius="19dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="5dp"
android:bottom="10dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
How to use. in Button xml, you can resize your height and weight
<Button
android:text="+ add friends"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cw_button_shadow" />

If you are targeting pre-Lollipop devices, you can use Shadow-Layout, since it easy and you can use it in different kind of layouts.
Add shadow-layout to your Gradle file:
dependencies {
compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
}
At the top the xml layout where you have your button, add to the top:
xmlns:app="http://schemas.android.com/apk/res-auto"
it will make available the custom attributes.
Then you put a shadow layout around you Button:
<com.dd.ShadowLayout
android:layout_marginTop="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:sl_shadowRadius="4dp"
app:sl_shadowColor="#AA000000"
app:sl_dx="0dp"
app:sl_dy="0dp"
app:sl_cornerRadius="56dp">
<YourButton
.... />
</com.dd.ShadowLayout>
You can then tweak the app: settings to match your required shadow.
Hope it helps.

I've tried the code from above and made my own shadow which is little bit closer to what I am trying to achieve. Maybe it will help others too.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:left="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<gradient
android:angle="315"
android:endColor="#android:color/transparent"
android:startColor="#android:color/black"
android:type="radial"
android:centerX="0.55"
android:centerY="0"
android:gradientRadius="300"/>
<padding android:bottom="1dp" android:left="0dp" android:right="3dp" android:top="0dp" />
</shape>
</item>
<item android:bottom="2dp" android:left="3dp">
<shape>
<corners android:radius="1dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
</layer-list>
</item>
</selector>

Try this if this works for you
android:background="#drawable/drop_shadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="3dp"
android:paddingTop="3dp"
android:paddingRight="4dp"
android:paddingBottom="5dp"

Sample 9 patch image with shadow
After a lots of research I found an easy method.
Create a 9 patch image and apply it as button or any other view's background.
You can create a 9 patch image with shadow using this website.
Put the 9 patch image in your drawable directory and apply it as the background for the button.
mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);

Since none of the answers here really address the question, I wanted to point out https://github.com/Devlight/ShadowLayout (not my project). This is a simple Android layout you can wrap around anything to give it a shadow. The library is a single class and only ~250 lines. The README says deprecated, but it works great.
Wrapping all your views isn't ideal, but until Android provides a standard mechanism to introduce a shadow, or you want to draw all of your button states as bitmaps that include the shadow pixels, this is the best option I could fine.

Adding the below 2 lines worked for me
android:elevation="10dp"
android:stateListAnimator="#null"

You can try this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:left="1dp" android:top="3dp">
<shape>
<solid android:color="#a5040d" />
<corners android:radius="3dip"/>
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<item android:left="0dp" android:top="0dp">
<shape>
<solid android:color="#99080d" />
<corners android:radius="3dip"/>
</shape>
</item>
<item android:bottom="3dp" android:right="2dp">
<shape>
<solid android:color="#a5040d" />
<corners android:radius="3dip"/>
</shape>
</item>
</layer-list>
</item>

How to make button transparent in my app yet visible

I want my buttons to be transparent as I have an image on the activity as a background.
If the buttons are not transparent, those buttons are covering the image and image background seems useless.
If I use android:background="#android:color/transparent", it is making my button completely invisible except the text on it. So, I need the button to be transparent provided it should be visible that there is a button. Code snippet would be appreciated.
<Button
android:id="#+id/new_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent" //this line makes the button completely invisible.
android:text="#string/label" />

If you just want white borders, and the text/icons in the button, but the button background transparent create the following drawable (I named it button_border.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<stroke
android:color="#android:color/white"
android:width="1dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
And use it as a background for the button:
<Button
.
.
.
android:background="#drawable/button_border"
/>
I'd guess there is a more elegant way to do it with themes, but I'm not that far yet. In the button_border drawable you can add rounded corners and whatnot...

android:background="#A0FFFFFF"
I've hard coded the colour, but you should store it in colors.xml
Modify the first two characters, A0, to adjust how much transparency you want and the last 6 characters the color you want.

Apply selector for button, like this
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape>
<solid
android:color="#color/color_1_end" />
<stroke
android:width="1dp"
android:color="#android:color/transparent" /> // transparent patametr
<corners
android:radius="4dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape></item>
<item>
<shape>
<gradient android:angle="270"
android:endColor="#color/color_1_start"
android:startColor="#color/color_1_end" /> // maybe transparent
<stroke
android:width="1dp"
android:color="#color/color_1_start" /> //maybe transparent
<corners android:radius="4dp" />
<padding android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
Modify this for you =)

Apply border for button
<item>
<shape>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#FF000000" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<gradient
android:angle="315"
android:centerColor="#FFFFFFFF"
android:endColor="#FFB0B0B0"
android:startColor="#FFB0B0B0" />
</shape>
</item>
<Button
android:id="#+id/btnLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_margin="7dip"
android:background="#drawable/button_border"
android:scaleType="centerInside"
/>

Just try to use below code in java
<br/>
button.getBackground().setAlpha(int);<br/>
correct range of input parameter is between 1 and 255 and the '1' is more transparent.
common pitfall is using:<br/>
button.setAlpha(float);<br/>
that make all button transparent.

How to have rounded corners with repeat?

I am trying for repeat for buttons. I am able to get repeat for regular background type. But i was not able to find right, left and center using the repeat xml file.
If you know some solution with the xml file please help me.
Thanks in advance
The repeat xml file i have used is
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<bitmap
android:src="#drawable/barslice"
android:tileMode="repeat"
android:dither="true"/>
</item>
The button i require is:

you may get round-corner gradient buttons without even using images.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
and simply set it as background to your button, textview or whatever you want

This will be nicely handled by 9 patch image.
you will have an image like this
and android will handle it automatically.
Just set it as background of any button.
Note: image for other states like pressed, focused and disabled should also be provided otherwise it will not change buttons state.

You can use 9-patch images. Check the following links.
http://developer.android.com/guide/topics/resources/drawable-resource.html#NinePatch
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Custom Buttons in Android: How to get border/edge/frame when I read the background from xml?

Using Android Shapes in xml I have defined a gradient which I use as the background for a button.
This all works nice, but there's no edge surrounding the button. I would like it to look similar to the normal Android button but I need more flexibility to control the color and look.
The shape is defined as follows:
<?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" color="#000000" />
</shape>
I would expect the border to be set in the xml. Why doesn't "stroke" fix it? Stroke doesn't seem to do anything.
I checked the Android Developer spec, but couldn't find the answer there:
http://developer.android.com/guide/topics/resources/drawable-resource.html
I have also looked through all the properties of the Android Button, but as expected there's no such parameter, probably since it's built into the normal Android button. Btw, I checked ImageButton properties too.
Can someone please help?
I know there's the alternative to make an image with proper edges and use an ImageButton, but there really should be a way to fix this programmatically.
Thanks!
Anna

I had this problem a while ago. While I don't quite remember why I made each decision, the way I solved it was to use a a shape layer-list. This lets you stack one shape on top of another. For example, the following XML creates a shape with a solid black outline 2px wide, with a 'grey to white to grey' gradient across the middle:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<solid android:color="#FF000000"/>
<corners android:radius="3dp"/>
</shape>
</item>
<item>
<shape>
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"/>
<gradient android:startColor="#FFB0B0B0"
android:centerColor="#FFFFFFFF"
android:endColor="#FFB0B0B0"
android:angle="315"/>
</shape>
</item>
</layer-list>
If you want to be able to change that color dynamically at runtime, then things get a lot messier. Again, the details of why I had to do things a certain way are hazy, but I ended up having to create a custom view class which contained a custom ShapeDrawable. I started off looking at the examples from the ApiDemos app which comes with the SDK - it's a very good resource.
EDIT: Another reason your stroke might not be appearing is that you forgot the android: before the color="...." bit.

I've had the same problem, what i observed is stroke is not applying to button as border at design time but at run time i see the border.
I jst used the following same code
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#color/black" />
<stroke android:width="1px" android:color="#color/red" />
</shape>
as steve hanley said abvoe you miss the android: for the color attribute.
Hope this helps somebody....

Probably much to late, but you have to add an extra ff before the color.
<stroke android:width="5px" color="#ff000000" />
Greets

Use ImageButton
<ImageButton
android:layout_width="40dp"
android:layout_height="30dp"
android:src="#drawable/left_arrow"
android:background="#drawable/button_selector"
android:gravity="center"/>
Use drawable selector to ImageButton and define your properties
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#color/startColor"
android:endColor="#color/endColor"
android:angle="270" />
<stroke
android:width="0.5dp"
android:color="#color/borderColor" />
<corners
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
<item android:state_focused="true" >
<shape>
<gradient
android:startColor="#color/startColor"
android:endColor="#color/endColor"
android:angle="270" />
<stroke
android:width="0.5dp"
android:color="#color/borderColor" />
<corners
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#color/startColor"
android:endColor="#color/endColor"
android:angle="270" />
<stroke
android:width="0.5dp"
android:color="#color/borderColor" />
<corners
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>

<item android:state_enabled="false" android:drawable="#drawable/button_disabled" />
<item android:state_focused="true" android:drawable="#drawable/button_highlighted"/>
<item android:state_pressed="true" android:drawable="#drawable/button_highlighted"/>
<item>
<shape>
<gradient android:startColor="#fdfdfd" android:endColor="#f0f0f0" android:angle="270" />
<stroke android:width="1dp" android:color="#56390a" />
<corners android:radius="3dp" />
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
</shape>
</item>
Adding stroke color #56390a will solve the problem.