Android Has various UI Editor to work with but all comes to WYSIWYG and waiting for app to compile and install on the device. Join me and we overview a great tool to save UI Build and Test time. Deploy to multiple devices, Java/Kotlin Code Hot swap, Animation building and testing process is made easy.

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
Video Samples

24. Rights Reserved © 2015
Video Samples

25. Rights Reserved © 2015
Mirror Saves Time

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

27. 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.

28. 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.

29. 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.

30. 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.

31. Rights Reserved © 2015
Mirror Live Demo

32. Rights Reserved © 2015
Q&A

33. Rights Reserved © 2015
Working at Tikal