So I have this image set as the background of a seekbar. On different screens, the image gets skewed so much that it is quite horrible. I tried doing a 9 patch, but obviously there are several regions I would like to scale so 9 patch wasnt the best option. What I would like to acheive is, have the background stretched and leave the numbers proportional. The numbers tend to eith stretch too much or shrink too much.
Any help is appreciated.
Thanks
The simplest option here is probably to create a GradientDrawable to set as the background of your view. You can see from the docs that GradientDrawable can take an array of colors in its constructor, and it will draw all those colors evenly spaced across whatever size the enclosing view end up to be. This is the same element used to create <shape> drawables in XML, but if you instantiate it in Java code you can add more than just three colors to the gradient scale.
Related
I am learning about Android UI and am unclear why people use nine-patch, when you could use vector graphics, because those are scalable without any pixel degradation. I am a beginner in Android, so I hope I am not missing anything here, but it seems like it would be easier to build vector graphics and use those. You would not need the special editor to build them.
Can anyone explain the advantages to using nine-patch over vector? (Don't just explain advantages of nine-patch, as that is already done on StackO., but rather the advantages that vector does not have). Because it seems like Android recommends nine-patch. Thanks.
In vector graphics all side are scale or stretch when we set it to any background whereas in 9-patch we can define which sides can scale or strech so at runtime only those side scale which we set it to scale in 9-patch tool.
from this
-> The advantage of using 9-patch images is that when using it as a background, for instance, the image won't stretch and loose proportions in different screen sizes. the center 'patch' will remain as is and the 'borders' patches will be stretched to fit the screen/view size.
let say you have this image.
and a button with fill parent width. if you set this image to button background it will scale completely and your image gets blur (mean t will expand to button width)and it will not look good. so what 9 - path tool do that you define that online scale some part of image let say if width is fill parent. dont scale whole image . let say we set that after t (in image). scale whole area, so t will not get blur. so this will make good your button.hope you got my point..:)
after making your image 9 patch and setting to button background. your button look like this.
instead of t(in image). whole area expand and fill the buttons width.
Imagine a button with rounded corners. How do you scale it? If you scale it only horizontally, you will have elliptic corners, which would be ugly.
This is what 9-patch is for.
i hate 9patches. i am quite attentive when doing my artwork. i don't even use photoshop. i go with illustrator.
i do everything right when exporting my artwork, i used to do my 9 patches with insane zoom on, maybe check afther that in photoshop for misplaced pixels...
** sad trumpet ** when put on a view, if i used some subtle round corners like 6px or 10px and a stroke everything looks awful at mdpi.
So I solved my problems by marrying the two. I wrote my own 9patch which uses vectors. :)
Everything looks like it's been touched by baby Jesus. Perfect corners, strokes and, best of all, you can use one asset for all the screen sizes, densities while, of course, no more transparent borders, wicked errors because 9patch won't stretch inward, so on and so forth.
I use vectors for icons too. While there sometimes are issues with various effects, these are minimal and easily avoided if you do some reading on how to avoid them.
Best of luck to all you guys!
This is a very basic example.
You can do whatever strikes your fancy. Because of the performance impact of svg's on an app, when first run [or when the user changes appearance options, i like to save the newly generated bitmaps as pngs, if possible.
You don't get any more "best of both worlds" than this.
You can define content are on a 9-patch image which means (for example) text will always be placed in that specific area, I think you cannot do this in Vector image. Android has built-in support for 9-path but for vectors you have to use a library.
9-patch rendering is easy to implement and efficient. If you have an image that can be scaled by stretching horizontal or vertical lines (e.g. buttons or rectangular icons), then use a 9-patch. If you have some icons that don't scale well, then create multiple versions at different resolutions and use Android's resource management to handle it. Both of these approaches are much easier and more efficient than vector graphics.
If you have large images or scenes to render, and you don't want to take up a ton of space with bitmaps, thats when you start thinking about vector graphics.
I am having trying to accomplish this kind of a design. It needs to stretch to accomodate difference screens but rather then stretching it should repeat the pattern, I think the picture is pretty self-explanatory. 9patch only wont cut it as it only stretches.
Thanks for your time
The simplest method to do what you want would be to use a shape drawable with the stroke element set on it to obtain that dash pattern.
You may be able to also do it with a layer-list drawable.
I am trying to create a drawable such as this in Android:
I don't think a nine patch will work because there is nowhere that can safety scale vertically. So next I tried a shape drawable but it does not support triangles.
I want to render this image on the fly so there are no artifacts. Also I want to be able to use it in a selector, so I need to be able to represent this image in xml. Maybe I need to extend some class to manually make the shape. If so how do I embed a tag in the xml to tell it where to render? Does anyone know where to start with this or have an example of something similar?
I have read the first 10 pages of hits on stack overflow and google and am not getting anywhere. Thanks very much for any help.
I think a 9-patch would work. For the vertical stretching on the left boundary, fill in the line from top to bottom.
I have a detailed background that has a hole in it (transparent area in the middle). The background is detailed png image.
Now I want this hole to be shown on all devices equally. So I thought of 9patch, but then the details get screwed of the image. If I don't use 9patch, the hole appears as an egg, which is not the point.
What is the way to fix this?
update
I used 2 different methods (depending on what is better in the excact case)
-different resources for different screens.
-Disadvantage: will increase you app size significantly
-Advantage: This is quit convenient for you to use
-Extend Drawable and give your Background and a alpha map (Alphamap in your case would be a ninepatch with 0xffffffff ouside and 0x00ffffff as color for your circle) over with the constructor.
Override draw(). Create
ComposeShader(
drawable1,
drawable2,
PorterDuff.Mode.MULTIPLY);
Set the shader to a paint and draw it on the canvas.
-Disadvantage: Not so convenient
-keeps you app size small :)
Which is better to use in Android and why?
Load a .png file that is 1x1 and has, obviously, one pixel of one color (ie #000)
Use an .xml drawable that contains a solid rectangle of the same solid color (#000)
Which is better to use in Android and why?
Use an .xml drawable that contains a solid rectangle of the same solid color (#000).
Why? Because that's the point of the XML layouts, is to enable developers to quickly make changes to visuals (in this case colors) without having to open image-editing software.
If you were to really only load a 1x1 PNG then some could argue the PNG loading is faster, but in reality, this is never going to happen. The point here is that it will be stretched or manipulated in some way, or set to tile as a background and this will eventually be slower than defining a background color or shape in Android XML Layout.
For a single color, use a color resource. http://developer.android.com/guide/topics/resources/more-resources.html#Color This will be more performant than a 1x1 stretched image or an xml drawable.
As general performance guidelines, solid colors are the cheapest, followed by unstretched bitmaps, followed by 9-patches and stretched bitmaps. Shape drawables are usually the most expensive at runtime.
i think that png is better, because is native and take less time to load.xml is needed parser, so is a little low than png. i think, but i never tried it.
UPDATE
i make a files with these specifications, and the results are those:
png 1x1 black dot [119 bytes]
xml rectangle blac [261 bytes]
UPDATE 2
Performance wise, what is typically better, using an image or a xml created shape as a drawable?