9 patch android studio

Your image will be saved with the .9.png file name.

To make sure that your NinePatch graphics scale down properly, verify that any stretchable regions are at least 2×2 pixels in size. Otherwise, they may disappear when scaled down. Also, provide one pixel of extra safe space in the graphics before and after stretchable regions to avoid interpolation during scaling that may cause the color at the boundaries to change.

Note: A normal PNG file ( *.png ) will be loaded with an empty one-pixel border added around the image, in which you can draw the stretchable patches and content area. A previously saved NinePatch file ( *.9.png ) will be loaded as-is, with no drawing area added, because it already exists.

Optional controls include:

• Zoom: Adjust the zoom level of the graphic in the drawing area.
• Patch scale: Adjust the scale of the images in the preview area.
• Show lock: Visualize the non-drawable area of the graphic on mouse-over.
• Show patches: Preview the stretchable patches in the drawing area (pink is a stretchable patch).
• Show content: Highlight the content area in the preview images (purple is the area in which content is allowed).
• Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched. Visual coherence of your stretched image will be maintained if you eliminate all bad patches.

Источник

Android nine-patch — растягиваем андроида

Рекомендации по созданию UI виджетов и некоторых блоков приложений для ОС Android предписывают нам использовать блоки с закруглёнными углами и/или с эффектом объема, отбрасывающие тени. Какие же инструменты нам дает SDK для реализации таких интерфейсов?
При описании простых векторных форм без дополнительного оформления углов и краев блока рекомендуется использовать shape формы. Если в блоке имеются сложные графические элементы по углам или с краев блока можно использовать Nine-patch изображения, о которых и пойдет речь в этой статье. На случай сложного оформления блока, например в виде единого объекта, остается использовать только фиксированное изображение, что уменьшит рамки масштабирования и не даст изменить соотношение сторон блока.

Итак, что же такое 9-path? Фактически это обычное изображение (.png), в котором края размером в 1 пиксел содержат некую служебную информацию, которую может интерпретировать графическая подсистема Android.
Эта служебная информация делится на две составляющие: информация для корректного масштабирования блока и информация об области размещения контента в блоке. При отсутствии первой – изображение будет масштабироваться целиком (всегда нужно указывать и горизонтальную и вертикальную полосы масштабирования, или не указывать обе), второй – контент будет размещаться по всей площади изображения.

Теперь о том, как задается эта информация. Верхняя и левая часть рамки задают масштабируемые области, правая и нижняя – область отображения контента. При этом прозрачные пикселы обозначают неотмеченную область, а черные (#000000) – отмеченную. Подробнее на картинке.

Теперь попробуем сделать свое 9-patch изображение. Как я писал выше, это должна быть рамка со сложными углами и/или краями, поэтому я нагуглил такую картинку:

Чтобы сделать из этой обычной картинки 9-patch можно воспользоваться любым графическим редактором, поддерживающим *.png или специальной утилитой draw9patch, которая наверняка уже лежит у вас в папке tools в месте установки Android SDK. Преимущество этой утилиты в том, что результаты масштабирования и область размещения контента наглядно показываются в окне редактора. А также утилита дает редактировать только рамку, не позволяя случайно чиркнуть на изображении.

Запустим приложение, откроем нашу рамку (File > Open 9-patch) и отметим повторяемые области и область размещения контента.

В правом блоке утилиты можно увидеть результат масштабирования.
Теперь необходимо сохранить полученное изображение c расширением *.9.png. Затем добавить в проект, в папку /drawable/ (если вы не предусматриваете различных вариантов изображений для разных устройств ldpi/mdpi/hdpi ) и использовать его как фон для различных элементов управления (без расширения .9).

В ОС Android nine-path используется для определения вида кнопок, полей ввода, выпадающих списков и т.д. Вы можете модифицировать эти изображения для своих разработок, взяв их из папки: android_sdk\platforms\android-8\data\res\drawable-hdpi.

Источник

Tek Eye

When designing a User Interface (UI) you may want to change the default View backgrounds to give an app its own look. In most cases the backgrounds must be able to scale correctly for different size screens on a variety of devices. Android uses Nine Patch files to provide support for scaling of backgrounds as View sizes change.

In the following image the word Text has a background that is a rounded rectangle (a black border with a grey background). The rectangle has then been uniformly scaled to fit in Longer Text. As a result of scaling the corners and vertical edges have distorted to give the rounded rectangle an unbalanced look. Compare that to the second Longer Text where the background has maintained its balance.

To correctly scale the background selected parts of the image are scaled in a particular direction or not scaled at all. Which parts are scaled and in which direction are shown in this diagram.

The X indicates that corners are not scaled, the vertical edges are scaled vertically, the horizontal edges are scaled horizontally and the central area is scaled in both directions. This is probably why it is called a Nine Patch file, a.k.a 9patch.

• 4 Corners +
• 2 Vertical Edges +
• 2 Horizontal Edges +
• 1 Central Area
• = 9 Areas (Patches) in Total

(This Android 9 patch tutorial assumes that Android Studio is installed; a basic App can be created and run; and code can be correctly copied into Studio. For this test App the Application name is called Nine Patch and an Empty Activity is used. You are free to change this example for your own requirements.)

Button and Image Borders in Android with 9 Patch Images

In the example project that follows the background of an EditText is replaced with a solid turquoise background with black border. The required rounded rectangle is drawn in a graphics program, such as Gimp or Paint.NET. In the picture below Inkscape has been used to create a 32×32 pixel background that will be used for the nine patch file, transparency is shown here as a checkerboard.

The rectangle is made as small as possible (almost resembling a circle) to support small Views. The 32×32 pixel image exported from Inkscape has a one pixel border and transparent background.

Android needs to know which proportion of the vertical and horizontal edges need to be scaled, and where the View content sits in relation to the background. These factors are determined from indicators drawn within the image. To apply these indicators the draw9patch program supplied in the Android SDK tools folder is used. Start the program (in Windows run draw9patch.bat) and open the background image (or drag and drop onto the draw9patch dialog).

The draw9patch program will expand the image by one pixel all around. It is on this extra one pixel edging that indicator lines are drawn. Enlarge the image using the Zoom slider. In the left hand and top edges draw the indicator lines to mark which of the vertical and horizontal pixels can be duplicated for scaling. In the right hand and bottom edges draw the indicator lines to show where content can be positioned. Use the check boxes to help visualise the effects of the nine patch scaling.

Save the marked file in the res/drawable folder for a project. Android determines if an image is scaled using Nine Patch scaling instead of uniform scaling via the file name, it must have .9 before the .png file extension. For example an image file originally named turquoise.png would now be named turquoise.9.png. To reference the image as the background for a View use the background attribute, as in android:background=»@drawable/turquoise». In the following image a Plaintext (an EditText) has been dropped on to the default Empty Activity from the Palette. The background is then set to the Nine Patch file generated as above.

To indicate focus for keyboard support combine the image with another one in a selector file (similar to the selector file in the tutorial ImageButton Graphics with Inkscape Example). Here an orange version of the background rectangle is drawn to support focus indication.

The bitmap is changed to a Nine Patch file as before and saved to turqfocus.9.png in the res/drawable folder. The selector XML file (here as selector.xml) is then saved in the same res/drawable folder:

Reference it as android:background=»@drawable/selector» (see the tutorial ImageButton Graphics with Inkscape for another selector file example). In the following example EditTexts with the nine patch background create above are shown with different text sizes.

Nine Patch files are not restricted to simple View backgrounds. This Nine Patch file is used to frame a photograph. The left and top scaling indicators are spaced where detail that must not be scaled is located. Here it is the small hearts that must not be scaled otherwise they will be distorted.

Download the example project code in ninepatch.zip for this tutuorial ready for importing into Android Studio. See the instructions in the zip file. The zip file can also be accessed via the Android Example Projects page. A version of this article was produced for the Android Cookbook.

Summary

• Generate or obtain the bitmap that will be scaled as a View background.
• Open the bitmap in the draw9patch program.
• The bitmap is automatically expanded with a one pixel border.
• Add the indicator lines for content placement and unscaled area on the new one pixel border.
• Save the new bitmap in the res/drawable folder for the project with a .9.png extension.
• Reference the new Nine Patch bitmap from the background attribute of a View.

The pink heart frame used in this article was derived from an image from the Open Clip Art Library.

Archived Comments

dapple on February 5, 2014 at 1:47 am said: Thanks, this is a really good intro to patch 9.

ankit on April 18, 2014 at 9:44 am said: Thanks for sharing this nice tutorial.

Author: Daniel S. Fowler Published: 2012-02-25 Updated: 2017-03-29

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Free Android Projects and Samples:

Источник