This document describes Mirror, an Android Studio plugin that allows developers to build and test user interfaces in real time on connected Android devices. It summarizes Mirror's key features, including live layout previews, sample data to populate views, and hot swapping of Java/Kotlin code to see changes immediately on devices. The document explains how Mirror works by maintaining a server that detects project changes and sends updates to the Mirror app running on devices, and highlights how it helps with tasks like rapid prototyping, collaborating with designers, learning Android development, and more.

1. Rights Reserved © 2015
Mirror for Android
Performance Coding

2. Rights Reserved © 2015
+Yossi Elkrief
@elkriefy
MaTriXy
Android Group leader
Tikal Knowledge
Proud Father
Android developer since 2008
GDG Beer Sheva co-founder & leader
Android Mentor @ Google Campus
Android Lecturer & speaker
LFC fan
Androids collector

3. Rights Reserved © 2015
What is Mirror ?

4. Rights Reserved © 2015
Prior to Mirror
● AS - WYSIWYG layout editor
● Static builds.
● Preview layouts.
● No Real live data.
● Not actual device

5. Rights Reserved © 2015
Mirror
● Android studio plugin
● Client on Devices.
● Standalone - Mirror Server.
● Better way to build UI.
● Fast (Saves the needs for builds)

6. Rights Reserved © 2015
Mirror
● Test dynamic, interactive UI elements.
● Display layouts on phone or tablet.
● Updating in real-time as you code.
● Hot Swap Code - Java/Kotlin.

7. Rights Reserved © 2015
How Mirror works

8. Rights Reserved © 2015
Mirror - Foundations
Two components:
● Server program that runs on build computer.
● App that runs on each preview device.

9. Rights Reserved © 2015
Mirror - Server(Studio/StandAlone)
● Server watches project, detects changes.
■ resource files.
■ Sample data files.
■ Java/Kotlin files.
■ dex/apk files

10. Rights Reserved © 2015
Mirror - Server(Studio/StandAlone)
● Packages up the resources and sends them
to the attached devices.
● Mirror app renders the UI.

11. Rights Reserved © 2015
What can i do?

12. Rights Reserved © 2015

13. Rights Reserved © 2015
Mirror - Live-code
● Save your XML / Java / Kotlin / PNG files.
Check on devices in seconds.
● Rapidly experiment your layouts, custom
views and animations.

14. Rights Reserved © 2015
Mirror - Prototype
● Create full-fidelity prototypes and collect
early feedback before coding Java.
● Reuse the code in production when the
prototype is approved.

15. Rights Reserved © 2015
Mirror - Collaborate
● Trash design specs.
● Sit with your designer, make a change and
get instant feedback.
● Encourage them to create the layouts too!

16. Rights Reserved © 2015
Mirror - Collaborate
● Make Designer Happy

17. Rights Reserved © 2015
Mirror - Hot-swapping
● Mirror compiles incrementally.
● Only sends deltas to the devices.
● Hot-swapping resources, assets,
and Java / Kotlin code on multiple devices
● View states on the layout are preserved
across refreshes.

18. Rights Reserved © 2015
Mirror - Accurate, interactive previews
● Mirror’s app inflates layouts and renders
views the same way as your app does.
● Touch feedback, gestures and animations
are as accurate as they should be.

19. Rights Reserved © 2015
Mirror - REPL for Android UI development
● Experiment individual methods.
● Feed and test custom view with different
datasets.
● Build animations piecewise
● Use code in production when ready

20. Rights Reserved © 2015
Mirror - Custom views, custom fonts
● Preview layouts with third-party libraries or
your own custom views.
● Live-code custom views and custom
adapters.
● Preview custom fonts, custom attributes.

21. Rights Reserved © 2015
Mirror - Learn/Teach Android coding
● Learn Android’s layout/resource system by
building things that work on the real device.
● Experiment UI related APIs.
● Learn by doing in a fast feedback loop.
● Explain and Show Android UI fast and easy.

22. Rights Reserved © 2015
Mirror - Sample data
● Build UI in a realistic context before coding Java.
● Simple XML to set text, image, visibility and more
● Populate list/grid with different item layouts
● Use Android’s “tools” attribute to populate views

23. Rights Reserved © 2015
Mirror Saves Time

24. Rights Reserved © 2015
● Live Layout Previews
● Sample Data
● Java/Kotlin Hot Swap

25. Rights Reserved © 2015
Mirror
● Supports tools attributes - attributes set in
layouts will show up in on-device preview.
● simulate dynamic data in static previews,
Use: sample data.

26. Rights Reserved © 2015
Mirror - Sample Data
● screen files -
corresponds to a screen.
● Special elements in a
screen file.
● Can be used to populate
views with data.

27. Rights Reserved © 2015
Mirror - Sample Data
● Drawable files corresponds to a
drawable.
● Special elements in a drawable file.
● Can be used to populate views with
data.

28. Rights Reserved © 2015
Mirror - hot swap code
● Live-coding custom views, animations and interactions.
● Prototyping UI by populating views with mock data :
myCustomView.setData(someDataModel)
● Experimenting and learning UI related Android APIs by
executing code piecewise.

29. Rights Reserved © 2015
Get Mirror
JimuLabs

30. Rights Reserved © 2015
Q&A

31. Rights Reserved © 2015
Working at Tikal