CODEWITHSUNDEEP
androidvector-graphicsnine-patch
dontknowhy
dontknowhy

Reputation: 2896

nine patch vs vector in android

Nine-patch versus Vector graphics

I read this one and still don`t understand so,

I am trying to use nine patches or vectors because it is too annoying to prepare all bitmap files by resolution in my project.

I know that both are used to show the same size and image when viewed at different screen resolutions.

but I don't know what is different in detail. Besides the fact that nine patches are more optimized for buttons.

Can I make all images and icons in my Android project as a vector or nine-patch?

Upvotes: 0

Views: 1874

Answers (2)

Lokesh Desai
Lokesh Desai

Reputation: 2677

Let me give you brief idea about this.

NinePatchDrawable:

A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. An example use of a NinePatch is the backgrounds used by standard Android buttons — buttons must stretch to accommodate strings of various lengths. A NinePatch drawable is a standard PNG image that includes an extra 1?pixel?wide border. It must be saved with the extension .9.png, and saved into the res/drawable/ directory of your project. The border is used to define the stretchable and static areas of the image. You indicate a stretchable section by drawing one (or more) 1?pixel?wide black line(s) in the left and top part of the border (the other border pixels should be fully transparent or white). You can have as many stretchable sections as you want: their relative size stays the same, so the largest sections always remain the largest. You can also define an optional drawable section of the image (effectively, the padding lines) by drawing a line on the right and bottom lines. If a View object sets the NinePatch as its background and then specifies the View's text, it will stretch itself so that all the text fits inside only the area designated by the right and bottom lines (if included). If the padding lines are not included, Android uses the left and top lines to define this drawable area. To clarify the difference between the different lines, the left and top lines define which pixels of the image are allowed to be replicated in order to stretch the image. The bottom and right lines define the relative area within the image that the contents of the View are allowed to lie within.

VectorDrawable:

Unlike bitmaps, vector images are not based on pixel patterns, but instead use mathematical formulas to draw lines and curves that can be combined to create an image from geometric objects such as circles and polygons. Vector images are edited by manipulating the lines and curves that make up the image using a program such as Adobe Illustrator.

Vector images have some important advantages over bitmap images. Vector images tend to be smaller than bitmap images. That’s because a bitmap image has to store color information for each individual pixel that forms the image. A vector image just has to store the mathematical formulas that make up the image, which take up less space.

Vector images are also more scalable than bitmap images. When a bitmap image is scaled up you begin to see the individual pixels that make up the image. This is most noticeable in the edges of the image. There are ways of making these jagged edges less noticeable but this often results in making the image blurry as well. When a vector image is scaled up, the image is redrawn using the mathematical formula, so the resulting image is just as smooth as the original.

The three most popular image formats used on the Web (PNG, JPEG, and GIF) are bitmap formats. The Scalable Vector Graphics (SVG) format comes in a distant fourth due to a legacy of poor support for vector graphics in early browsers. Today however, all major browsers support the SVG (Scalable Vector Graphics) format.

Bitmap formats are best for images that need to have a wide range of color gradations, such as most photographs. Vector formats, on the other hand, are better for images that consist of a few areas of solid color. Examples of images that are well suited for the vector format include logos and type.

You can also refer this link: http://www.gkmit.co/articles/vector-drawable

Hope this will help you. Let me know if you have any other doubts.

Upvotes: 2

Chiu Mak
Chiu Mak

Reputation: 1

nine-patch: nine-patch is the way to stretch the area you defined in extra one pixel, so it can adapt to all resolution.

vectors: Vectors is the way how to draw image in specific width and height you set.

Upvotes: 0

Related Questions