I want to have a glow effect on button (in android studio) as shown in image:
I didn't want an image for the background, so to get this effect, I have tried to do in xml file. I have added a stroke for the button and provide a shadow to the button (with same color as stroke).
I have used a linear gradient with 90 degree angle with start and end color same as the stroke, center color same as background color. Please see the code:
<?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="0dp">
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="45"
android:startColor="#8008c3fa"
android:endColor="#8008c3fa"
android:type="linear"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="90"
android:centerX="50%"
android:centerColor="#color/trans_parent"
android:startColor="#8008c3fa"
android:endColor="#8008c3fa"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="2.5dp"
android:color="#08c3fa"
/>
</shape>
</item>
</layer-list>
</item>
</selector>
For the above xml, I got the below result:
Though the design and the result images look totally different, I think if we increase the center color height and keep a fadeout effect to the shadow, it can work. But I'm not able to do the same.
you can increase the center color height and keep a fadeout effect to the shadow by adding a nother item to the layer-list.
The first item makes the gradient for the upper bound, the rest is transparent and the second item makes the gradient for the lower bound the same way.
I added two more items to fill the left and the right semicircle.
I changed a few colours to enhance the effect but didnt trie too long, i think one could do alot more with more items and better colours :)
Cheers, Josh
the final result:
<?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="0dp">
<shape>
<corners android:radius="50dp" />
<gradient
android:centerX="70%"
android:startColor="#804CD6FF"
android:centerColor="#8004485C"
android:endColor="#804CD6FF"
android:type="linear"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="90"
android:centerX="30%"
android:centerColor="#color/transparent"
android:startColor="#8008c3fa"
android:endColor="#color/transparent"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="2.5dp"
android:color="#08c3fa"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="90"
android:centerX="70%"
android:centerColor="#color/transparent"
android:startColor="#color/transparent"
android:endColor="#8008c3fa"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
</item>
<!-- the glow for the half circles, possible with radius as well. I liked
android:type="sweep" better because radius tends to fade out.-->
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="360"
android:centerX="5%"
android:centerColor="#8008c3fa"
android:startColor="#color/transparent"
android:endColor="#color/transparent"
android:gradientRadius="360"
android:type="sweep"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
</item>
<item android:bottom="5dp" android:left="6dp" android:right="10dp" android:top="5dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<gradient
android:angle="360"
android:centerX="95%"
android:centerColor="#color/transparent"
android:startColor="#8008c3fa"
android:endColor="#8008c3fa"
android:gradientRadius="360"
android:type="sweep"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
</item>
</layer-list>
</item>
</selector>
I know it has been a while but if anyone is still interested in this effect, here is a custom view library I made which was inspired by this question:
Glowing and Neon Button
It also has animated disable and enable methods as seen in the photo.
It's MIT Licensed, so do whatever you want with it. hope this helps someone.
If you want to have improved neon Buttons with a solid that has different gradients too. Take a look on this related post I answered. I used the suggested library from "#Mehran B" and combined it with a custom drawable and a transparent stroke to make it more modifiable. As you can see in the samples below the gradients from the solids and shadows are separated and thus more flexible:
Related
I want to make a design like that
the delivery msg is a texview with custom background and it works fine but in the bottom of it there is a constraint-layout and when I used the custom background I made for it it didn't look fine there is a shadow in the corner, this custom background was applied fine before to a button but when I use it to constraint-layout it didn't works as expect
here is the custom drawable xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/turquoise" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" >
</padding>
<solid android:color="#color/white"
android:elevation="0dp"
/>
<size android:height="60dp" />
</shape>
</item>
how can I apply that to constraint-layout
there is two solutions:
Solution 1:
apply corners and padding to the rectangle with color turquoise
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/turquoise" />
<padding android:top="28dp" />
<corners
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<solid
android:color="#color/white"
android:elevation="0dp" />
<size android:height="60dp" />
</shape>
</item>
</layer-list>
please note that android:top value u have to set depending on your needs.
Solution 2:
create two separated layouts with the same designs just differ in layout.
set one with turquoise to constraintLayout and crate ImageView to have the one with white and set marginTop depending on your needs
any questions are welcomed
I was wondering if it is possible to have multiple borders/"stroke" elements on a shape, or if I need to use an image (or a bunch of shapes covering each other). My code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:endColor="#color/editTextBG"
android:startColor="#color/editTextBG"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeInner" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeCenter" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeOuter" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
I've tried just using the code, which didn't work, and giving the earlier strokes a bigger width (so that the later, if drawn over, would only color part). However, it seems the last stroke overrides the others?
A workaround for borders is to overlay elements:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/colorAccent"/>
</item>
<item android:top="8dp">
<color android:color="#color/colorPrimaryDark"/>
</item>
<item android:top="16dp">
<color android:color="#color/colorPrimary"/>
</item>
<item android:top="32dp" android:right="8dp">
<color android:color="#android:color/holo_red_dark"/>
</item>
</layer-list>
This is the result:
The first element in the layer-list from top to bottom is the background and every other is mounted on top.
<item>
<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/colorWhite" />
<stroke
android:width="1dp"
android:color="#979797" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#ffd400" />
</shape>
</item>
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>
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>
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.