I am trying to achieve from code the following: (can't post images unfortunatelly)
A rectangle with rounded corners, with an emboss effect (the light comes from top left corner).
In the middle there is a circle engraved in the rectangle. Imagine a water surface, and a drop of water hits the surface. It creates a dent in the surface. That circle is also painted with some linear gradient.
The problem is I could only use the EmbossMaskFilter from Android to raise the surface, to make it closer to the user eye, but I don't know how to implement the opposite.
Anyone can help me with that?
Thank you very much.
Use a composite drawable, or drawables in layers.
To create a drawable with rounded corners and a gradient within, use something like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="10dp"/>
<gradient android:startColor="#color/gradientstart" android:endColor="#color/gradientend" android:angle="315"/>
</shape>
Create two such drawables and put them on top of each other to create the required effect.
Unless you use a pretty good number of layer-list items as a drawable you probably won't get the effect you are looking for easily with XML drawables. A better solution would be to create a 9-patch image. See how it works at draw9patch.com, which is a tool to create 9 patch images from a standard images.
NinePatch documentation: here.
In case, you still really want to use xml drawables you can still achieve the effect (although performance might take a hit) using a layer-list with multiple gradients stacked ontop of each other.
Related
How would I go about drawing a shape like this? I can't just use a half circle, because I want the edges to have a nice concave feel as they even out to flat. After that I'm looking to add a border to just the top part. How could this be done in xml?
You wouldn't use xml for this. Use an image, possibly a vector drawable.
I am creating a tiled background. I read may posts about using bitmap xml with repeat tile. The tile I am using is has a diamond shape. So when I do the tile there are black gaps in between the tiles.
I hope I am explaining myself. How can this be done so the whole screen is covered tiles (ie sides touching each other not only vertices)
Thank you
I am using this image
And this is the code
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/tile"
android:tileMode="repeat"
android:dither="true" />
What you want to achieve is impossible yet.
Images are always rectangle shaped. You see it as diamond just because corners of image are transparent. But it still has rectangle shape.
This is what actual image should look like,
But black corners are not visible because it has transparency set at the corners. That's why it looks like,
If your image had no transparency then your tiled background would look like,
And because of transparency at the corners it is looking like,
And what try to achieve is to overlap that blank space with diamond (because you say image is diamond shaped) which is not possible because images are always in rectangular shape.
And there's no library written yet which can ignore the alpha (transparency) of the image.
You should either use opaque image or leave the space blank in tiled background (if you use this image).
Perhaps change the way you are tiling your image? Maybe your initial image that you're tiling looks like this <> but maybe you want it to look like this >< ? It would be more helpful if you posted your image. Can you also post the code you're using to tile the bitmap?
I know how to make a background pattern repeating a bitmap.
I also saw a way to combine two bitmaps using Canvas.
But I want to make a repeating bitmap in combination with a gradient drawable to make a background.
I have a .png file that it's partially transparent and I want to repeat it along with a gradient drawable (normal gradient XML).
This is the PNG: http://subtlepatterns.com/?p=1203
Is there a way to do this?
Thanks in advance.
You can use an XML bitmap to create a tile pattern:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/my_png"
android:tileMode="repeat" />
Then you should be able to use this as part of a LayerList drawable that also includes your gradient. Then use the layer list as the background drawable.
I want to do intricate borders in my android popups like I see on the ipad.
example:
What I see here is a thick gradient blue border with alpha transparency at the top. As well as a drop shadow extending further from the background.
In android I've tried using shape objects for doing semi intricate backgrounds. This is just a white border.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#303030"/>
<stroke
android:width="1dip"
android:color="#ffffff"
/>
</shape>
but these are limited in that they can't accept images as variables here. I guess it would be awfully complex to do these kind of borders in Android. Like perhaps make a relativelayout or tables with the views having the pieces of the background. Kind of like an HTML layout.
Is there a better way to do complex and intricate borders in android? I'd like to make a polished skin kind of like how iOS has that one default that has a uniform aesthetic for iOS.
Yes it is complicated, but the good thing is you can reuse the layout you draw for all the components in your application, so you basically only have to do it once for each "style".
Here are a few pointers in which I've learned a lot about styling Android:
http://blog.donnfelker.com/2011/08/01/android-rounded-corners-with-a-beveldrop-shadow/
http://blog.stylingandroid.com/archives/378
Custom ImageView with drop shadow
Android: Using linear gradient as background looks banded
And here is the 9-patch image I use for drop-shadow (I think it's taken from one of the posts above)
I'm trying to bring out a glossy xml drawable gradient as a background to a layout. I am already using the start color and end color boring linear gradient.
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#242424"
android:endColor="#4e4e4e"
android:type="linear" />
</shape>
</item>
Is there any way to control its range of flow? Please some one help.
Edited:
Ok, I have done a little hack around method to get a nice glossy looking title bar,
Linear Layout (with a gradation - drawable background, specifying all
the start and end color values separately) Over this are the icons, (I
used Image buttons with transparent BG), and over this another Relative Layout (with may
be a drawable gradient or a fixed, grey color - for glossiness -
android:background="#20f0f0f0" ) Here 20 is defining the Alpha value.
P.S, This might not be a correct work around, but I'm quiet satisfied with this because switching themes according to clients needs is much faster when compared to 9 patch PNG files (hey, BTW this is just my opinion on it)
And this link is so informative on this,
you cant control its range of flow but instead you can use another property centerColor.
you should try the center color Property in gradient for glossy background.
i used this in my application .
<gradient
android:startColor="#FFF7F7F7"
android:centerColor="#FFCECFCE"
android:endColor="#FFBEBEBE"
android:angle="270"/>
hope this will work for you