Créer des bitmaps redimensionnables (fichiers 9-patch)
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
L'outil Draw 9-patch est un éditeur WYSIWYG inclus dans Android Studio. Il vous permet de créer des images bitmap qui sont automatiquement redimensionnées pour s'adapter au contenu et à la taille de l'écran. Vous pouvez redimensionner les parties sélectionnées de l'image horizontalement ou verticalement en fonction des indicateurs dessinés dans l'image.
Pour une présentation des images NinePatch et de leur fonctionnement, consultez la section drawables NinePatch.
Figure 1. Une image NinePatch dans l'outil Draw 9-patch d'Android Studio
Suivez ces étapes pour créer une image NinePatch à l'aide de l'outil Draw 9-patch dans Android Studio. Vous aurez besoin de l'image PNG à partir de laquelle vous souhaitez créer une image NinePatch.
- Dans Android Studio, effectuez un clic droit sur l'image PNG à partir de laquelle vous souhaitez créer une image NinePatch, puis cliquez sur Create 9-patch file (Créer un fichier 9-patch).
- Saisissez un nom de fichier pour votre image NinePatch et cliquez sur OK. Votre image sera créée avec l'extension de fichier
.9.png.
- Double-cliquez sur votre nouveau fichier NinePatch pour l'ouvrir dans Android Studio.
Dans l'espace de travail qui s'ouvre, le volet gauche correspond à la zone de dessin dans laquelle vous pouvez modifier les lignes des zones étirables et la zone destinée au contenu. Le volet de droite est la zone d'aperçu, qui vous permet de prévisualiser votre image lorsqu'elle est étirée.
- Cliquez dans le périmètre d'un pixel pour tracer les lignes qui définissent les zones étirables et la zone de contenu (cette dernière est facultative).
Faites un clic droit pour effacer les lignes déjà tracées (sur Mac, cliquez en maintenant la touche Maj enfoncée).
- Lorsque vous avez terminé, cliquez sur File > Save (Fichier > Enregistrer) pour enregistrer vos modifications.
Ouvrez un fichier NinePatch dans Android Studio en double-cliquant dessus.
Pour vous assurer que vos images NinePatch se redimensionnent correctement, vérifiez que les zones étirables font au moins 2 x 2 pixels.
Sinon, ces régions risquent de disparaître lorsque vous les réduisez. Prévoyez également un pixel d'espace supplémentaire de sécurité avant et après les zones étirables pour éviter toute interpolation pendant le redimensionnement, qui peut entraîner une modification de la couleur au niveau des bordures.
Remarque : Un fichier PNG normal (*.png) est chargé avec une bordure vide d'un pixel ajoutée autour de l'image. Vous pouvez dessiner les zones étirables et la zone de contenu dans la bordure.
Un fichier NinePatch précédemment enregistré (*.9.png) est chargé tel quel, sans zone de dessin ajoutée, car elle existe déjà.
Figure 2. Image de NinePatch dans Android Studio, affichant la zone de contenu ainsi que les zones étirables réussies et incorrectes.
Les commandes facultatives sont les suivantes :
- Zoom (Zoomer) : ajuste le niveau de zoom de l'élément graphique dans la zone de dessin.
- Patch scale (Ajustement de l'échelle de la zone) : ajuste l'échelle des images dans la zone d'aperçu.
- Show lock (Afficher la zone verrouillée) : permet de visualiser la zone non dessinable de l'image lorsque l'utilisateur passe la souris dessus.
- Show patches (Afficher les zones étirables) : affiche un aperçu des zones étirables roses dans la zone de dessin. Le rose indique une zone étirable, comme illustré à la figure 2.
- Show content (Afficher le contenu) : met en surbrillance la zone de contenu dans les images en aperçu. Le violet indique la zone où le contenu est autorisé, comme illustré à la figure 2.
- Show bad patches (Afficher les zones étirables incorrectes) : ajoute une bordure rouge autour des zones qui peuvent produire des artefacts sur l'image lorsqu'elles sont étirées, comme illustré à la figure 2. Si vous éliminez toutes les zones incorrectes, vous conservez la cohérence visuelle de votre image étirée.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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."]]
