Android: How to set inner boarder shadow in a drawable? - android

I want to create an inner boarder shadow to a layout. However so far no luck. Currently I am testing a drawable but the effect is not as pleasant as expected.
Here is my attempt:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#FFFFFF"
android:centerColor="#000000"
android:endColor="#FFFFFF"
android:angle="0" />
</shape>
</item>
<item
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp">
<shape android:shape="rectangle">
<solid android:color="#70D159"/>
</shape>
</item>
I want to achieve something like this:
Is there a better approach to achieve this? Thank you in advance!

Related

How to make curved edge in a rectangle shape in android

Am trying to achieve this without using image as background, wanted to be done in xlm drawable
Use this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="-200dp"
android:right="-200dp"
android:top="-340dp">
<shape
android:shape="oval">
<solid android:color="#color/dark_orange" />
</shape>
</item>
Change left-right margin as per your requirements. That will change curve.

How to center the gradient color in android

Hi I am trying to gradient in android.
I am trying the following code
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#EF5350"
android:centerColor="#FFEBEE"
android:endColor="#EF5350"
android:angle="-270" />
</shape>
Result:
I want to increase the size of white in center. Please help me to solve my issue.
Try this :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="50dp">
<shape android:shape="rectangle">
<gradient
android:startColor="#EF5350"
android:endColor="#EF5350"
android:centerColor="#FFFFFF"
android:angle="270"/>
<size
android:height="100dp"
android:width="80dp"/>
</shape>
</item>
<item
android:bottom="50dp">
<shape android:shape="rectangle">
<gradient
android:startColor="#EF5350"
android:endColor="#FFFFFF"
android:centerColor="#FFFFFF"
android:angle="270"
/>
<size
android:height="100dp"
android:width="80dp"/>
</shape>
</item>
</layer-list>
You need to specify type inside the gradient tag,
For e.g. in my case I have defined radial for center gradient effect,
android:type="radial"
I have created gradient shape (centergradietbg.xml) with center gradient effect, look it my code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:centerColor="#c1c1c1"
android:endColor="#4f4f4f"
android:gradientRadius="400"
android:startColor="#c1c1c1"
android:type="radial" >
</gradient>
</shape>
Use this xml in your layout background using
android:background="#drawable/centergradietbg"

Can't get rounded corners for my layer-list drawable

I have made a button drawable that consists of a gradient shape and a solid shape, both in a layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="25dp">
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:startColor="#color/greyDark1"
android:endColor="#color/greyDark2"/>
</shape>
</item>
<item android:top="25dp" android:height="25dp">
<shape android:shape="rectangle" >
<solid android:color="#color/black" />
</shape>
</item>
</layer-list>
But I can't get the corners right.
I need rounded corners around the entire shape, but not on the inside (so topRight and topLeft op the top half and bottomRight and bottomLeft for the bottom half).
If I set both halves with <corners android:radius="8dp"> the bottom corners of the top half and the top corners of the bottom half are rounded too, and that's not what I want.
If I set <corners android:topRightRadius="8dp" android:topLeftRadius"8dp"> for the top half and <corners android:bottomRightRadius="8dp" android:bottomLeftRadius"8dp"> for the bottom half the top half would be the full size of the drawable making the gradient not working properly and the bottom corners are that same color too.
Here is an image of what I'm trying to accomplish:
Does someone know a solution to this?
EDIT:
I have gotten some answers and I'm thankful for that, but sadly enough they don't seem to work.
The answers I got from bofredo and Bhuvnesh Chasta resulted in something like this:
And the answer I got from curiousMind looks pretty nice, but isn't what I'm aiming for:
FINAL EDIT:
I have discussed this problem with someone I was working with and we both agree that it isn't that important to have it look like this, so we went with a solid color.
I still want to thank everybody who helped, all the current answers will get an upvote and I will accept the answer from waqaslam because he came very close to what I wanted.
I think that's the closest you can reach to your desired drawable using xml.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#4e4e4e" android:centerColor="#626262" android:endColor="#android:color/transparent" android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<gradient android:startColor="#android:color/transparent" android:centerColor="#4c4c4c" android:endColor="#1c1c1c" android:angle="270" />
</shape>
</item>
Perhaps you should use 9-patch drawable to get the exact effect.
I had this problem quite some time ago aswell. You can find that question HERE
This is from the working answer:
<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="#color/cocus_orange"/>
<corners android:radius="15px"/>
<padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90"
android:startColor="#880f0f10"
android:centerColor="#880d0d0f"
android:endColor="#885d5d5e"/>
<corners
android:radius="15px" />
</shape>
</item>
</layer-list>
try like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#000"
android:startColor="#787575" />
<corners android:radius="8dip" />
Try this one. You should use to corners in shape for round to corner.
<?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="#b2d1d1ef" />
<corners android:radius="1dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp" android:top="1dp">
<shape
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="5dp"/>
</shape>
</item>
Found this question today and solved, I'm sharing it in case anyone else will find it unsolved as the OP wanted, and wants to know the right way as I'm sure the OP doesn't need it anymore.
I made starting point/ending point for each item's draw, the gradient for the top starts where the button starts, ends after 20dp, for the bottom starts after 20dp and it ends in the end of the button. You can even see from the attachment that it is the same as the OP's wanted result! :)
(I don't have 10 reputation to post images.)
Button Preview from Android Studio
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="20dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:startColor="#4e4e4e"
android:endColor="#626262"
android:type="linear"/>
</shape>
</item>
<item android:top="20dp">
<shape
android:shape="rectangle" >
<gradient
android:angle="270"
android:startColor="#4c4c4c"
android:endColor="#1c1c1c"
android:type="linear"/>
<corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp"/>
</shape>
</item>
</layer-list>

How can I create a vertical line in a drawable xml? Android

Is there a way to make a drawable that draws a vertical line? So far I have a horizontal line that draws this:
current code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/object_switcher_background" />
<item android:left="0dp"
android:right="250dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"/>
<size android:width="40dp"/>
</shape>
</item>
<item android:left="50dp"
android:bottom="50dp"
android:top="75dp"
android:right="150dp">
<shape android:shape="line">
<stroke android:color="#color/c19"
android:width="2dp"
android:rotation="90"/>
<size android:width="40dp"/>
</shape>
</item>
</layer-list>
How can I manipulate this to make it look like this?
You could do this by nesting your second item inside a rotate item.
you can do that using rotate item: the below code defines a white background with a vertical divider using only xml drawable
<?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="#android:color/white" />
</shape>
</item>
<item>
<rotate android:fromDegrees="90">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="#android:color/darker_gray" />
</shape>
</rotate>
</item>
I'm not sure why you need a drawable for this.
This can also be done by using a simple view and adjusting its height, width and position according to your needs. For example:
<View
android:layout_width="1dp"
android:background="#color/grey_text_color"
android:layout_height="match_parent"/>

Custom button with drawable, like facebook

I have been all morning trying to do an custom shape like as facebook button like this:
But I'm trying to do it customizable, so in the future I could change the icon for example, but I'm going crazy.
How I can make a button like this? Only the right part must be pressed, the left with the icon must be static although it will be pressed.
I have this for the left side:
<?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="#color/gecas_blue"/>
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
<size
android:height="#dimen/bt_icon_size"
android:width="#dimen/bt_icon_size"
/>
</shape>
</item>
<item
android:left="10dp">
<shape android:shape="rectangle">
<solid
android:color="#color/gecas_blue"/>
<size
android:height="#dimen/bt_icon_size"
android:width="#dimen/bt_icon_size"
/>
</shape>
</item>
<item android:drawable="#android:drawable/ic_input_add">
<size
android:height="#dimen/bt_icon_size"
android:width="#dimen/bt_icon_size"
/>
</item>
</layer-list>
And this for the right, but I know how to continue:
<?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="#color/gecas_blue"/>
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
</shape>
</item>
<item
android:right="10dp">
<shape android:shape="rectangle">
<solid
android:color="#color/gecas_blue"/>
</shape>
</item>
</layer-list>
This is the most similar library that I've found.
Flat Buttons
Try https://github.com/medyo/fancybuttons it almost fit what you try to do.

Categories

Resources