I've made a button background from shapes and is looking quite good for my purpose. The only thing needed is to drop a bit of shadow for it.
Here is the code:
<?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="#343434" />
<stroke android:width="1dp" android:color="#171717" />
<corners android:radius="3dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
<item>
<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>
</selector>
Here's what I want to achieve
How do I drop the shadow ? My guess is that I need to make another shape but with black/gray background and set some sort of topa nd left padding of margin to make it look like a shadow. But I don't know how to do it... and documentation didn't helped me too much.
Later Edit: I want to add the shadow in xml file and not by code.
Thanks.
If you want to stack more shapes one on top of each other then you could use a layer-list. Bellow is the code for the normal item in your selector(with a strip of gray color):
<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>
The problem is that you'll not be able to achieve a true shadow look on your Button with this type of drawable. You could use the code from the other answer or a nine patch image that already has shadow on it.
Try this...
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#000000" />
<corners android:radius="7dp" />
</shape>
</item>
<item
android:bottom="5px"
android:left="5px">
<shape>
<solid android:color="#FF0000" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>
Paint mShadow = new Paint();
// radius=10, y-offset=2, color=black
mShadow.setShadowLayer(10.0f, 0.0f, 2.0f, 0xFF000000);
// in onDraw(Canvas)
canvas.drawBitmap(bitmap, 0.0f, 0.0f, mShadow);
This code is from Android's Romain Guy available here : http://www.devoxx.com/download/attachments/1705921/D8_C_10_09_04.pdf
You may try this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Bottom Shadow Darker Line-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/blue_darker" />
<corners android:radius="9dip" />
</shape>
</item>
<!-- Main Content Gradient -->
<item android:bottom="1dip">
<shape android:shape="rectangle" android:dither="false" >
<gradient
android:startColor="#color/blue_dark"
android:centerColor="#color/blue_medium"
android:endColor="#color/blue_light"
android:type="linear"
android:angle="90"/>
<corners android:radius="9dip" />
</shape>
</item>
<!-- Upper Shadow Dark Line -->
<item android:bottom="1dip" android:left="1dip" android:right="1dip">
<shape android:shape="rectangle" >
<gradient
android:centerX="0.98"
android:centerY="0"
android:startColor="#android:color/transparent"
android:centerColor="#android:color/transparent"
android:endColor="#color/blue_medium"
android:type="linear"
android:angle="90"/>
<corners android:radius="9dip" />
</shape>
</item>
you can try the following code also to get a smooth border shadow for view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#88000000" />
<corners android:radius="15dp" />
</shape>
</item>
<item
android:bottom="5px"
android:right="5px">
<shape>
<solid android:color="#55B0CF" />
<stroke
android:width="2dp"
android:color="#ffffff" />
<corners android:radius="7dp" />
</shape>
</item>
In this case I use lib https://github.com/dmytrodanylyk/shadow-layout
Firstly, you should turn on it in gradle
dependencies {
compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.3'
}
then put your Button into ShadowLayout
<com.dd.ShadowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:sl_shadowRadius="3dp"
app:sl_shadowColor="#color/your_color">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</com.dd.ShadowLayout>
It's worsk great for me)
Related
I have defined my button in the xml like this.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:text="#string/button_node"
android:textColor="#android:color/white"
android:backgroundTint="#color/colorAccent" />
I need to grey out this button in the code. I have used the below line of code to change it.
button.setBackgroundResource(R.drawable.button_grey);
button.setEnabled(false);
button.setClickable(false)
My button_grey.xml file is
<?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="90"
android:endColor="#color/colorGray"
android:startColor="#color/colorGray" />
<corners android:radius="4dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="1.5dp"
android:right="0.5dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#color/cardview_shadow_start_color" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
After changing the buton looks like this
But Actually I need the button to be look like below by changing the color to grey.
Please note:- It should work from API level 18 onwards.
Try this it will work
<?xml version="1.0" encoding="utf-8"?>
<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="#24b8eb" android:startColor="#24b8eb" />
<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>
http://mobilenext.net/4-material-design-tweaks-pre-lollipop-android-devices/
http://www.techrepublic.com/article/android-lollipop-material-design-trick-offers-a-more-polished-ux/
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...
I would like to create a custom XML layout for my TextView, using rounded corners and a custom header, such as this example.
I found this very useful link that creates the following quite similar result.
<?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>
I wonder if it possibile to modify the XML layout above to get the header "ADD FRIEND" style, that is the darker gray background and the divider between the header textview ("ADD FRIEND") and the textview below (the one containing the "Nickname or email" and the "search" button).
I am thinking it is probably easier to do it with an image/drawable background, but getting it done in XML would be awesome (in terms of reusability for example).
Any help or suggestion on how to proceed is very welcome!
if you not using image for that then require three xml in drawable and create this type of layout :
1 linearlayout_background.xml
<?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:bottom="2dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/white" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
header_background :
<item><shape>
<padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" />
<corners android:topLeftRadius="5dp" android:topRightRadius="5dp" />
<solid android:color="#color/off_black1" />
</shape></item>
buttonbackground
<item><shape>
<padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" />
<corners android:radius="5dp" />
<solid android:color="#00000000" />
<stroke android:width="1dp" android:color="#color/off_white2" />
</shape></item>
I have a custom #drawable as a background for a button. I have a bitmap and a shape on top of it. The problem is that the corners of the bitmap are not clipping to the shape, like illustrated bellow.
My question is: Is there a way to clip the bitmaps to the bounds the shape? How?
EDIT: Here is the XML:
<?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="#8F8F8F" />
<stroke
android:width="1dp"
android:color="#8f8f8f" />
<corners
android:radius="8dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<layer-list>
<item>
<!-- <nine-patch android:src="#drawable/button"/>-->
<bitmap android:src="#drawable/background_image" />
</item>
<item>
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#8f8f8f" />
<corners android:radius="12dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
You will have to change alpha level at the corners or use Draw 9-patch tool to create the background
Currently I am using this xml for the background of my spinner:
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#008000"
android:endColor="#7FFF00"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#A8A8A8" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#ffc536"
android:startColor="#ffe9b3"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#e4962d" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
And I like the color and the gradient however there is no indicator that there it is a drop down menu. Is there anyway to add a image or a shape to the right side to indicate a drop down menu? I found this easier then make 9-patch files.
You need to create a custom component and write an XML file and a UI element for it to implement this.
Simply treat the UI element as a drop-in version of what you're trying to implement.
Hope this helps!
i know that this question is old but i resolve in this way :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#color/green" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<bitmap
android:gravity="right|center"
android:src="#drawable/ic_arrow_drop_down" />
</item>