Develop Reference

Custom background of button is not setting properly

Hello I am designing this page in android (style only)
.
First 3 buttons has been designed by taking the reference from this.
But DONATE NOW button which I have designed is become transparent like this
as well as click event (statepreseed = "true")is also transparent like
.
and here is my code of background for DONATE NOW button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners
android:radius="0dp" />
<solid android:color="#33e7d283"></solid>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="4dp"
android:color="#00e9ca30"
/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<gradient
android:angle="225"
android:centerX="23%"
android:centerColor="#33f4c40e"
android:startColor="#ffdab605"
android:endColor="#ffdab605"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
</shape>
</item>
</selector>
If any one is having the solution.please help

You are using ARGB instead of RGB. Because of this you are creating image with transparent background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="0dp" />
<gradient
android:angle="225"
android:centerColor="#e7d283"
android:centerX="23%"
android:endColor="#ffdab605"
android:startColor="#ffdab605"
android:type="linear" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
Using e7d283 or ffe7d283 color-code instead of 33e7d283 might solve your problem for yellow image background.
Using 33 as alpha means you are giving only 20% opacity to your center color. That is the reason you can see background color in middle of your image.

Here you go..
Your button element should look like below.
<Button
android:id="#+id/angry_btn"
android:text="Button"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="#drawable/buttonshape"
android:shadowColor="#474747"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="3"
/>
ButtonShape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="65%"
android:centerColor="#F5FAF9"
android:startColor="#F39C12"
android:endColor="##F39C12"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
Output will look like below.

CardView's background which will respond to android:state_selected and android:state_pressed

I'm referring to the answer at https://stackoverflow.com/a/24475228/72437
The proposed answer is using drawable from Android : ?android:attr/selectableItemBackground
This is what happen when I tap on the card item. Note that, by using drawable from Android, android:state_selected="true" (when setSelected(true)) will not have any color change effect.
Hence, I would like to use my own defined drawable so that
It looks nicer.
Able to handle android:state_selected="true".
Here's my code
statelist_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/selected_background" />
<item android:state_selected="true" android:drawable="#drawable/selected_background" />
<item android:drawable="#android:color/transparent" />
</selector>
selected_background.xml
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffe1b3" />
<stroke
android:width="1px"
android:color="#fff76d3c" />
</shape>
card_row.xml
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:clickable="true"
android:foreground="#drawable/statelist_item_background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txt_label_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:text="Item Number One" />
<TextView
android:id="#+id/txt_date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
tools:text="Item Number One" />
</LinearLayout>
</android.support.v7.widget.CardView>
When I long press on the card item and perform childView.setSelected(true);, here's my outcome.
All my card content (TextViews) are blocked. How can I avoid such?
Some notes regarding using android:background
Note, when you use android:background="#drawable/statelist_item_background" with CardView itself, nothing will happen.
However, if you use android:background="#drawable/statelist_item_background" with CardView's LinearLayout, you will get the following imperfect outcome.
The highlighted color doesn't cover the entire card.
Update
Seem like this is limitation of CardView - https://code.google.com/p/android/issues/detail?id=78198 Using "foreground" as workaround is not an option as it covers card content.

After experimenting for quite some time, I can pretty much conclude that this is limitation of current CardView - https://code.google.com/p/android/issues/detail?id=78198
Don't use CardView's foreground workaround. Although it is widely being proposed, it just don't work!
My suggestion is, avoid using CardView if you need a customized selector. Replace it LayerDrawable. Here's what I had done.
card.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#ffededed" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe8e8e8" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe1e1e1" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffdbdbdb" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffd5d5d5" />
<corners android:radius="2dp" />
</shape>
</item>
<!--
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffcfcfcf" />
<corners android:radius="2dp" />
</shape>
</item>
-->
<item>
<shape >
<solid android:color="#ffffffff" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
card_selected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffededed" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe8e8e8" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe1e1e1" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffdbdbdb" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffd5d5d5" />
<corners android:radius="2dp" />
</shape>
</item>
<!--
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffcfcfcf" />
<corners android:radius="2dp" />
</shape>
</item>
-->
<item>
<shape>
<solid android:color="#ffffe1b3" />
<stroke
android:width="1px"
android:color="#fff76d3c" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
statelist_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<item android:state_pressed="true" android:drawable="#drawable/card_selected" /> <!-- pressed -->
<item android:state_selected="true" android:drawable="#drawable/card_selected" /> <!-- pressed -->
<item android:drawable="#drawable/card" />
</selector>
layout.xml
<!-- A CardView that contains a TextView -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:padding="10dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/statelist_item_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true" >
<TextView
android:id="#+id/txt_label_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:text="Item Number One" />
<TextView
android:id="#+id/txt_date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
tools:text="Item Number One" />
</LinearLayout>
You will get the pretty nice outcome.

I've just tried MaterialCardView and this works:
<com.google.android.material.card.MaterialCardView
android:id="#+id/material_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_vertical_margin"
app:cardCornerRadius="4dp"
app:cardBackgroundColor="#color/selector_background_color"
app:strokeWidth="2dp">
selector_background_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/white" android:state_activated="true"/>
<item android:color="#android:color/darker_gray" android:state_activated="false"/>
In the Activity/Fragment:
material_card_view.setOnClickListener {
it.isActivated = !it.isActivated
}
For the strokeColor though, you can't use a selector. You will have to do it programmatically if you want the stroke color to change as per selector state.
Example for state_activated:
val colorStateList: ColorStateList =
ResourcesCompat.getColorStateList(resources,
R.color.selector_stroke_color, null)!!
val colorForState =colorStateList.getColorForState(intArrayOf(android.R.attr.state_activated), colorStateList.defaultColor)
material_card_view.strokeColor = colorForState

All my card content (TextViews) are blocked. How can I avoid such?
Your blocked issue can easily be solved with some color theory knowledge. Instead of using the given peach color, you could use a variant of the peach shade with a higher transparency.
Color Code scheme in Android xxyyyyyy
xx is your transparency level, and y's are your color.
xx max value is : ff // this is fully visible
xx min value is : 00 // this is full invisible
So by playing around on the color wheel, you can get the right effect with the right amount of transparency needed for your view.

for the background not covering the entire card issue, it is due to the cornerRadius drawing limitation. There are two solutions for this:
Disable round corner for your card will resolve the problem. app:cardCornerRadius="0dp"
You can retain cardCornerRadius but you need to set app:cardPreventCornerOverlap="false"

MaterialCardView has ripple effect and doesn't need a custom background drawable as opposed to CardView.
That handled the android:state_selected and android:state_pressed for my use case.

I believe you are misunderstanding the question you referred to. The question is how to get the ripple effect:
Where I think you are just looking for click feedback?
If so, try setting the background drawable:
android:background="#drawable/statelist_item_background"
EDIT:
On you background color xml, you need to give it an alpha. It is being drawn in the front, so give it an alpha of .1f and see how that looks and go from there.
Try using color 50F76D3C Then use is it in the foreground like you were originally.

How can I add depth to a shape

I need to make my EditText look like its got depth like in the image below.
I have this shape I don't know what to add to it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>

you can accomplish that with a drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--background to compensate the transparency under shadow and glow (for bigger depth values)-->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark" />
</shape>
</item>
<!--top, dark, inner shadow-->
<item
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1A000000" />
</shape>
</item>
<!--bottom, light, outer glow-->
<item
android:top="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#4DFFFFFF" />
</shape>
</item>
<!--your color-->
<item
android:top="#dimen/depth"
android:bottom="#dimen/depth">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#color/primary_dark />
</shape>
</item>
</layer-list>
and define a dimen in dimens.xml
<dimen name="depth">2dp</dimen>
by changing of the dimen you can change the depth of the drawable

This might also make your field look close to the effect but with a little more depth (see below). It might be worth adding the background to a outer view to wrap the edit text too so you can indent the text if you haven't already done this.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- outer shine -->
<item
android:top="4dp"
android:left="4dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#1597FB" />
</shape>
</item>
<!-- inner shadow -->
<item>
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#004173" />
</shape>
</item>
<!-- inner background -->
<item
android:top="2dp"
android:left="2dp">
<shape android:shape="rectangle">
<corners android:radius="50dp" />
<solid android:color="#006EC3" />
</shape>
</item>
</layer-list>
And then you EditText as below;
<FrameLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:background="#drawable/rounded_rect_layered_combined">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:textColor="#ffffff"/>
</FrameLayout>

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>

Android: Adding an Image Background to a Button in XML File [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
how to set image button backgroundimage for different state?
I have the following declaring how a button should be drawn (uabutton.xml):
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<corners
android:radius="3dp" />
<gradient
android:startColor="#000000"
android:endColor="#e9e8e9"
android:angle="270" />
</shape>
</item>
<item android:state_focused="true" >
<shape>
<corners
android:radius="3dp" />
<gradient
android:endColor="#ffffff"
android:startColor="#b9b9b9"
android:angle="270" />
</shape>
</item>
<item android:state_enabled="false">
<shape>
<corners
android:radius="3dp" />
<gradient
android:startColor="#f0aa9f"
android:endColor="#e21f00"
android:angle="270" />
</shape>
</item>
<item>
<shape>
<corners
android:radius="3dp" />
<gradient
android:startColor="#ff8a0e"
android:endColor="#e9e8e9"
android:angle="270" />
</shape>
</item>
</selector>
My question is, I would like to add an image to the background of each button. Where, if anywhere, in the above would I add the image.
The button is added a to a RelativeLayout:
<Button
android:id="#+id/aboutualocationbtn"
android:text="Menu"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/uabutton"/>

Wrap it in a Layer List drawable.

android:background="#drawable/uabutton"
is pointing to a file called uabutton in your drawables folder as the background
ie uabutton.jpg or uabutton.png