Beautifully Usable, Multiple Screens Too

1,510 views

Published on

Presentation by @suxalex, Android Technology evangelist from Motorola Mobility.

Published in: Technology, Art & Photos
  • Be the first to comment

Beautifully Usable, Multiple Screens Too

  1. 1. Beautifully Usable, Multiple Screens Too Suzanne Alexandra
  2. 2. @suzalex @motodev Suzanne Alexandra
  3. 3. the piano staircase http://moto.ly/pianostaircase
  4. 4. the goal graceful, natural, effortless communication between user, device, and application
  5. 5. smartphones screen sizes screen densities android versions device features tablets 7-inch, 8-inch, 10-inch natural portrait, natural landscape gingerbread, honeycomb, ice cream sandwich
  6. 6. ″ Massive technological disruptions create big market opportunities. Tablets are clearly disrupting numerous markets, and I think now is the right time to place big bets on the tablet market -- and the platform we are betting on is Android .″ Mark Williamson CEO and Cofounder
  7. 7. what is
  8. 8. what can be
  9. 9. what can be
  10. 10. but how?
  11. 11. functional beautiful whimsical emotional
  12. 12. stacked image galleries
  13. 13. content from many sources
  14. 14. sources timeline
  15. 15. the challenge image size and quality
  16. 16. <ImageView xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:layout_width=&quot;300dp&quot; android:layout_height=&quot;200dp&quot; > </ImageView> be scalable Smartphones, 2.3+ 10-inch tablets, 3.2+ 150 dp by 100 dp
  17. 17. public View getView( int position, View convertView, ViewGroup parent) { LayoutInflater inflater = getLayoutInflater(); ImageView i = (ImageView) inflater.inflate( R.layout.image, parent, false ); i.setImageResource(mImageIds[position]); i.setScaleType(ImageView.ScaleType. FIT_XY ); i.setBackgroundResource(mGalleryItemBackground); return i; } override getView()
  18. 18. BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = false; options.inDither = false; options.inScaled = false; options.inPreferredConfig = Bitmap.Config.ARGB_8888; options.inTargetDensity = screenDensity; // 160 dpi Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sample_0, options); use BitmapFactory.Options()
  19. 19. functional beautiful whimsical emotional
  20. 20. center stage
  21. 21. the spread
  22. 22. most important content at screen center controls and metadata around it
  23. 24. the challenge watch the orientation change
  24. 25. <RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:orientation=&quot;vertical&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot;> <ImageView android:id=&quot;@+id/myimage&quot; ... /> <include android:id=&quot;@+id/metadata&quot; layout=&quot;@layout/metadata&quot; android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; ... /> </RelativeLayout> use <include>
  25. 26. functional beautiful whimsical emotional
  26. 27. scrollable layouts
  27. 28. vertical scrollview
  28. 30. ice cream sandwich left-to-right swipes
  29. 31. catalogue by thefind plume news360
  30. 32. HorizontalScrollView
  31. 33. ViewPager layout PagerAdapter views Android Developers Blog http://bit.ly/oef2fy
  32. 34. functional beautiful whimsical emotional
  33. 35. static sidebar
  34. 36. action bars important functions easily available your app looks like an android app available on smartphones and tablets
  35. 37. evernote
  36. 38. peripheral vs central vision specific objects overview of scene
  37. 39. evernote global secondary or contextual global primary
  38. 40. <ul><li>use to </li></ul><ul><li>make content main focus </li></ul><ul><li>group controls </li></ul><ul><li>simplify action bar </li></ul>
  39. 41. hicks law time it takes to make a decision increases as the number of alternatives increase fitts law time to move to a target depends on distance to and size of the target
  40. 42. evernote be careful here
  41. 43. tablet to smartphone
  42. 44. functional beautiful whimsical emotional
  43. 45. hide and show fragments
  44. 46. watch the orientation change
  45. 47. stacking is better
  46. 49. FragmentTransaction ft = getFragmentManager().beginTransaction() ; ft.setCustomAnimations( R.anim.slide_in_left , R.anim.slide_out_right ); DetailsFragment newFragment = DetailsFragment.newInstance(); ft.replace ( R.id.details_fragment_container, newFragment, &quot;detailFragment&quot;); // Start the animated transition. ft.commit(); slide fragments
  47. 50. public void onClick(View v) {    FragmentTransaction ft = getFragmentManager().beginTransaction();                ft.setCustomAnimations( android.R.animator.fade_in, android.R.animator.fade_out);        if ( fragment.isHidden() ) {             ft.show(fragment);          button.setText(&quot;Hide&quot;);       } else {             ft.hide(fragment);          button.setText(&quot;Show&quot;)       }        ft.commit(); } use show() and hide()
  48. 51. ok. what was that animation part?
  49. 52. <set> <objectAnimator xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:duration=&quot;500&quot; android:valueFrom=&quot;-1280&quot; android:valueTo=&quot;0&quot; android:valueType=&quot;floatType&quot; android:propertyName=&quot;x&quot; /> </set> create an xml animation
  50. 53. if (fragment.isHidden()) { ft.setCustomAnimations( R.anim.infromleft, R.anim.outtoleft); ft.show(fragment); button.setText(&quot;Hide&quot;); } set the custom animation
  51. 54. tablet to smartphone
  52. 55. functional beautiful whimsical emotional
  53. 56. so. how do we get whimsical?
  54. 57. playfulness sets your app apart
  55. 58. playfulness sets your app apart engagement of the heart
  56. 59. flipping lists
  57. 60. What would it be like to shop in several languages?
  58. 62. <uses-sdk android:minSdkVersion=&quot; 11 &quot; android:targetSdkVersion=&quot; 13 &quot; /> new package android.animation
  59. 63. <LinearLayout … > <ListView android:id= &quot;@+id/list_en&quot; android:layout_width=&quot;match_parent&quot; android:layout_weight=&quot;1&quot; android:layout_height=&quot;match_parent&quot; /> <ListView android:id= &quot;@+id/list_es&quot; android:layout_width=&quot;match_parent&quot; android:layout_weight=&quot;1&quot; android:layout_height=&quot;match_parent&quot; android:visibility=&quot;gone&quot; /> </LinearLayout> two listview elements
  60. 64. ObjectAnimator visToInvis = ObjectAnimator.ofFloat( visibleList, &quot;rotationY&quot;, 0f, 90f); visToInvis.setDuration(500); visToInvis.setInterpolator(accelerator); final ObjectAnimator invisToVis = ObjectAnimator.ofFloat( invisibleList, &quot;rotationY&quot;, -90f, 0f); invisToVis.setDuration(500); invisToVis.setInterpolator(decelerator); and an objectanimator
  61. 65. functional beautiful whimsical emotional
  62. 66. so what's an example of emotional ?
  63. 67. youtube
  64. 68. questions? @suzalex @motodev http://moto.ly/techlibrary more ui patterns
  65. 69. MOTODEV developer.motorola.com <ul><li>Create quality optimized apps </li></ul><ul><li>Showcase your app to users </li></ul><ul><li>Connect with developers 24/7 </li></ul>
  66. 70. LEGAL <ul><li>LICENSE NOTICES </li></ul><ul><li>Except where noted, sample source code written by Motorola Mobility Inc. and provided to you is licensed as described below. </li></ul><ul><li>Copyright © 2010-2011, Motorola, Inc. All rights reserved except as otherwise explicitly indicated. </li></ul><ul><li>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: </li></ul><ul><li>Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. </li></ul><ul><li>Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. </li></ul><ul><li>Neither the name of the Motorola, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. </li></ul><ul><li>THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS &quot;AS IS&quot; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. </li></ul><ul><li>  </li></ul><ul><li>Other source code displayed in this presentation may be offered under other licenses. 
 </li></ul><ul><li>Apache 2.0 </li></ul><ul><li>Copyright © 2010, Android Open Source Project. All rights reserved unless otherwise explicitly indicated. </li></ul><ul><li>Licensed under the Apache License, Version 2.0 (the &quot;License&quot;); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. </li></ul><ul><li>Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an &quot;AS IS&quot; BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. </li></ul><ul><li>Creative Commons 3.0 Attribution License </li></ul><ul><li>Portions of this presentation are reproduced from work created and shared by Google (http://code.google.com/policies.html) and used according to terms described in the Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/). </li></ul>MOTOROLA and the Stylized M Logo are trademarks or registered trademarks of Motorola Trademark Holdings, LLC. All other trademarks are the property of their respective owners. © 2011 Motorola Mobility, Inc. All rights reserved.

×