I'm trying to achieve shadow around an oval using this code:
shadow = new Paint();
shadow.setColor(Color.YELLOW);
shadow.setShadowLayer(10, 0, 0, Color.YELLOW);
and the draw function goes like this:
c.drawOval(ovalRect, shadow);
super.draw(c); //Draws bitmap
So first of all it draw oval with the paint containing the shadow, and then on top of it draws bitmap with transparancy (Bitmap doesn't have any paint).
I get the following outcome:
As you can see the shadow isn't spread along the oval, but it's getting cut out, what could cause this behavior?
You can try this maybe by changing the radius :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Drop Shadow Stack -->
<item>
<shape>
<corners android:radius="12dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="12dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="12dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="12dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="12dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="12dp" />
</shape>
</item>
</layer-list>
Late to the game, but still might help someone:
Try to set android:clipChildren="false" to the parent ViewGroup.
Depending on your layout you also might need to additionally add a bit of padding to the parent and set android:clipToPadding="false" on that parent.
That usually allows the children (and thus also their shadows) to draw outside of their boundaries.
Related
I searched in internet to find a way to implement graphical designs then I find a way to implement them with drawables;
I start to coding the template but it doesn't display correctlly :(
My designed drawable
Main layout
what is the problem ? How can I fix it ?
I designed it but it dosen't work. I don't know what is the problem with that.
Should I use image of that template in the background of imageview for all templates like this ?
Notice : I set that drawable for background of layouts like linear,relative and constraint but doesn't shown correctly too.
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#9c9c9c" />
</shape>
</item>
<item
android:bottom="920dp"
android:left="-100dp"
android:right="50dp"
android:top="-700dp">
<rotate
android:fromDegrees="50"
android:pivotX="-50%"
android:pivotY="100%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="50dp"
android:left="-30dp"
android:right="315dp"
android:top="-100dp">
<rotate
android:fromDegrees="-40"
android:pivotX="10%"
android:pivotY="50%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="20dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="200dp"
android:left="100dp"
android:right="-400dp"
android:top="-40dp">
<rotate
android:fromDegrees="-40"
android:pivotX="60%"
android:pivotY="40%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="420dp"
android:left="120dp"
android:right="150dp"
android:top="100dp">
<rotate
android:fromDegrees="-40"
android:pivotX="365%"
android:pivotY="125%">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#7436f6"
android:startColor="#aa57e5"
android:type="linear" />
</shape>
</rotate>
</item>
<item
android:bottom="-200dp"
android:left="-100dp"
android:right="240dp"
android:top="500dp">
<rotate
android:fromDegrees="-40"
android:pivotX="60%"
android:pivotY="5%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<stroke
android:width="2dp"
android:color="#dfcefc" />
</shape>
</rotate>
</item>
<item
android:bottom="100dp"
android:left="-100dp"
android:right="100dp"
android:top="200dp">
<rotate
android:fromDegrees="-40"
android:pivotX="130%"
android:pivotY="145%">
<shape android:shape="rectangle">
<solid android:color="#fff" />
<corners android:radius="30dp" />
<gradient
android:angle="270"
android:endColor="#7436f6"
android:startColor="#aa57e5"
android:type="linear" />
</shape>
</rotate>
</item>
I need it. Please help me :)
use <size android:width="50dp"
android:height="50dp"
/> to set height width
here is your square
<item
android:bottom="420dp"
android:left="120dp"
android:right="150dp"
android:top="100dp">
<rotate
android:fromDegrees="-40"
android:pivotX="365%"
android:pivotY="125%">
<shape android:shape="rectangle">
<size android:width="50dp"
android:height="50dp"
/>
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#7436f6"
android:startColor="#aa57e5"
android:type="linear" />
</shape>
</rotate>
</item>
Change
app:src="#drawable/test3"
to
app:srcCompat="#drawable/test3"
in your ImageView of MainLayout (i.e. page_text.xml)
Hopefully it will work.. Try it..
I have an Android Button:
<Button
android:layout_width="wrap_content"
android:layout_height="44dp"
android:background="#drawable/action_button" />
action_button.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:left="25dp"
android:right="25dp"/>
<gradient
android:angle="0"
android:endColor="#color/whiteColor"
android:startColor="#color/whiteColor"/>
<corners android:radius="#dimen/borderRadius"/>
<stroke
android:width="2px"
android:color="#color/actionColor"/>
</shape>
How can I change the shape, when the button is pressed?
Hi please use below selector and change according to your need
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- <item android:state_enabled="false"
android:drawable="#drawable/cyan_strip" />
<item android:state_pressed="true"
android:drawable="#drawable/cyan_strip" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/cyan_strip" />
<item android:drawable="#drawable/black_strip" /> -->
<item android:state_enabled="false">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_selected="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item >
<shape>
<solid
android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
</selector>
you need a selector
<?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/action_button_pressed" />
<item android:drawable="#drawable/action_button" />
</selector>
put it in a xml file, under drawable/, and use it as background for your Button . Android will take care of the rest
see :
Link
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#302226"
android:endColor="#6D7B8D"
android:angle="45"/>
<padding android:left="6dp"
android:top="6dp"
android:right="6dp"
android:bottom="6dp" />
<corners android:radius="30dp" />
</shape>
or see :
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/shape_oval" />
Shape_oval is an image which we can take from google serching or drawing ourself in paint or photoshop.
How do i make the relative layout look like the image
There are two ways to create shadow:
If sdk version is lower than 5.0...
A. You can also use android drawable image
android:background="#android:drawable/dialog_holo_light_frame"
B. Use below shadow_round.xml to make a drawable background for shadow of view. android:background="#drawable/shadow_round
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#ffffff" />
<corners android:radius="10dp" />
</shape>
</item>
If you are using SDK 5.0 or greater then use the view's elevation property.
android:elevation="2dp"
simple add elevation property in your relative layout. or
create xml in drowable folder and call as a background
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ddd" />
<stroke
android:width="5dp"
android:color="#b8b9b9" />
<corners
android:radius="3dp" />
</shape>
Try this code:- radius.xml
:- this xml add in drawable folder in and relative layout in background in set
android:background="#drawable/radius"
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<stroke android:width="2dp" android:color="#b8b9b9"/>
<corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp"/>
</shape>
<?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="#000066" />
<stroke
android:width="2dp"
android:color="#3333D6" />
<corners
android:radius="50dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#1919FF"
android:endColor="#7171FF"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#ffffff" />
<corners
android:radius="50dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
This is the code I use to style some buttons , but they still appear with that ugly background (white) like this: http://prntscr.com/65yzgv
How can I get rid of this white background?
This problem is due to the fact that you are probably compiling the button with lollipop,i.e., API 21, in which shadow is by default.
So, try the way I did it (basically, set its style to 'borderless') :
yourcustombutton.xml (same as your file) :
<?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="#000066" />
<stroke
android:width="2dp"
android:color="#3333D6" />
<corners
android:radius="50dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#1919FF"
android:endColor="#7171FF"
android:angle="270" />
<stroke
android:width="3dp"
android:color="#ffffff" />
<corners
android:radius="50dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Button Declared in your activity file :
...
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Answer 1"
android:background="#drawable/yourcustombutton"
style="?android:attr/borderlessButtonStyle"
/>
...
This is working fine... I checked it. Hope this helps !
To make a background transparent, just add android:background="#android:color/transparent" in your button properties in the layout xml file its defined in.
In button add:
android:background="#null"
I have the following XML code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="0dp"
android:color="#CCFFFFFF" />
<solid android:color="#55FFFFFF" />
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp" />
<corners android:topLeftRadius="0dp" android:topRightRadius="0dp" android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />
</shape>
which produces the following:
How do I modify the code so there is a black line on the top like this:
You can add above the text and below the shape in xml file this code
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />
You should do what with nine-patch or insert View widget with height 1dp (or more) and black background above this TextView.
when the color of the top layer IS NOT semi-transparent, there is a fast, versatil, and clean, to add borders to a view, with layerlist drawable.
Probably you couldnt use it in your case, but it this will be handful to somebody else who reach this question
for this, you create an xml file in you drawable folder, called border.xml with this content:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="0dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#000000" />
</shape>
</item>
<item >
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="10dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
Then in your layout, you use
android:background="#drawable/border"
with this you have a way to quickly add borders, to one, or more sides of any view.