I am trying to make a transparent gradient background for a button, something like this:
(The start color is not grey but transparent)
But I am getting this:
(where white portion is too narrow)
This is my gradient.xml:
<!-- Here centerX does not work -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:centerX="30%"
android:startColor="#android:color/transparent"
android:endColor="#android:color/white"/>
</shape>
I have also tried adding a centerColor, but then the transparent area turns to grey!
<!-- Here the startColor turns greyish -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:centerColor="#android:color/white"
android:centerX="30%"
android:endColor="#android:color/white"
android:startColor="#android:color/transparent" />
</shape>
Thanks in advance!
If what you need is just gradient moved to the left side of the drawable, try something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="100dp">
<color android:color="#android:color/white"/>
</item>
<item android:width="100dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:centerX="30%"
android:endColor="#android:color/white"
android:startColor="#android:color/transparent"/>
</shape>
</item>
</layer-list>
This layer consist of two rectangles:
White rectangle moved to the right by 30dp
Gradient rectangle, whose width is 30dp
centerX works only when you have a centerColor set.
But if you set the center color to #android:color/transparent the gradient goes from opaque white to transparent black, not white.
#android:color/transparent is defined as #00000000, which is a transparent black and not white. Usually it doesn't matter because color is transparent anyway, but in case of gradients it gives a black tint.
So, you need
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00ffffff"
android:centerColor="#00ffffff"
android:endColor="#ffffffff"
android:centerX="30%" />
</shape>
In this case the color is same (#ffffff i.e. white) across the gradient, but alpha is varied from 00 to ff.
Related
I'm trying to change the color of the stroke of a Drawable that I use as a background.
Here is my drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item
android:id="#+id/item_border_drawable"
android:left="16dp"
android:right="16dp"
android:top="16dp"
android:bottom="16dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- This is the stroke you want to define -->
<stroke android:width="3dp"
android:color="#color/itemLegendary"/>
<!-- Optional, round your corners -->
<corners android:bottomLeftRadius="0dp"
android:topLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
As you can see I use an item Rectangle to have a Background color, then another rectangle on top that draws a border around it but with 16dp of margin all around.
I want to change the color of the stroke in the MainActivity, without affecting the padding and background-color.
I tried to do as mentionned here:
Android change color stroke (border) programmatically
However it seems like it doesnt "change the color" but replace the whole Drawable and I don't want to have to give the information of the padding etc... once again.
Could you guys please help me to easily change the color of the border?
Regards.
I'm trying to create a drawable overlay shape control that will basically have a solid WHITE box at the top and then the remaining segment of the screen will have a gradient from a solid white down to a translucent white. We use this to lay over a background image to create a solid white area on top and then fading into the a background image towards the bottom.
Using this code it gets basically what I want, except I want a true solid white area under the Company Logo area (sorry I had to blank out the Company Logo and the App Name in the screen shot) with the gradient starting below the solid white.
<?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:angle="270"
android:startColor="#ffffffff"
android:centerColor="#00ffffff"
android:endColor="#00ffffff"
android:centerY="0.6"
android:type="linear" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ffffffff"
android:centerColor="#ffffffff"
android:endColor="#00ffffff"
android:centerY="-0.17"
android:gradientRadius="100%p"
android:type="radial" />
</shape>
</item>
</layer-list>
Which produces a display similar to this:
But I really want a more solid white area to be directly under the Company Logo area and then with the gradient starting after that point. But you can see that the gradient is starting at the top of the screen.
I've tried to do something like the following but it's not working. Adding the first item in the list does give me a solid area at the top, but for some reason that I'm probably just not understanding is that the top item fills in the entire screen with the solid white color. I tried moving that first item to the bottom but that still gave me the full solid white screen.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape
android:shape="rectangle">
<size android:height="100dp" />
<solid android:color="#ffffffff"/>
</shape>
</item>
<item android:top="100dp" >
<shape
android:shape="rectangle">
<gradient
android:angle="270"
android:startColor="#ffffffff"
android:centerColor="#00ffffff"
android:endColor="#00ffffff"
android:type="linear" />
</shape>
</item>
<item android:top="100dp" >
<shape
android:shape="rectangle">
<gradient
android:startColor="#ffffffff"
android:centerColor="#ffffffff"
android:endColor="#00ffffff"
android:centerY="-0.17"
android:gradientRadius="100%p"
android:type="radial" />
</shape>
</item>
</layer-list>
Can anyone tell me what I'm doing wrong or give me a better way to do this.
Just for additional information. The actual image is being applied to the background of the base LinearLayout view. Then another view is overlayed on top of the base view with this drawable set as the background on it's LinearLayout so it acts as an overlay mask on top of the background image.
I appreciate any help I can get on this.
You can add two Linear Layouts children to one Relative Layout parent. Have the top Linear Layout have the background of white, and the bottom one your gradient.
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
I created a rather simple shapedrawable with semi-transparent borders, and used it as a background for two adjacent view.
Either if the srtoke color is partially transparent, I'm expecting a solid stroke (like the image on the right), but what I get is a blurred stroke (image on the left).
What I'm doing wrong?
(images are taken from the ADT preview, in the emulator the effect is even more visible)
This is the ShapeDrawable (theme_base_bg_framed.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/base_frame_solid_color"
/>
<stroke
android:width="#dimen/frame_border_size"
android:color="#color/base_frame_border_color"
/>
<padding
android:left="#dimen/frame_padding_size"
android:top="#dimen/frame_padding_size"
android:right="#dimen/frame_padding_size"
android:bottom="#dimen/frame_padding_size"
/>
</shape>
It uses these color and dimen definitions:
<color name="base_frame_solid_color">#20ffffff</color>
<color name="base_frame_border_color">#40ffffff</color>
<dimen name="frame_border_size">2dp</dimen>
<dimen name="frame_padding_size">2dp</dimen>
Both drawables are assigned to the Views background
<style name="ViewWithBorder">
<item name="android:background">#drawable/theme_base_bg_framed</item>
</style>
Edit:
The colors used in the ShapeDrawable are alphaed for a reason. The view in the background is going to contain other views and/or images. This is a better example of what I get (left) and what I'm expecting to get (right).
I use this values to get the result you wanted:
colors.xml:
<color name="base_frame_solid_color">#20000000</color>
<color name="base_frame_border_color">#40ffffff</color>
shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/base_frame_solid_color"
/>
<stroke
android:width="#dimen/frame_border_size"
android:color="#color/base_frame_border_color"
/>
</shape>
Hope this helps!
Ok, I found what's happening and how to fix it.
It seems that Android, when filling a ShapeDrawable with a border, doesn't fill it to it's full size but just to the middle of the stroke. So, with a stroke of 2dp, it leave a space of 1dp all around. This can be noticed only when using alphaed borders, like I'm doing, because normally the border cover it.
Tho fix this behaviour, I used a LayerList drawable containing two ShapeDrawables, one for the solid color (with no borders) and one for the stroke (with no solid color):
<?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/base_frame_solid_color"
/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<stroke
android:width="#dimen/frame_border_size"
android:color="#color/base_frame_border_color"
/>
<padding
android:left="#dimen/frame_padding_size"
android:top="#dimen/frame_padding_size"
android:right="#dimen/frame_padding_size"
android:bottom="#dimen/frame_padding_size"
/>
</shape>
</item>
</layer-list>
It works, but being the border superimposed to the "solid" background, it's color need some adjustment.
How can I make this kind of drawable gradient with XML?
I can do a simple gradient from color A to color B but i don't know how to combine two gradients in the same drawable.
I finally found a solution with a layer-list which is good enough for me :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- First part is a gradient -->
<item android:left="0dp" android:right="0dp">
<shape android:shape="rectangle">
<gradient android:angle="-90" android:startColor="#9dcbf6"
android:endColor="#177ee6" />
</shape>
</item>
<!-- Second part is plain color. Slightly transparent -->
<item android:top="1sp" android:bottom="20sp" >
<shape android:shape="rectangle">
<solid android:color="#10ffffff"/>
</shape>
</item>
</layer-list>
The middle is set to 20 sp because the container has a 40sp height , but you can adjust to your will by editing : android:bottom="20sp"
You can have three colors in a gradient. A start color, end color and a center color.
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:usesLevel=["true" | "false"] />
Alternatively you can use a LayerList Drawable and just piece them together.