In the image below is the effect I want(notice the subtle green at the bottom of the screen). I also want to use it as multiple screens so I want it to be the background. Is there any way to achieve this?
Set the png as background, or create a shape in xml:
Create an xml file - let's call it "gradient_background.xml"
<?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="#ff0000ff"
android:endColor="#00ffffff"/>
<corners android:radius="10dp" />
</shape>
Change the hex color values to the ones you want.
and add it as background to your ViewGroup e.g. LinearLayout:
android:background="#drawable/gradient_background"
EDIT:
To achieve what you mentioned in your comment, that the gradient height should stay fixed while positioned at the bottom, but the white area can stretch vertically, I suggest you use a nine-patch which you can create with the Draw Nine Patch Tool. Launch the tool from your SDK's tools folder - click the nine-patch bat file (and wait a while for it to launch, then import your png). You then draw black lines along the sides of your image to define which parts can be stretched, name the file something.9.png and reference it as background in your ViewGroup. Please see the linked-to documentation for details.
Related
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 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 added a full border around a view but I need to add just the corner as shown image below :
I mean the red corner only .
I tried to adjust the below border xml , but it didn't work :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="10dp" android:height="10dp" android:color="#B22222" />
<solid android:color="#FCE6C9" />
<corners android:radius="20dp" />
</shape>
Any help will be appreciated
I don't think it's possible to do this using a ShapeDrawable, as it would require you to use some sort of margin or padding on the drawable itself. There actually is a padding attribute, but unfortunately that only has effect on the content of the View, and not the drawable itself.
That being said, an easy solution would be to create a 9-patch in stead and apply that as background to the TextView. Just for demonstration purposes: make the 9-patch look somewhat like this:
Edit:
On second thought, there's actually another option that relies on using a LayerDrawable to create the desired effect. It's a bit tedious to create and I have my doubts it'll be more efficient than using a 9-patch, but at least you don't have to render out images, which means that if you need to make e.g. a change in colours, it's more straightforward.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded" />
<item android:drawable="#android:color/white" android:left="30dp"
android:right="30dp" />
<item android:bottom="30dp" android:drawable="#android:color/white"
android:top="30dp" />
<item android:bottom="30dp" android:left="10dp" android:right="10dp"
android:drawable="#color/pink" android:top="30dp" />
<item android:bottom="10dp" android:left="30dp" android:right="30dp"
android:drawable="#color/pink" android:top="10dp" />
</layer-list>
Some details: #drawable/rounded is the code snippet you posted yourself. The following two items are simply white rectangles with an offset, to create the white edges. Now, since these will also overlay the pink surface, we need two more pink rectangles (again with specific offsets) to counter that. The result is a background that looks exactly like what you're showing in your question.
Note that you might want to see if you can optimise this a bit. At the least I'd recommend not hardcoding the offsets (like I did for simplicity), but store them in a dimens.xml file so you can keep these values centralized and consistent by referencing them from both the ShapeDrawable and LayerDrawable.
Addendum: On pre-ICS (or perhaps pre-Honeycomb) devices, there appears to be an issue with directly referencing colours with the android:drawable attribute. You can however easily get around this by setting up another drawable (be it either a 9-patch or ShapeDrawable) to represent this colour. For example, in the snippet above, you would replace android:drawable="#color/pink" with android:drawable="#drawable/color_pink", where color_pink can simply be an xml file containing:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FCE6C9" />
</shape>
Obviously you will need to do the same for all other colours referenced in the LayerDrawable. Tested on Gingerbread 2.3.7.
I would create a 9-patch file and set it to be the background of the main container. The steps to do that would be.
You create the background you would like roughly in fireworks, illustrator, or whatever image editing software you prefer.
Then crop the artwork so that there is only a 1 pixel border around the artwork. Save it as a png.
Open the draw9patch.bat file in your android sdk folder on your computer C:\Program Files (x86)\Android\android-sdk\tools.
Open your png file. You can then use your mouse to click on the outer 1 pixel border which will turn the clicked pixels black. The areas that you have black pixels on both the top and bottom or on the left and right will be the area that is stretched. In your case you just want to have the middle area where there is no red stretched.
My personal preference is to just open the file above and save it as a 9 patch file. Then open it in my photo editing software to create a 1 pixel thick line in the same fashion as above. It is quicker and more precise.
Finally add the file to your drawable folder. Then set the background of your main view container to the drawable.
That should be it. Hope that helps.
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
If you create an outset border in CSS the browser varies the border colour for each edge to make the shape appear to protrude from its parent.
Is there an easy way to do this in an android layout or do I need to set each line colour manually?
Update - added example below:
Example http://www.witzelsucht.co.uk/googleplusheader.png
Set the background of an ImageView to a 9 patched drawable resource with the desired shadow/bevel around the edge. Lets say it takes 5 pixels to create the effect you want. Then set the padding of the ImageView to 5 pixels. Then set the bitmap to any image.
ImageView.setBackgroundDrawable
ImageView.setPadding
ImageView.setImageBitmap
Even easier, use a shape with a stroked border and set it as the background of the view:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00000000" />
<stroke android:width="1px" android:color="#ffffff" /></shape>
I'm not aware of any native support for Views to have borders. Your question reminded me of this question that I was looking at recently:
Is there an easy way to add a border to the top and bottom of an Android View?