9.png new image will be generated with the same image name. Step 3, Copy image to Android Studio drawable, then right-click and choose menu item "Create 9-Patch file.". There is one pitfall when convert: I must prefix with png32, or else will get black 9-patch image, see this thread. Rm lala* convert my_image_trim.png -crop 310 repage adjoin png32:lalad.png #cut redundant/repeat center partĬonvert append lala02.png lala05.png png32:out_right.png #append left/right images side by sideĬonvert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi I personally use the ImageMagick command line tool to convert it, e.g.: convert -trim 'my_image.png' png32:my_image_trim.png #trim extra transparent surrounded image Step 2, That image desired expandable field must shorter (by removing redundant/repeated color part) as possible since 9-patch no such thing "reduce", but "expand" the image. Step 1, Since you are not familiar yet, prepare a xxxhdpi png big image to play around first. See also the Android developer info about 9-patch images: The colors in the border determine if a piece is static (doesn't scale), it stretches, or it repeats. The images can be sliced up into even smaller pieces.ĩ Patch images contain an index of which piece is what by adding a 1px border to the image. With that explanation and the advent of CSS3 you might think that there is no reason to use 9 patch images but the name '9 patch' is a misnomer. The four corners wouldn't change sizes at all but would be static while the other 5 pieces would be stretched or repeated to allow the whole image to scale appropriately. The simplest example would be if you were to take a rounded div and slice it up into 9 squares like you would a tic-tac-toe board. This tutorial has some great examples at the end that answer the second part of your question, explaining how the scaling works - not just for buttons - but also frames, and it has a complete example project that you can download and play with.ĩ Patch images are stretchable, repeatable images reduced to their smallest size. If the padding lines aren't included,Īndroid uses the left and top lines to define this drawable area.īut the docs lack good examples. That all the text occupies only the area designated by the right andīottom lines (if included). If a View object sets the NinePatch graphic as itsīackground and then specifies the view's text, it stretches itself so (effectively, the padding lines) by drawing a line on the right and a You can also define an optional drawable section of the image The stretchable sections stays the same, so the largest section always Have as many stretchable sections as you want. Other border pixels should be fully transparent or white). You indicate a stretchable section by drawing one (or more)ġ-pixel wide black line(s) in the left and top part of the border (the Use the border to define the stretchable and static areas of the It must be saved with the 9.png extension in the In summary, nine patch images' most important advantage is that they can specify (non-contiguous) areas to scale:Ī NinePatch graphic is a standard PNG image that includes an extraġ-pixel border. The official documentation has improved over the years. It has a simple but clever default image. Here is a nicer one which is also open source. The results imply that the color appearance of the test patch is not determined by the retinal chromatic adaptation, but by the brain adaptation to color of the illumination in the space.The SDK and Android Studio both ship with the "Draw 9-patch" tool ("draw9patch" in the SDK tools folder) which is a simple editor. This returning to the original colors was not influenced by green color of objects densely placed in the test room or by red color of objects again densely placed in the test room. To recognize the test room as a space was essential to perceive the real color of the test patch. When the window was the smallest so that only the test patch was seen within the window the color of the test patch appeared almost opponent to the illumination color, but as soon as something is seen within the window of larger size the color returned to the original color of the test patch to indicate the color constancy. Color appearance was measured for a test patch which was placed in a test room illuminated by the daylight type of illumination and was looked at from the subject room illuminated by one of the four colored illuminations, red, yellow, green, and blue, through a window of three different sizes.
0 Comments
Leave a Reply. |