I'm trying to add nice painted shadow to my circle float button. I made a layer-list, but the shadow image is behind the main color, and I can't make it bigger:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/fab_bg_normal" />
<item android:bottom="1dp"
android:right="1dp">
<shape
android:shape="oval"
android:padding="10dp">
<size android:height="#dimen/favorites_button_large_size"
android:width="#dimen/favorites_button_large_size" />
<solid android:color="#color/pink" />
</shape>
</item>
</layer-list>
I tried to make a shadow with gradient, but this looks much better
-- here result if I comment/delete that pink ..
-- here result if I uncomment/add pink solid shape
Related
I need to create a round corner border, where border with gradient.enter link description here is working.But My page is using a image as background which is also with gradient. I need to show background image from middle of the filed. I want to create just like below image:
round_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="4dp"
android:color="#color/transparent" />
<gradient
android:startColor="#374533"
android:centerColor="#432727"
android:endColor="#222430"
android:angle="135"/>
<corners android:radius="10dp" />
</shape>
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#efe301"
android:centerColor="#7dc17b"
android:endColor="#01dae6"
android:angle="180"/>
<corners android:radius="10dp" />
result_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/round_border"/>
<item android:drawable="#drawable/round_background" />
</layer-list>
Here, you can set android:width="4dp" in round_background.xml to set size of your border. use result result_drawable.xml where you want..
Enjoy. :}
I Have read a few tutorials but all I was able to
achieve was a border in one side, or both sides with
the same color.
I'm trying to create a style that will apply a border
in top with a different color and width, than the bottom border.
So I want to have a border with 2dp on top with a blue color
and a border of 3dp on the bottom with red color.
This is the style I'm using to apply border on top and bottom
but I can't change the color on the top or the bottom one.
<?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="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
It is little dirty but it works :).
Your Layer-List drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- TOP STROKE-->
<item>
<shape android:shape="rectangle">
<solid android:color="#color/top_stroke_color" />
</shape>
</item>
<!-- BOTTOM STROKE-->
<item android:top="#dimen/top_stroke_width">
<shape android:shape="rectangle">
<solid android:color="#color/bottom_stroke_color" />
</shape>
</item>
<!-- MAIN SHAPE -->
<item android:top="#dimen/top_stroke_width" android:bottom="#dimen/bottom_stroke_width">
<shape android:shape="rectangle">
<solid android:color="#color/main" />
</shape>
</item>
</layer-list>
Color definitions:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="top_stroke_color">#0000FF</color>
<color name="bottom_stroke_color">#FF0000</color>
<color name="main">#00FF00</color>
</resources>
And finally dimens:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="top_stroke_width">10dp</dimen>
<dimen name="bottom_stroke_width">20dp</dimen>
</resources>
In my example i have 3 rectangles which have set correct "Margins". Every of my rectangles is smaller than this under and covers it. According to my solution u can create 4 different stroke for every side of your main shape.
I have a .png image which is a circular shape and is just a shadow. What I have is an ImageButton which has an image for its android:src property. For its background I can have an xml file in drawable file. What I want now is to have the shadow image which is a png to go behind another solid shape -> android:shape="oval".
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shadowimg" />
<item>
<shape android:shape="oval">
<solid
android:color="#d63a33"/>
<size
android:width="70dp"
android:height="70dp"/>
</shape>
</item>
</layer-list>
As you see in the code I am adding an item with the shadow image with the android:drawable property. However this does not let the shadow show. It simply shows the red circle shape. But I want the shadow image behind the solid red circle shape. From my tiny knowledge of layer-list the top item goes in the back and the one on bottom comes first.
UPDATE: After moving the image shadow to bottom I got the effect however the size of the solid red circle shape is too big and changing the size doesn't change the size.
UPDATED Code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid
android:color="#d63a33"/>
<size
android:width="5dp"
android:height="5dp"/>
</shape>
</item>
<item android:drawable="#drawable/shadowimg" />
</layer-list>
**** UPDATE 2: ****
I noticed when I remove <item android:drawable="#drawable/shadowimg" /> I can change size of solid circle shape but when I add this it defaults to a bigger size.
This is what happens:
Here's the shadow image if anyone needs:
I think this should be your solution:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" >
<solid android:color="#d63a33" />
<size
android:height="5dp"
android:width="5dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/shadowimg" />
</item>
<item>
<shape android:shape="oval" >
<solid android:color="#00000000" />
<size
android:height="5dp"
android:width="5dp" />
</shape>
</item>
</layer-list>
I added another transparent layer with the desired size.
Actually the issue is in the shadow you are using, the shadow itself leaves some padding. so what we can do is, leave some space in the solid color we are filling in the first item by using stroke.
use this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" >
<solid android:color="#d63a33" />
<stroke
android:width="7dp"
android:color="#00000000" />
</shape>
</item>
<item android:drawable="#drawable/shadowimg"/>
</layer-list>
and then use with 30dp of height and 30dp of width, like
<TextView
android:id="#+id/titleText"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:background="#drawable/circle_white"
android:fontFamily="sans-serif-thin"
android:gravity="center"
android:text="Hi"
android:textColor="#FF000000"
android:textSize="16sp" />
if you want to increase the height and width of the view, simply increase the width of the stroke too..
I'm trying to build a custom android view and apply a background drawable that is a layer-list.
The layer-list has two items:
A background color (white)
A simple shape drawable that is a stroked rectangle with rounded-corners
here's the drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white"/>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp" />
<stroke
android:width="2dp"
android:color="#color/background_green" />
</shape>
</item>
</layer-list>
The custom view is a class derving from Android.view.View that currently has NO functionality except the required measuring overloads.
I'm applying the background in the view definition in an activity layout:
<view
android:layout_width="match_parent"
android:layout_height="300dp"
class="com.example.widget.TestView"
android:id="#+id/view2"
android:layout_gravity="center_horizontal"
android:background="#drawable/rect_sig_cap"
android:layout_margin="20dp" />
What I expect to see is a view with a white background and a green border. What I actually see when I deploy the project is a view with a black background and a green border.
Interestingly it appears correctly in the designer preview in Android Studio. It's only when I deploy it to a device that it renders black.
Am I missing something obvious here?
For those interested, I found the solution.
I had defined the shape drawable as including only a stroke definition. Without any other inputs, this causes the fill color to be inferred as black.
In the end, a Layer-List drawable is not required at all. Instead, add a solid fill definition to the shape layer with color Transparent and it works just fine.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/corner_radius" />
<stroke android:width="1dp"
android:color="#color/background_green" />
<solid android:color="#android:color/transparent" />
</shape>
Try this one.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/white" />
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp" />
<stroke
android:width="2dp"
android:color="#color/background_green" />
</shape>
</item>
</layer-list>
I am trying to create a background drawable for a linearlayout that has multiple gradients.
E.g. I want to have a gradient at the top and bottom, and a solid color in the middle. So basically a header and footer.
I am trying to use a layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<!--Red-->
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#ff0000" />
</shape>
</item>
<!-- Green -->
<!-- Offsets from the top and bottom -->
<item
android:top="20dp"
android:bottom="20dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#00ff00" />
</shape>
</item>
<item
android:top="80dp">
<!--Blue -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#0000ff" />
</shape>
</item>
</layer-list>
The problem is, I am unsure of the max value of density independant pixels. For this to work, the bottom item offest would need to be (max dp value-20). I have tried to assume the max is 100, and also assume the max is 160 (from the documentation), but neither of these work.
Any ideas?