Nine-patch editor
As you know – there is a standard WYSIWYG editor for nine-patch (.9.png) files within the dev tools for Android developers. Once i have started integrating nine-patch file format support into Swing components i noticed that its really inconvenient to use. So i got an idea to create my own small nine-patch file editor…
After working a few days of work i have finished it:
The main advantages
1. Comfortable WYSIWYG editor – easily add, move, resize and remove patches
2. Mistakes-free editor – it won’t allow you to create any incorrect patches data
3. Quick preview – see all the changes you do in realtime on a small preview with custom content
4. Changes history and patches copy/paste tools included
Upcoming changes
1. Possibility to work with multiple nine-patch images at the same time
2. Patches data synchronization between multiply opened nine-patch images
3. Additional editor tools and visual settings
4. Possibility to save opened nine-patch images as a separate project
5. Possibility to perform basic edit operations with image (move, crop, per-pixel-draw)
As you can see – there is still a lot of things to do to improve the editor, but it is already much more user-friendly than Android standard editor. If you don’t believe me – just try it 😉
Download
You can always download the latest version here:
https://github.com/mgarin/weblaf/releases
Dec 06, 2013 @ 10:07:23
As you requested my code for frame is:
public class MyFrame extends WebFrame { private WebMenuBar webMenuBar; private WebMenu wbmnFile; private WebMenuItem wbmntmOpen; private MyPanel panel; public MyFrame() { panel = new MyPanel(); webMenuBar = new WebMenuBar(); setJMenuBar(webMenuBar); wbmnFile = new WebMenu(); wbmnFile.setText("File"); webMenuBar.add(wbmnFile); wbmntmOpen = new WebMenuItem(); wbmntmOpen.addActionListener(new WbmntmOpenActionListener()); wbmntmOpen.setText("Open"); wbmnFile.add(wbmntmOpen); } private class WbmntmOpenActionListener implements ActionListener { public void actionPerformed(ActionEvent arg0) { add(panel, BorderLayout.CENTER); } } public static void main(String[] args) { MyFrame frame = new MyFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(500, 500); frame.setLocationRelativeTo(null); frame.setVisible(true); } } and code for separately designed panel is: public class MyPanel extends WebPanel { private WebButton wbtnSubmit; private WebTextField webTextField; public MyPanel() { wbtnSubmit = new WebButton(); wbtnSubmit.setText("Submit"); webTextField = new WebTextField(); webTextField.setInputPrompt("Enter your name"); GroupLayout groupLayout = new GroupLayout(this); groupLayout.setHorizontalGroup( groupLayout.createParallelGroup(Alignment.LEADING) .addGroup(groupLayout.createSequentialGroup() .addGroup(groupLayout.createParallelGroup(Alignment.LEADING) .addGroup(groupLayout.createSequentialGroup() .addGap(73) .addComponent(wbtnSubmit, GroupLayout.PREFERRED_SIZE, 114, GroupLayout.PREFERRED_SIZE)) .addGroup(groupLayout.createSequentialGroup() .addGap(18) .addComponent(webTextField, GroupLayout.PREFERRED_SIZE, 216, GroupLayout.PREFERRED_SIZE))) .addContainerGap(216, Short.MAX_VALUE)) ); groupLayout.setVerticalGroup( groupLayout.createParallelGroup(Alignment.LEADING) .addGroup(groupLayout.createSequentialGroup() .addGap(15) .addComponent(webTextField, GroupLayout.PREFERRED_SIZE, 33, GroupLayout.PREFERRED_SIZE) .addGap(51) .addComponent(wbtnSubmit, GroupLayout.PREFERRED_SIZE, 30, GroupLayout.PREFERRED_SIZE) .addContainerGap(171, Short.MAX_VALUE)) ); setLayout(groupLayout); } }Que:
I need to repaint the frame / content pane or minimize and maximize the frame to view the panel
Dec 07, 2013 @ 17:37:21
As i understand – the problem is that panel doesn’t appear right away when you click “Open” menu? That happens because you didn’t validate the container which content have changed. That bug appears on any L&F (not just WebLaF) in your code and you simply need to do an additional revalidate call here:
private class WbmntmOpenActionListener implements ActionListener { public void actionPerformed ( ActionEvent arg0 ) { JComponent container = ( JComponent ) getContentPane (); container.add ( panel, BorderLayout.CENTER ); container.revalidate (); } }That call updates JComponent/Container childs placement and have to be called whenever you change them (when you add/remove components).
I also recommend you to not call “add” directly on the frame – use the container returned by “getContentPane()” method instead.
Nov 26, 2013 @ 15:47:16
Hi Mikle,
I have created my own Component UI for showing home screen image, but when frame loads I need to repaint my component using component resize listener. What should be the probable solution. I haven’t checked this issue with other look and feel because i have used components from WebLnF, But previously It worked for me with nimbus and metal look and feel.
Nov 27, 2013 @ 14:30:23
I cannot even imagine what could be the issue unless you post some code that shows it – simply post some small demo code that has that repaint issue and i will help 🙂
Oct 17, 2013 @ 07:14:07
Wonderfull !, its really useful than the default 9 patch editor in the eclipse folder,
good job broo, thanks !.
Oct 17, 2013 @ 11:03:16
Always welcome 🙂
Sep 06, 2013 @ 23:48:30
hi my name is hassan shahzad aheer and i want to apply this theme into my application please tell me how to use it in my application thanks
Sep 07, 2013 @ 02:35:39
You can find a short description here:
http://weblookandfeel.com/forum/viewtopic.php?f=6&t=50
Jul 31, 2013 @ 07:21:07
It’s good. I have a question.
How to remove patch line if draw once?
Jul 31, 2013 @ 09:41:12
You can either drag the side line of the patch to make it smaller or hold right mouse button under the patch and drag it – that will remove patch from every pixel you have moved with mouse.
Jul 05, 2013 @ 02:41:42
Thank you so much!! It’s really convenient to use, a big help for rookies like me!!
Jul 06, 2013 @ 01:23:15
Always welcome 🙂
Jul 02, 2013 @ 05:30:58
NinePatchEditor is awesome, thank you, looking forward the new version fix file chooser!
Jul 02, 2013 @ 16:00:12
Thanks!
Fix with file chooser will be first.
After that i will add some more features into the editor itself.
Jun 25, 2013 @ 11:32:01
You are awesome!!!!!!
Jun 25, 2013 @ 16:43:39
Thanks 🙂
Jun 21, 2013 @ 07:32:37
Genius!!!
The option I was really looking forward was
“Copy 9-patch”
Simply awesome!
Jun 21, 2013 @ 19:27:30
Thanks! 😀
Some more options to copy/add patches will be available in update i am working under. Hope you will like them as well 😉
Jun 20, 2013 @ 20:13:55
thanks so much for this great work! ! !
i never liked the editor coming up with sdk, searching for a better first found “better 9 Patch Tool” but don’t work fine cause change the colors after saving… :-O
then found yours time ago and love it – now i’ve a new pc and unfourtunatly haven’t saved it…..but after looking for almost a half day i’ve refound it… 😀
thanks a lot !!!!!!
Jun 20, 2013 @ 20:15:14
Always welcome 🙂
Jun 18, 2013 @ 04:15:03
It looks great, but unfortunately it doesn’t seem to work on mac os. The file chooser allows you to select .png files, but the ‘choose’ button never becomes enabled, so you cant open an image.
There also seems to be some other weird things going on with the file chooser – folder icons are rotated 90 degrees! and sometimes no file or folder icons appear at all. Finally for some reason you can multi select files and folders.
Jun 18, 2013 @ 13:29:47
All problems with file chooser are known and will be fixed in its new implementation. Multiselection will still be available if you choose it as a selection mode. And folder icons aren’t rotated – they just look a bit different from what you usually see on Mac OS X.
I will also check other features on a notebook with Mac OS and see if any other problems exist.
Jun 09, 2013 @ 01:46:38
This editor is awesome! I don’t bother using any other one even the editor that came with the Android SDK. Feature request: Sometimes I have to do a lot of images that are the exact same size and it would be awesome if the editor saved the positions of the nine-patch lines when I load a new image. Thanks for making such an awesome editor!
Jun 09, 2013 @ 13:45:59
Newer version will have some more features to work with multiply images but right now you can simply copy-paste the patches into newly opened image to avoid creating them again.
Jun 05, 2013 @ 04:39:53
Appreciated for such amazing tool.
And I have some small suggestions:
1. It will be more convenient to provide some shortcuts to accelerate the operation.
2. Can move the entire image while pressing the mouse button in special mode.
3. Provide a color list or color wheel after clicking the drop-down menu to change the previous background without press any button. Pop up the color chooser dialog and then choose color, click the reject or confirm button need more actions.
Jun 05, 2013 @ 12:20:43
Thanks! 🙂
Regarding your suggestions:
1. Which operations exactly you want to have shortcuts? Maybe some additional ones?
2. NinePatchEditor is not an image editor actually, so i didn’t add any image-editing operations (moving the source image is also editing), but i guess some of them might be really useful to avoid editing the image in a separate application. I might be adding some extra features to edit image in next versions 🙂
3. That is a good point, i will modify the color chooser so it will be opened in a simple drop-down popup that doesn’t require any additional actions to close/accept.
Jun 07, 2013 @ 09:44:14
^_^
1. Which operations exactly you want to have shortcuts? Maybe some additional ones?
Such as change the patch size: move the mouse over the line, press the mouse button to select the line and move the mouse to move the line.
Maybe shortcut for that: press ctrl + 1 select the vertical left line, press right arrow key to move the line right towards and press left arrow key to move the line left towards.
ctrl + 2 to select the vertical right line.
ctrl + 3 to select the horizontal top line.
ctrl + 4 to select the horizontal bottom line.
I think using shortcuts will make the operation more easy and precise.
2. Move the image(really not move the image, I think it should be move the view of the image): when zoom in the image to larger the scrollbar will appear.
Over the image press the left mouse button and move left as the same to move the scrollbar right instead changing any pixel data of the image, ^_^.
In my opinion drag the image is easier than move the scrollbar.
Jun 09, 2013 @ 13:44:35
1. I will think of the best way how left/right/up/down hotkeys can be used to provide precise patch movement and might add that in newer version.
2. Now i got it. You can press and drag MMB (middle mouse button / wheel) to move the image view without using scroll bars. This feature is already in the editor for a long time 🙂
Jun 02, 2013 @ 00:36:38
Thank you, very useful tool, saved me a lot of time. I especially liked the patch copy/paste function. If I may have a suggestion, it would be useful to be able to refresh the file list within the editor (every time I created a new image in another software, I had to restart the editor).
Jun 02, 2013 @ 12:15:38
Refresh will be available with next editor changes. There will be a lot of them actually, just need some time to finish the work.
Apr 24, 2013 @ 17:43:26
You really rock man, thanks for creating this tool for free.
Apr 26, 2013 @ 13:59:23
Not like it was a really big deal to create it, but thanks! 🙂
Apr 17, 2013 @ 00:59:47
what is the highlighted portion which formed as a result of intersection of patches ?
Apr 17, 2013 @ 04:54:54
Blue area is formed by content patches and displays the area of the image that will have any content in it in the patched component (for example text and icon in the button will be placed there).
Green area displays image areas that will be stretched when component size is larger or smaller than the image itself.
Apr 06, 2013 @ 12:05:00
awesome tool!! Thanks! Keep your good work !
Apr 06, 2013 @ 13:36:39
Thanks! 🙂
Mar 21, 2013 @ 11:07:51
That’s really awesome!
Now I’m working on the messenger app and spent whole evening trying to make symmetric 9-patch for message bubble. With this app I did just in a few seconds (rulers rules!).
Thank you very much, you definitely must to write to Android team with proposal to bundle you app instead of default!
Mar 21, 2013 @ 12:19:07
Thanks! 🙂
I might try contacting Android team later and see if they would accept such offer
Mar 17, 2013 @ 06:23:00
Thank you so much, this app save my time! Keep your good work !
*****
Mar 17, 2013 @ 10:12:15
Always welcome 🙂
Mar 07, 2013 @ 18:27:34
Just wanted to say thanks for the 9 patch editor. Couldn’t figure out the SDK version for the life of me. This one is simple to use and the preview area is amazing.
– Mike
Mar 07, 2013 @ 18:29:54
Thanks!
I hope i will get some free time to update the editor soon 🙂
There is still a lot of things to simplify nine-patch editing.