Mirror: Live previews of Android layouts

mirror_logo

  1. Code layouts in Eclipse or Android Studio*
  2. Preview on real devices with Mirror, instantly
  3. Save time, write better code

* or IntelliJ, or Vim, or Emacs, or Sublime Text, or Textmate, or…

What is jimu Mirror?

Mirror gives you live, on-device previews of layouts that update as you code.

“Mirror” stands for “no More compile-Install-Run to see youR UI changes On Real devices”*

Mirror is a tool that makes Android UI developers and designers smile.

Resource hot-swapping
  • Hot-swap layouts, themes, styles, attributes, assets etc.
  • Preview touch feedback, gestures, animations and other dynamic, interactive elements
  • Preview on multiple devices simultaneously
  • Code layouts in an experimental, iterative style

Sample data
  • 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

Custom views
  • 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
Scroll down for more details or try it now   

Get 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 now  

Get 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

Android Studio

Mirror


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.

Downloads & Pricing


Indie

 

  • Free for everyone
    • live previews
    • multiple devices
    • sample data
  • Premium ($19.99 in-app purchase)
    • custom views
    • sample data for custom attributes
    • action bar previews

Documentation


FAQ

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.

Go Team!

IMG_7052

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.

victoria-map

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!