I've created a custom toolbar using a gradient inside a shape. It looks very nice, but since we only have the option for 3 colors (startColor, centerColor, endColor) it looks very round. I would like to do a glass effect, which requires a sharp change in color in the middle. Basically I need 4 colors (startColor, justabovecenterColor, justbelowcenterColor, endColor). Now I could have two shapes sitting on top of each other to get this effect, but I don't want to do this. I'm getting into some tricky UI customization here and that would be very difficult to manage on different sized screens.
Does anyone know how I can create a glass effect?
Have you considered using a NinePatch ? This would be a quick and easy way to make a good looking, scalable set of shapes...
Related
Some people from our company create some rule about UI design for Web, Android and iOS. They give us a bunch of icon for each platform. But when i look at Android platform icon, they using multi icon to create 1 icon. For example, button background, they use these 3 icon, 1 for left side, 1 for right size and 1 stretchable for middle.
I think this is how web normally design button background. But i don't think i should do the same for Android (Maybe iOS also don't do it this way but since i only work with iOS for a short time, i not really sure). Normally i would use a Shape or 9-patch drawable for this kind of background. So here i have 2 question:
Which 1 should i use for button background in this example. A shape? A 9-patch drawable? Or multiple icon like this? And which one is worst to use?
If i must have to use multiple icon like this, how to put multiple icon like them into single background?
If their way of doing thing here is incorrect, i need some good reason to talk to them and make them change their mind. So any1 please help me clear about this problem.
Thank you!
9-patch should be the first choice and then is shape. Don't use 3 icon.
9-patch is more easy to use and easy to change if the further design changes. When using shape, you need to define the corresponding XML. If in next version, the background color changes, you need to modify the XML, but with 9-patch you just need to replace the resource file.
The other benefit is that, 9-patch can be created in UI side, programmer's don't have to re-manipulate it if the resource is correctly created. But with shape, programmer needs to know the RGB color, and need to code the XML.
3 icon is not suitable here. First, you have other better options. Second, 3 icon means you need to create 3 views for each of them. Third, the button should have different effect when user click it, with other two options you can simply define selectors, but with 3 icon, there's no elegant solution.
I'm looking for way how to implement specific shadow (like on picture) in my android app Android, with using xml (I can't use 9 patch for this).
This is white rectangle with the same shadow in all directions.
Any idea?
As far as I know, there's no way to create a shadow efficiently with XML without using 9-patch image. You can try playing with shapes and gradients, but the result won't look good.
I also did some tests by adding several shapes with transparent borders, but again the result is not good.
Can you explain your situation (why can't you use 9-patch, which is well supported by android).
Hello fellow Android designers,
I am struggling right now to create xml tooltip that would look like the one on this picture:
Unfortunately it seems like a hell of a work. Till now I was only able to create a simple rounded rectangle like that:
Is it actually possible to create such a shape I have presented on the first photo using xml styling or should I try to create it programatically (which will probably take huge amount of time and creating border would be really hard)? Or maybe the simplest solution is the best and I should use partially transparent png image with the shape of my choosing?
Any advice would be much appreciated.
You can draw it using stretchable 9-patch drawable.
You can specify there which parts are fixed (the little knob on the left and corners) and which are stretchable (all other parts)
In my app I have something similar in appearance to labels in GMail app UI. For those who may not know, they look like this (labels are these colorful bars):
In order to achieve similar effect I use nine-patch drawables - for each label I am creating a TextView and assign drawable to it. This is simple solution, but I don't like it. It's not elegant, it is quite slow as shown by profiler, and I just don't think it's the right way to do it.
I changed the design of the UI to make it more "ICS-y", so I removed rounded corners from the labels. And I started thinking how I could replace 9-patch solution. The most obvious thing is to use BackgroundColorSpan. But it has one, small drawback. I want my labels to have some padding. With drawables, it was easy to achieve. With spans, it's harder. To make horizontal padding, I can just add spaces at the beginning and at the end of the string. But how to make vertical padding larger? To clear things up, this is a screenshot of the label with BackgroundColorSpan:
I want to make the colored parts above and below the text larger. I think I should use some kind of MetricAffectingSpan, but I couldn't figure out which one. Or maybe I should write my own? Or, finally, maybe spans are just not able to fulfill my needs and I should stay with images or create a canvas and "manually" draw everything as in GMail app?
The easiest way to do this, and im pretty sure the GMAIL app is making use of it, are shapes.
Just create a custom shape, in your case a rectangle shape with rounded corners and a solid color, and assign this drawable then to the background property of your textview.
A shape is defined in xml.
You will assign it as follows:
<TextView
...
android:background="#drawable/my_awesome_shape" />
One of the applications in my mobile has this glossy and transparent look(refer the snapshot below), which is quite beautiful. Just want to know how I can achieve this.
I am developing an application for myself and want to implement similar kind of GUI. Although I can create a layout, I am still not good in creating beautiful icons like the one shown above. Any information (or) a link to icon development related tutorials should also be quite helpful. Thanks everyone in advance.
Those are just PNG images with transparency and glossy effect... it almost has nothing to do with programming. Just find a good designer and tell him/her to do a 9patch image like that.
By the way... background buttons, in that case should have the border only. The icon and text can be then added easily.
You have to combine multiple techniques. You can use Button where the background will be defined with a nine-patch image, with rounded corners. Then you can use android:drawableLeft parameter of the Button, to define the icon it will have.
As also Cristian suggests, this is not hard to implement. You need a good designer and get to know the basic techniques like 9patch png images, transparency and basic layout definitions. Good luck