I am trying to provide a simple solid-color underline to a TextView header. I want this to be reusable and to work with any view in the future, regardless of height. I am trying to favor a background drawable so I can simply apply it to view. I can draw a line without any problem:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:shape="line"
>
<stroke
android:color="#8a9299"
android:width="1dp"
/>
</shape>
This line is, however, centered in the background of the view. I see a bunch of online tutorials that use layers to draw a background-colored rectangle and then "peek" another rectangle from behind, however I don't know what background color this header element type will be used on, and transparent rectangle backgrounds show the color rectangle below. Is there any way to stick to a line but give it a bottom gravity inside the view it is applied to?
This can be achieved using gradientDrawable. Here you go:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#000000"
android:centerColor="#android:color/transparent"
android:centerX="0.1" />
</shape>
Increase/Decrease centerX to increase/decrease width of your underline. Change startColor to change the color of the underline.
Explanation:
angle is the angle of the gradient. 0 is left to right. 90 is bottom to top.
startColor is the start color of the gradient. Our angle is 90 so the gradient starts from bottom (and so it appears like an underline)
centerColor is the centerColor which is transparent.
centerX is the X position of the gradient as a fraction of the width. Keep it small (<0.1) for a good looking underline. Anything above 0.1 looks bad (nobody is stopping you though!).
Related
I have a linear gradient defined as a drawable in xml with the following:
<?xml version="1.0" encoding="utf-8" ?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#android:color/transparent"
android:centerColor="#color/CenterColor"
android:endColor="#android:color/transparent"
android:gradientRadius="100"
android:centerX="0.5"/>
</shape>
CenterColor is defined as #E6E7E8.
My view is defined as:
<View
android:id="#+id/addressGradientDivider"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/addressTextView"
android:layout_marginTop="#dimen/NormalVerticalMargin"
android:layout_marginLeft="#dimen/SmallHorizontalMargin"
android:layout_marginRight="#dimen/SmallHorizontalMargin"
android:background="#drawable/DetailsGradientDivider"/>
The result is a gradient like the following:
For whatever reason the gradient is fading in the middle and I can't figure out why. I have also tried setting the gradient programmatically and got the same results.
Why is the gradient fading in the middle and how can I get the darkest part of the gradient to be in the center?
I think the reason is #android:color/transparent is #00000000 the transparent of black (#000000) and also your centerColor is very light gray.
The center color that you see as fading is actually #E6E7E8.
So, if you blend this transparent of black and very light gray, you will see slightly darker gray in between when the alpha is not fully 00.
If you change the startColor to #00FFFFFF (transparent of white), you will not see the gray gradient at 25% and 75% position. Though, the centerColor is very close to white, so it is even hard to see the gradient.
In android , i want to fill only a part of the background (for example 70% from right or left) of a view by a color like black programitically.
How can I do that?
You could use (shape, gradient) to achieve this effect.
Android set the background color can be defined in a xml res/drawable,
as follows:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="0"
android:endColor="#000"
android:startColor="#FFF" />
</shape>
Shape is used to define the shape, gradient inside the definition of the shape of the gradient fill, startColor starting color, endColor end color, angle indicates the direction angle. When the angle = 0, the gradient from left to right.
Then set shape to view background.
android:background="#drawable/background"
Just create a BitmapDrawable 10px wide #1px high, fill it with Color.TRANSPARENT and then draw a line from 0,0 to x,0 using your desired colour. Use Canvas to achieve all that.
Then call yourcontrol.setBackgroundDrawable(bitmap) an you're done
I have a TextView, to which I want to add a solid color background. I want this background only have the borders fading to transparency. Like this picture here, but instead of a photo, it's only a solid color. http://i.imgur.com/zAoazUy.png (Sorry I cannot post images yet)
This TextView is dynamically generated so its size can vary. The gradient has to end to transparent.
Is this possible? I fiddled a lot with XML Drawable ressources but got to nothing remotely close to what I want.
Thanks in advance
PS: (Picture stolen from Draw transparent gradient with alpha transparency from 0 to 1)
You have to define gradient in drawable folder ,startColor can be any color of your choice but for endColor use argb value to get transparent effect at corner
grad.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:type="radial"
android:gradientRadius="250"
android:startColor="#0000ff"
android:endColor="#64ffffff"/>
</shape>
and then simply use in textView
textView.setBackground(getApplicationContext().getDrawable(R.drawable.grad));
Im trying to achieve a component to make custom shadows to buttons or other components, i know that it will be easier with a 9patch or a png with the shadow, but i want to change it color and size programmatically also in its states (pressed,etc), so i decided to try with 9 images, all in XML so the shadow shades start its gradient from the side of the component.
<!-- Left Shadow layer -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#FFFF0000"
android:startColor="#00FF0000" />
</shape>
</item>
It looks good, the problem is on the corners and with the android:gradientRadius parameter now its set to a fixed size, but in the contextual help is said that can be set in a percentage of the base size 10% or parent size 10%p, what i want its to set a 100%p radius so the gradient will always go from the main color and disappear in the edge of the square.
-- EDIT --
The android doc about gradientRadius gradientRadius
<shape android:shape="rectangle" >
<gradient
android:endColor="#00FF0000"
android:startColor="#FFFF0000"
android:gradientRadius="18"
android:centerX="100%"
android:centerY="100%"
android:type="radial" />
</shape>
And thats where im now :( i do not know how can i set this size to fit its parent view.
Any help will be appreciated, when im finished with the component i will put the code in an answer :) so typical buttons can have customizable shadows in xml.
An image of the deserved component.
--Edit--
Im still interested in this :) no one has a clue?
I think you should give up with xml and implement drawable in code.
When you extend Drawable class you can get size as rectangle with getBounds(). Also you can dynamicaly recalculate in onBoundsChange method.
You can also easily construct gradients and use them in Paint object (setShader method)
I want to create a button background (or button itself) that look exactly like the below one.
I'm doing it currently with an image. I tried to create a similar one using the following XML, but it doesn't look as expected.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#f0600000"/>
<stroke
android:width="10dp"
android:color="#FFFF6666"/>
</shape>
Actually I want a round button with 3 pixel shadow and 1/4 width stroke in red color around the white circle. I have not succeeded with the shadow part at all. Thanks for any sort of help.
Well, the solid fills the middle and stroke paints the border. Since you want 3 colors you will have to use 2 drawables, painting white circle over the red circle with grey border. You can then use LayerDrawable to keep these as one unit