Droidcon 2013: Responsive Design for Android

Juhani Lehtimäki, Smashing Android UI

Presentation available online

• alternative to master/detail — grid view
  • works the same way with adapters
  • can adjust number of columns in values to adjust on screen size
  • use it as an easy way to extend the UI without a huge redesign
  • also useful for inspiring designers to take the design further
• need to figure out where the relayout/break points are?
  • need to talk about what is the screen size for this layout to work
  • don’t need to talk about tablets or phones
• juhani likes to do the large screen first
  • makes you think about whole picture if there would be enough space
• android design in action from google
  • different layers of design:
  • information design — all you
  • interaction design — all holo/android
    • 100% chance users use other Android apps
    • tiny chance they use other platforms
    • optimise for user experience, not app consistency across platforms
  • visual design — mixed
• use the default components!
  • but don’t components that are not needed for the app
• action bar gives you lots of things for free
  • adjusts for screen space automatically
  • components work across lots of devices — tested!
  • also hold down item gives tooltip
• best app for design on android right now: timely alarm clock
  • and follows all android guidelines!
• can fade out the action bar when content scrolls up
• use Android Asset Studio to show how 9 patch graphics work
  • designers can check online
• use fragments from support package even when targetting 4+
• decouple front end from backend
  • Greenrobot Event Bus
  • Square Otto
  • data manager -> bus -> fragment
• when fragment starts it queries for data by id
  • fragment should ask for it
  • manager should respond to bus with id when ready
  • fragment subscribes when it’s around and unsubscribes when it goes away
  • so fragment can then request data when it’s told that id is ready
• http://jimulabs.com — lets you change layouts on the fly
• make sure your design team uses android devices
  • at least for a couple of weeks!
• use standard components and follow guidelines
  • won’t just cost in coding — think about all the testing!
• think scalable from the first wireframe