Mirror: Live previews of Android layouts
- Code layouts in Eclipse or Android Studio*
- Preview on real devices with Mirror, instantly
- Save time, write better code
* or IntelliJ, or Vim, or Emacs, or Sublime Text, or Textmate, or…
- Hot-swap layouts, themes, styles, attributes, assets etc.
- Preview touch feedback, gestures, animations and other dynamic, interactive elements
- Preview on multiple devices (see our stress testing video)
- Code layouts in an experimental, iterative style
- Build your UI in a realistic context before writing Java code
- Simple XML format to set text, image, visibility and more
- Populate list and grid views with different item layouts
- Sample data reside in a dedicated directory and won’t polluate your layout code, nor change the runtime behaviour
- Preview layouts with custom views
- Hot-swap custom view code after re-compilation
- Set custom attributes with sample data
Themes and action bars
- Mirror uses the default theme defined in your manifest file
- Experiment with other themes using sample data
- Preview action bars: set the icon, title and option menus
Configuration free, one-click preview
Apps built with the help of Mirror
Save 20+ seconds per change, hours per day
Even for a small UI change, it usually takes 20+ seconds to recompile, reinstall and finally check out the app on a device. With Mirror, there’s no waiting. The time saving easily adds up to hours a day. With a tighter feedback loop you can stay focused, stay in flow, and get more work done every day.
Thanks for the awesome app, I can see this will save me HEAPS of time!
Write better UI code
Mirror helps you learn Android layout coding more quickly and write better code. Faster feedback lets you create layouts, themes and animations in an experimental, iterative style. Moreover, with sample data, you can develop the UI and test it on a device before writing the Java plumbing to link it all together. This encourages a greater use of Android’s declarative resource system and a good separation of presentational and behavioral code.
The ability to mock data for my list view with 3 different layout files for the items saved me a tremendous amount of tweaking. I was able to get my designer to sign off on the layouts long before I even wrote my adapter.
Make designers happy too
Quit back-and-forth spec updates and UI tickets! Sit with your designer, make a change and get feedback in real time. You can create interactive prototypes with just layout and other resource XML code, which can be used in development without adjustment or modification.
We are using it to develop an application for [client name]. …it helped us with doing a basic prototype that ran well enough to show them our concept then get feedback and lay it out live for the executives.
Scroll down for more details or try it out nowGet Mirror
If Android Studio, why Mirror?
Android Studio has a WYSIWYG layout editor already, why make another tool for previewing layouts?
Testing on real devices gives real confidence
Static, approximate rendering of layouts on a desktop screen is useful, but far from enough. There are many things that should be tested on target devices. Colors and size of touch zones are two examples.
Mirror makes it fast and fun to test layouts in a realistic setting, on multiple devices at the same time. As a side benefit, using attached devices to preview layouts means more screen space for code, a real benefit on laptops!
Test dynamic, interactive UI elements in a realistic setting
Build your UI in a realistic context with sample data
In fact, Mirror is designed to work happily with Android Studio (and any other IDEs or editors)
Mirror watches file changes and pushes resources onto connected devices automatically. You can create layouts and tune attributes with your favourite editor and preview on devices instantly.
Does Mirror preview my entire app, or just the layouts?
The answer is somewhere in between. Mirror makes use of your apps resources, meaning its layouts, drawables, animations, styles, colours, assets (typically custom fonts when used in custom views), etc. It also previews your custom views in layouts if a dex or apk file is specified, which is often automatically picked up when the project is added in MirrorServer. Mirror does not, however, use your Java code in activities, fragments or any other classes not referenced in your custom views.
How does it work?
Mirror has two components: a server program that runs on your computer and an app that runs on each preview device. The server watches your project directory and detects changes to resource files, sample data files and dex/apk files. When something is changed, the server packages up the resources for your project and sends them to the attached devices. The Mirror app renders the UI using the standard Android resource system, so the displayed preview will look exactly how it will when you run your app.
Alan Kay said the best way to predict the future is to invent it. We think the best way to invent the future is to create tools for inventors.
We are a small team of hackers passionate about helping people turn their ideas into working software as quickly as possible. We believe, just as reading and writing, the majority of the population on this planet should be able to understand and create software. We are taking baby steps towards this dream. Lately we are building UI design integration tools, i.e. tools that help UI designers and developers turn design into working software.
We have been writing Android apps since the platform’s beta release in 2007. We hand-craft tools and apps with our love and experience in development tools, user interfaces, Aspect oriented programming, machine learning, and web frontend and backend.
We are located in Victoria, British Columbia of Canada, a place they call “a piece of paradise”. Drop us a line if you come to visit this beautiful city!