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
Related
I'm currently drawing a simple rounded rectangle using an XML drawable (black BG for contrast):
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white"/>
<corners android:radius="15dp" />
</shape>
What I would like to achieve is adding an inside outline/glow that is a gradient so that it looks like this:
I know it will most likely involve several XML gradient elements in a layer list, but where I get stuck creating this is figuring out how to:
Have the gradient follow the curves in the corners since they are rounded (always face towards the center of the rectangle, or as close as possible)
Avoid the effect having double intensity in the corners like it is in the example. This will happen if 4 gradients are simply overlapped or a radial gradient stretched to a ellipse is used. The density of the outer color needs to be consistent all the way around the rectangle, or as close as possible
It is highly preferable if feasible that the implementation is modifiable so that:
I can control how far into the rectangle the gradient reaches
I can control how quickly the gradient fades at any given distance (control its density/intensity)
I can remove any side from the gradient so that I can have only 1 or 2 edges and their corners glow if needed
This is a perfect example of what I need except that it is obviously much simpler to do with a circle and a radial gradient. I need this consistent pattern but with the rounded rectangle:
My goal is to display a circular image, and allow the user to set its foreground and background colors respectively, for example:
My attempt was to create an image asset with transparent background, then use ImageView::setColorFilter to change its foreground, and use ImageView::setBackgroundColor to set its background. The image asset looks like this:
My problem is that pixels outside of what we humans call 'border' are also transparent, so the result looks like this:
How do people usually deal with this issue? Although I was doing Android development, but any ideas or code snippets in any language are appreciated!
at the first, you must create a new drawable file and write below code for creating the circle with yellow color with blue border:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#cab816" />
<size android:width="50dp"
android:height="50dp"/>
<stroke android:width="2dp"
android:color="#color/darkBlue"/>
</shape>
and now you must set this drawable to the background of your imageview and set your image with src.
if your image covered all of this circle, use padding for decrease image size.
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!).
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));
I'm trying to have a perfectly round shaped button.
I have tried with the below code using shape.
but issue i am facing is that when the view has two text in it, it looks almost a circle but as soon as the view has one and three character in it it looks oval shaped.
shape code
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<corners android:bottomRightRadius="20dip"
android:bottomLeftRadius="20dip"
android:topRightRadius="20dip"
android:topLeftRadius="20dip"
/>
</shape>
Please check the nearly rounded shaped button where number 2 and 22 are written in the picture
I have used the same code for all of the buttons(mentioned above)
In your layout file (or in code), keep the dimensions of the Button fixed (width=height=some dp).
In example:
layout_width="48dp"
layout_height="48dp"