How to make shadow around LinearLayout? - android

I tring to make shadow around linearLayout like on image below (on top):
I`m using layer-list with shape, but all bottom shadow owerlapping by white area (see image above). All this view looks like:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:color/transparent" >
<LinearLayout
android:id="#+id/listView_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="45dp"
android:background="#color/text_white">
<!-- ListView to be shown on widget -->
<ListView
android:id="#+id/listViewWidget"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- Empty view is show if list items are empty -->
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="20sp"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/widget_toolbar"
android:orientation="vertical"
android:background="#drawable/layout_card_view"/>
</FrameLayout>
How to make this?

You must use , this example has a shadow and item with background white, you can use and adjust to your preference.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
You can add more drop shadow how you need. Check out the color in every one.

Shadow effect using drawable :
1) Create a shadow 9 patch image.
2) Set that 9 patch image as the layout background.
use this generator to create 9 patch shadow image.

Try this...
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>

You can use this 1 st way
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item><layer-list>
<item android:right="7dp" android:top="3dp"><shape>
</shape></item>
<item ><shape>
<gradient android:angle="270" android:endColor="#FFFFFF" android:startColor="#BABABA" />
<padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
</shape></item>
</layer-list></item>
</layer-list>
2nd way
You can use 9 Patch Image .

Add ll_shadow.xml file to res/drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
USE
<LinearLayout
android:background="#drawable/ll_shadow"/>

Use this code and create one shedow.xml file in drawable and then use as a background in your layout file to get desire output.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#your_shadow_color" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- Green Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#your_view_background_color" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>

Related

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.

gradient at two edges of a layout android [duplicate]

Is it possible to add a drop shadow to a custom shape in Android? After looking through the documentation, I only see a way to apply a text shadow.
I've tried this with no luck:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#90ffffff"/>
<corners android:radius="12dp" />
<item name="android:shadowColor">#000000</item>
<item name="android:shadowRadius">5</item>
<item name="android:shadowDy">3</item>
</shape>
After Lots of search finally I got this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#d8d8d8" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>
This is how I do it:
Code bellow for one button STATE:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "background shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#cc2b2b" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>
Then you should have a selector with diferent versions of the button, something like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_button_red_pressed" android:state_pressed="true"/> <!-- pressed -->
<item android:drawable="#drawable/ic_button_red_selected" android:state_focused="true"/> <!-- focused -->
<item android:drawable="#drawable/ic_button_red_selected" android:state_selected="true"/> <!-- selected -->
<item android:drawable="#drawable/ic_button_red_default"/> <!-- default -->
</selector>
hope this can help you..good luck
This is my version of a drop shadow. I was going for a hazy shadow all around the shape and used this answer by Joakim Lundborg as my starting point. What I changed is to add corners to all the shadow items and to increase the radius of the corner for each subsequent shadow item. So here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#02000000" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#05000000" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10000000" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#15000000" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20000000" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#25000000" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#30000000" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#0099CC" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
I think this method produces very good results:
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#00CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#10CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#20CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#30CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#50CCCCCC"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke android:color="#CCC" android:width="1dp"/>
<solid android:color="#FFF" />
<corners android:radius="2dp" />
</shape>
</item>
The following worked for me: Just save as custom_shape.xml.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000"/>
<corners android:radius="12dp" />
</shape>
</item>
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#90ffffff"/>
<corners android:radius="12dp" />
</shape>
</item>
</layer-list>
I would suggest a small improvement to Bruce's solution which is to prevent overdrawing the same shape on top of each other and to simply use stroke instead of solid.
It would look like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#02000000" android:width="1dp" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#05000000" android:width="1dp" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#10000000" android:width="1dp" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#15000000" android:width="1dp" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#20000000" android:width="1dp" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#25000000" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#30000000" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
Lastly I wanted to point out for people who would like a shadow in a specific direction that all you have to do is set the top, bottom, left or right to 0dp (for a solid line) or -1dp (for nothing)
Old question, but Elevation, available with Material Design now provides a shadow to any views.
<TextView
android:id="#+id/myview"
...
android:elevation="2dp"
android:background="#drawable/myrect" />
See the docs at https://developer.android.com/training/material/shadows-clipping.html
If you don't mind doing some custom drawing with the Canvas API, check out this answer about drop shadows. Here's a follow-up question to that one which fixes a problem in the original.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/white" >
</solid>
<stroke
android:width="1dp"
android:color="#color/LightGrey" >
</stroke>
<padding
android:bottom="5dp"
android:left="2dp"
android:right="2dp"
android:top="5dp" >
</padding>
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:radius="12dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<gradient
android:angle="90"
android:centerColor="#android:color/white"
android:centerY="0.2"
android:endColor="#99e0e0e0"
android:startColor="#android:color/white"
android:type="linear" />
</shape>
This question may be old, but for anybody in future that wants a simple way to achieve complex shadow effects check out my library here https://github.com/BluRe-CN/ComplexView
Using the library, you can change shadow colors, tweak edges and so much more. Here's an example to achieve what you seek for.
<com.blure.complexview.ComplexView
android:layout_width="400dp"
android:layout_height="600dp"
app:radius="10dp"
app:shadow="true"
app:shadowSpread="2">
<com.blure.complexview.ComplexView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:color="#fdfcfc"
app:radius="10dp" />
</com.blure.complexview.ComplexView>
To change the shadow color, use app:shadowColor="your color code".
9 patch to the rescue, nice shadow could be achieved easily
especially with this awesome tool -
Android 9-patch shadow generator
PS: if project won't be able to compile you will need to move black lines in android studio editor a little bit
I think this drop shadow value is good for most cases:
<solid android:color="#20000000" />
if you need a straight line shadow (like in bottom of toolbar) you can also use gradient xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="linear"
android:angle="-90"
android:startColor="#19000000" <!-- black transparent -->
android:endColor="#00000000" /> <!-- full transparent -->
</shape>
hope this help some one
For some reason shadows don't work if you set <solid> AND <stroke> on your custom background drawable. Creating a <layer-list> with separate layers for fill and borders fixes the issue:
<?xml version="1.0" encoding="utf-8"?>
<!-- Separate layers for solid and stroke, because no shadows get drawn otherwise (using elevation) -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/card_default" />
<corners android:radius="#dimen/card_corner_radius" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke android:color="#color/card_border" android:width="#dimen/card_border_width"/>
<corners android:radius="#dimen/card_corner_radius" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="3dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle">
<gradient
android:startColor="#color/white"
android:endColor="#color/gray"
android:angle="270"
android:dither="false"/>
<corners android:radius="#dimen/_20dp" />
</shape>
</item>
<item
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
<corners android:radius="#dimen/_20dp" />
</shape>
</item>
</layer-list>
Just set elevation to something like 10.
https://developer.android.com/training/material/shadows-clipping

How to create rounded shadow - Android

How to create shadow as in oval of picture to a linearlayout
I can create shadow using following script but it's thickness from left to write is same
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFFFFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
I need shadow which is thick in center area but narrow in both sides left and right.
I would suggest you to create a 9patch and use it, but in your case it might not be the best practise. So maybe you can try to use radial gradient, but it will be variable device to device... To have radial gradient you can try something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:endColor="#00000000"
android:gradientRadius="360"
android:startColor="#000000"
android:type="radial" />
</shape>
</item>
</layer-list>
Edit: Second thought, probably 9patch is best case for you...

How to border only left, top and bottom for TextView

Here is my coding. Here is design blue color for TextView's 4 border. What I want is to design only for 3 borders (top, left and bottom).
<?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="0dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ffffff"
android:endColor="#ffffff"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="0dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
</selector>
Below code placed at the bottom of height of 1dp, you have to play with this for other sides
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
<shape>
<solid android:color="#535353" />
</shape>
</item>
<!-- This is the main color -->
<item android:bottom="1dp">
<shape>
<solid android:color="#252525" />
</shape>
</item>
</layer-list>
Refer this discussion Open-sided Android stroke?
This is a quick solution (probably dumb), add android:translationX="2dp" on your TextView and you can add android:paddingRight="2dp" to make up for lost space.
Try like this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:bottom="1dp" android:left="1dp" android:right="0dp"
android:top="1dp"/>
<solid android:color="#000"/>
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#color/white"/>
</shape>
</item>
</layer-list>

Add shadow to custom shape on Android

Is it possible to add a drop shadow to a custom shape in Android? After looking through the documentation, I only see a way to apply a text shadow.
I've tried this with no luck:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#90ffffff"/>
<corners android:radius="12dp" />
<item name="android:shadowColor">#000000</item>
<item name="android:shadowRadius">5</item>
<item name="android:shadowDy">3</item>
</shape>
After Lots of search finally I got this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#d8d8d8" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>
This is how I do it:
Code bellow for one button STATE:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "background shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#cc2b2b" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- over bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>
Then you should have a selector with diferent versions of the button, something like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_button_red_pressed" android:state_pressed="true"/> <!-- pressed -->
<item android:drawable="#drawable/ic_button_red_selected" android:state_focused="true"/> <!-- focused -->
<item android:drawable="#drawable/ic_button_red_selected" android:state_selected="true"/> <!-- selected -->
<item android:drawable="#drawable/ic_button_red_default"/> <!-- default -->
</selector>
hope this can help you..good luck
This is my version of a drop shadow. I was going for a hazy shadow all around the shape and used this answer by Joakim Lundborg as my starting point. What I changed is to add corners to all the shadow items and to increase the radius of the corner for each subsequent shadow item. So here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#02000000" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#05000000" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10000000" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#15000000" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20000000" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#25000000" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#30000000" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#0099CC" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
I think this method produces very good results:
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#00CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#10CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#20CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#30CCCCCC"/>
</shape>
</item>
<item>
<shape>
<padding
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
android:left="1dp"/>
<solid android:color="#50CCCCCC"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke android:color="#CCC" android:width="1dp"/>
<solid android:color="#FFF" />
<corners android:radius="2dp" />
</shape>
</item>
The following worked for me: Just save as custom_shape.xml.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000"/>
<corners android:radius="12dp" />
</shape>
</item>
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#90ffffff"/>
<corners android:radius="12dp" />
</shape>
</item>
</layer-list>
I would suggest a small improvement to Bruce's solution which is to prevent overdrawing the same shape on top of each other and to simply use stroke instead of solid.
It would look like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#02000000" android:width="1dp" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#05000000" android:width="1dp" />
<corners android:radius="7dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#10000000" android:width="1dp" />
<corners android:radius="6dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#15000000" android:width="1dp" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#20000000" android:width="1dp" />
<corners android:radius="4dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#25000000" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke android:color="#30000000" android:width="1dp" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
Lastly I wanted to point out for people who would like a shadow in a specific direction that all you have to do is set the top, bottom, left or right to 0dp (for a solid line) or -1dp (for nothing)
Old question, but Elevation, available with Material Design now provides a shadow to any views.
<TextView
android:id="#+id/myview"
...
android:elevation="2dp"
android:background="#drawable/myrect" />
See the docs at https://developer.android.com/training/material/shadows-clipping.html
If you don't mind doing some custom drawing with the Canvas API, check out this answer about drop shadows. Here's a follow-up question to that one which fixes a problem in the original.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/white" >
</solid>
<stroke
android:width="1dp"
android:color="#color/LightGrey" >
</stroke>
<padding
android:bottom="5dp"
android:left="2dp"
android:right="2dp"
android:top="5dp" >
</padding>
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:radius="12dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<gradient
android:angle="90"
android:centerColor="#android:color/white"
android:centerY="0.2"
android:endColor="#99e0e0e0"
android:startColor="#android:color/white"
android:type="linear" />
</shape>
This question may be old, but for anybody in future that wants a simple way to achieve complex shadow effects check out my library here https://github.com/BluRe-CN/ComplexView
Using the library, you can change shadow colors, tweak edges and so much more. Here's an example to achieve what you seek for.
<com.blure.complexview.ComplexView
android:layout_width="400dp"
android:layout_height="600dp"
app:radius="10dp"
app:shadow="true"
app:shadowSpread="2">
<com.blure.complexview.ComplexView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:color="#fdfcfc"
app:radius="10dp" />
</com.blure.complexview.ComplexView>
To change the shadow color, use app:shadowColor="your color code".
9 patch to the rescue, nice shadow could be achieved easily
especially with this awesome tool -
Android 9-patch shadow generator
PS: if project won't be able to compile you will need to move black lines in android studio editor a little bit
I think this drop shadow value is good for most cases:
<solid android:color="#20000000" />
if you need a straight line shadow (like in bottom of toolbar) you can also use gradient xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="linear"
android:angle="-90"
android:startColor="#19000000" <!-- black transparent -->
android:endColor="#00000000" /> <!-- full transparent -->
</shape>
hope this help some one
For some reason shadows don't work if you set <solid> AND <stroke> on your custom background drawable. Creating a <layer-list> with separate layers for fill and borders fixes the issue:
<?xml version="1.0" encoding="utf-8"?>
<!-- Separate layers for solid and stroke, because no shadows get drawn otherwise (using elevation) -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/card_default" />
<corners android:radius="#dimen/card_corner_radius" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke android:color="#color/card_border" android:width="#dimen/card_border_width"/>
<corners android:radius="#dimen/card_corner_radius" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="3dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle">
<gradient
android:startColor="#color/white"
android:endColor="#color/gray"
android:angle="270"
android:dither="false"/>
<corners android:radius="#dimen/_20dp" />
</shape>
</item>
<item
android:bottom="6dp"
android:left="6dp"
android:right="6dp"
android:top="6dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
<corners android:radius="#dimen/_20dp" />
</shape>
</item>
</layer-list>
Just set elevation to something like 10.
https://developer.android.com/training/material/shadows-clipping

Categories

Resources