New in IntelliJ IDEA 11: Preview of Android UI layouts

IntelliJ IDEA 11 introduces a new feature that makes it much easier to design UI layouts for Android applications — UI layouts preview. Just open some layout xml file from your Android project and you’ll see a new Preview tool window. 

Preview is updated as you edit the file, so you can see the changes immediately. Many different options such as screen size, target platform version, theme, etc. are available for tuning what you see.

Custom view components are also supported and shown correctly. But since IntelliJ IDEA uses class files from your output directory to render such components, you have to build your project first.

Please note, that layout preview feature is under development, so we really need to know your opinions. You’re welcome to try it in the latest Nika EAP and let us know what you think. If the IDE doesn’t preview some of your layout xml files, please submit bugreports with these files attached.

This entry was posted in New Features and tagged , . Bookmark the permalink.

30 Responses to New in IntelliJ IDEA 11: Preview of Android UI layouts

  1. Dirk Jäckel says:

    This is the best new feature in Nika!

    It is such a big time saver.

    Thanks a lot!

  2. stepand76 says:

    Great! I’m looking forward

  3. devdanke says:

    Thank you for adding this feature.
    I should speed up Android development.

  4. Artem says:

    This is very usefull thing, I will wait for a new version.

  5. jwb says:

    Looks like I’m going to have to upgrade now. Keep up the great work with killer new features.

  6. Marc Poppleton says:

    I definitely no longer have any good reason to keep using Eclipse alongside IntelliJ.

  7. Slava says:

    Does it support custom views? I have a class Field inherited from View and I see “Unable to initialize …Field” to the top of the Preview.

  8. Rusli says:

    Looks really useful and nice guys!
    I would really enjoy using this stuff @ development!
    +1

  9. Marek says:

    definitely android killer feature! :) thanks a lot, keep workin, can’t wait for Nika ;)

  10. Shkrum says:

    I’m waiting for this awesome plugin!
    It will do my life much better :)

  11. Roman Nurik says:

    You guys are SO awesome :)

  12. Rob says:

    Its seems to be very interesting but its just a preview of UI. If it will editable I’ll absolutely happy. But progress is good…

  13. golubev says:

    I wait for it and now it happened;) Thanks jetbrains!

  14. Sven says:

    These are great news for Android developers using IDEA! I hope the next step will be a full fledged Android UI designer :-)

    Keep up the good work!

  15. Labeeb says:

    Great… I’m waiting for this

  16. Ondrej says:

    Wonderful feature! I hate development in Eclipse, random build errors poped up on me in the last 3 days in that IDE (the same code builds correctly in IntelliJ) so I tried IntelliJ for the first time today and I fell in love on the first touch. Would be great if the Preview feature distinguished between layouts in layout and layout-land folders and automatically selected Landscape/Portrait parameter in the Preview window based on that… Keep up the great work!

  17. Tomáš says:

    Awesome. Keep improving Android support.

  18. yinchong says:

    How do i set up the idea IDE for Android platform development.
    Like this:http://source.android.com/source/using-eclipse.html.
    Think you.

  19. slarti says:

    I love you guys for this!! Thank you!! :D

  20. Chris says:

    Is it only me, or does it omit background images on buttons (used as drawable reference). But still, nice feature.

    Btw, its a library project (where I define the layout and also the buttons), maybe this is the reason? Dont want to file a “bug report” before I know its a bug, and not a glitch due to my setup.

  21. Milo says:

    Will a GUI layout designer be implemented (just like in Eclipse)?

  22. Mahen says:

    Hi,

    I like this, but it would be much better if it were a design editor, allowing direct editing of the design (like ecclipse).

    That would make designing a UI in IntelliJ much faster.

  23. gest22 says:

    IDEA RULES! After adding this feature I really do not have to even open any other IDE for Android.

    If you’re making a list for new version of the preview, then please implement **scrolling**

    Namely, if a view gets out (by its width) of preview screen, than it is not displayed. Only first X items will be displayed.

    It would be nice if scrolling is enabled.

  24. Ed Jones says:

    This is a really good feature and makes form layouts a lot easier! However, the changes that are reflected in this preview don’t carry across to my app? Any changes in the .java are but nothing that I change in my .xml files?

  25. Musawer says:

    guys it is good but still components drag and drop missing hope that will be added too in coming versions.

  26. Asteckley says:

    Can anyone tell me:
    1) Where are the device configurations for the Android UI previewer stored with IDEA? I can only find the current window options (which device configuration is active) within the *.iws file.. but would like to find the actual device configurations. One can add custom device configurations, so they must be stored somewhere, but I cannot find them in the *.ipr file or in the IDEA application area.

    2) Is there anywhere I can get a pre-setup list of device configurations for many common android phones and tablets that are currently on the market, so we can use this during development?

    Thanks

  27. Eugene Kudelevsky says:

    @Asteckley, we’re consistent with ADT here
    1. Custom configurations are stored in Home_Directory/.android/devices.xml
    2. Default configurations are stored in Sdk_Directory/tools/lib/devices.xml

  28. Whizkid says:

    creating android xml layouts in intelliJ is so slow, please optimize

  29. Behzad says:

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>