Criar bitmaps redimensionáveis (arquivos 9-patch)
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
A ferramenta Draw 9-patch é um editor de WYSIWYG incluído no Android Studio. A ferramenta permite criar
imagens em bitmap que são automaticamente redimensionadas para acomodar o conteúdo da visualização e o tamanho da
tela. É possível dimensionar partes selecionadas da imagem na horizontal ou vertical com base em indicadores
desenhados na imagem.
Para uma introdução aos gráficos do NinePatch e como eles funcionam, leia
Drawables NinePatch.
Figura 1. A ferramenta
Draw 9-patch do Android Studio mostrando uma imagem NinePatch.
Siga estas etapas para criar um gráfico NinePatch usando a ferramenta Draw 9-patch no Android
Studio. Você vai precisar da imagem PNG da qual quer criar uma imagem NinePatch.
- No Android Studio, clique com o botão direito do mouse na imagem em PNG da qual você quer criar
uma imagem NinePatch e depois em Create 9-patch file.
- Insira o nome de arquivo da imagem NinePatch e clique em OK. A imagem
será criada com a extensão
.9.png.
- Clique duas vezes no novo arquivo NinePatch para abri-lo no Android Studio.
No espaço de trabalho aberto, o painel esquerdo é a área de desenho, onde você pode editar
as linhas dos patches esticáveis e da área de conteúdo. O painel à direita
é a área de visualização, onde é possível conferir a imagem depois de esticada.
- Clique dentro do perímetro de 1 pixel para delinear as linhas que definem os trechos esticáveis
e a área (opcional) do conteúdo.
Clique com o botão direito do mouse para
apagar linhas desenhadas anteriormente (no Mac, mantenha a tecla Shift pressionada e clique).
- Quando terminar, clique em File > Save para salvar as alterações.
Para abrir um arquivo NinePatch existente no Android
Studio, clique duas vezes nele.
Para garantir que as imagens NinePatch sejam dimensionadas para um tamanho menor corretamente, verifique se
alguma região esticável tem pelo menos 2 x 2 pixels.
Caso contrário, essas regiões podem desaparecer quando reduzidas. Para evitar interpolações durante o escalonamento,
que podem fazer com que a cor nos limites mude, forneça um pixel de espaço seguro
extra nos gráficos antes e depois das regiões esticáveis.
Observação: um arquivo PNG normal (*.png) é
carregado com uma borda vazia de um pixel adicionada ao redor da imagem. Você pode desenhar
os patches esticáveis e a área de conteúdo dentro da borda.
Um arquivo NinePatch salvo anteriormente (*.9.png) foi carregado no estado em que se encontra,
sem nenhuma área de desenho adicionada porque ele já existe.
Figura 2. Imagem NinePatch no Android Studio
mostrando conteúdo, patches e patches inadequados.
Os controles opcionais são:
- Zoom: ajusta o nível de zoom da imagem na área de desenho.
- Patch scale: ajusta a dimensão das imagens na área de visualização.
- Show lock: mostra a área não desenhável da imagem ao passar o cursor.
- Show patches: mostra uma prévia em rosa dos patches esticáveis na área de desenho. A cor rosa
indica um patch esticável, como mostrado na figura 2.
- Show content: destaca a área de conteúdo nas imagens de visualização. A cor roxo indica a
área em que o conteúdo é permitido, como mostrado na figura 2.
- Show bad patches: adiciona uma borda vermelha em torno dos trechos que podem
produzir ruídos ou distorções na imagem quando esticada, conforme mostrado na figura 2. Se você eliminar todos os patches
inadequados, vai manter a coerência visual da imagem esticada.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-27 UTC."],[],[],null,["# Create resizable bitmaps (9-patch files)\n\nThe Draw 9-patch tool is a WYSIWYG editor included in Android Studio. The tool lets you create\nbitmap images that automatically resize to accommodate the contents of the view and the size of\nthe screen. You can scale selected parts of the image horizontally or vertically based on indicators\ndrawn within the image.\n\nFor an introduction to NinePatch graphics and how they work, read\n[NinePatch drawables](/guide/topics/graphics/2d-graphics#nine-patch).\n\n**Figure 1.** Android Studio's\nDraw 9-patch tool displaying a NinePatch image.\n\nFollow these steps to create a NinePatch graphic using the Draw 9-patch tool in Android\nStudio. You'll need the PNG image that you'd like to create a NinePatch image from.\n\n1. In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click **Create 9-patch file**.\n2. Enter a filename for your NinePatch image and click **OK** . Your image will be created with the `.9.png` file extension.\n3. Double-click your new NinePatch file to open it in Android Studio. \n\n In the workspace that opens, the left pane is your drawing area, where you can edit\n the lines for the stretchable patches and content area. The right\n pane is the preview area, where you can preview your graphic when stretched.\n4. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) the content area. \n\n Right-click to erase\n previously drawn lines (on Mac, hold Shift and click).\n5. When done, click **File** \\\u003e **Save** to save your changes.\n\nTo open an existing NinePatch file in Android\nStudio, double-click the file.\n\nTo make sure that your NinePatch graphics scale down properly, verify that any\nstretchable regions are at least 2x2 pixels in size.\nOtherwise, those regions may disappear when scaled down. To avoid interpolation during scaling\nthat may cause the color at the boundaries to change, provide 1 pixel of extra safe\nspace in the graphics before and after stretchable regions.\n\n**Note:** A normal PNG file (`*.png`) is\nloaded with an empty 1-pixel border added around the image. You can draw\nthe stretchable patches and content area within the border.\nA previously saved NinePatch file (`*.9.png`) is loaded as-is,\nwith no drawing area added because it already exists.\n\n**Figure 2.** A NinePatch image in Android Studio\nshowing content, patches, and bad patches.\n\nOptional controls include:\n\n- **Zoom**: Adjust the zoom level of the graphic in the drawing area.\n- **Patch scale**: Adjust the scale of the images in the preview area.\n- **Show lock**: Visualize the non-drawable area of the graphic on mouse-over.\n- **Show patches**: Preview the pink stretchable patches in the drawing area. Pink indicates a stretchable patch, as shown in figure 2.\n- **Show content**: Highlight the content area in the preview images. Purple indicates the area where content is allowed, as shown in figure 2.\n- **Show bad patches**: Adds a red border around patch areas that may produce artifacts in the graphic when stretched, as shown in figure 2. If you eliminate all bad patches, you will maintain the visual coherence of your stretched image."]]
