I'm trying to create a complex xml drawable to represent a listbox, setting it as a background of a TextView.
Following there is there a screenshot of what I want to obtain and what I get instead.
As you can see I want to put my arrow in a gradient gray box on the right.
Looking at android documentation, it seems that xml shapes supports the size tag, as reported here http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape , but i can't get it working!
Here there is my XML
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#999999" />
<corners android:radius="5dp" />
<solid android:color="#ffffff" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#999999" />
<corners android:topRightRadius="5dp" android:bottomRightRadius="5dp" />
<gradient android:startColor="#606060" android:endColor="#303030" android:angle="270" />
<padding android:top="7dp" android:bottom="7dp" android:right="7dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/listbox_arrow_icon" android:gravity="right|fill_vertical" android:tileMode="disabled" />
</item>
</layer-list>
I tried specifying android:width in shape tag, as specified here http://developer.android.com/reference/android/graphics/drawable/ShapeDrawable.html#attr_android:width, but it doesn't work too.
I don't want to do it using code, but if it's unavoidable, in the end, I think i'll build a component to use in the place of TextView for this stuff.
Thanks for your help!
#EDIT
Sorry, during copy&paste I dropped the solid tag of the first shape! Fixed!
Try this :
<item><shape>
<solid android:color="#fff" />
<stroke android:width="1px" android:color="#10000000" />
<corners android:radius="6dp" />
<gradient android:angle="270" android:endColor="#10000000" android:startColor="#10FFFFFF" />
</shape></item>
Related
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:
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 want to add inner shadow effect into my drawable file like this.
Below is my drawable file. I want to achieve shadow inside the drawable file as you can see above. What changes should i make to achieve this?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<item
android:bottom="#dimen/_3sdp"
android:left="#dimen/_8sdp"
android:right="#dimen/_8sdp"
android:top="#dimen/_3sdp">
<shape>
<corners android:radius="#dimen/_75sdp" />
<padding android:bottom="#dimen/_8sdp"
android:top="#dimen/_8sdp" />
<solid android:color="#color/leave_msg_color" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="#dimen/size_point5dp"
android:left="#dimen/size_point5dp"
android:right="#dimen/size_point5dp"
android:bottom="#dimen/size_point5dp">
<shape android:shape="rectangle">
<solid android:color="#color/blue_E7F1FF"/>
<corners android:radius="8dp"/>
</shape>
</item>
<!-- left shadow -->
<item>
<shape android:shape="rectangle">
<gradient
android:angle="180"
android:centerColor="#00FF0000"
android:centerX="0.98"
android:endColor="#5C000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- right shadow -->
<item>
<shape android:shape="rectangle">
<gradient
android:angle="360"
android:centerColor="#00FF0000"
android:centerX="0.98"
android:endColor="#5C000000"
android:startColor="#00FF0000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- top shadow -->
<item>
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:centerColor="#00FF0000"
android:centerY="0.1"
android:endColor="#00FF0000"
android:startColor="#6B000000" />
<corners android:radius="8dp" />
</shape>
</item>
<!-- bottom shadow -->
<item>
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:centerColor="#00FF0000"
android:centerY="0.1"
android:endColor="#00FF0000"
android:startColor="#6B000000" />
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>
The image would look like image
You can make many item inside your layer-list to produce shadow effect inside check this one out Add shadow to custom shape on Android.
You just need to change some values to achieve your wanted output. make the radius to get oval form and the values of colors.
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>
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.