Downloaded 44 times
![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()](https://image.slidesharecdn.com/ui-patterns-111207121405-phpapp01/85/Ui-patterns-17-320.jpg)
Uploaded byOSCON Byrum
Ui patterns
The document discusses designing user interfaces for multiple screen sizes and orientations. It emphasizes creating interfaces that are functional, beautiful, whimsical and emotional. It provides tips for layouts, animations, handling orientation changes and incorporating visual elements to engage users.
More Related Content
Ui patterns
- 1. Beautifully Usable, MultipleScreens Too Suzanne Alexandra
- 2. @suzalex @motodevSuzanne Alexandra
- 3. the piano staircasehttp://moto.ly/pianostaircase
- 4. the goal graceful,natural, effortless communication between user, device, and application
- 5. smartphones screen sizesscreen densities android versions device features tablets 7-inch, 8-inch, 10-inch natural portrait, natural landscape gingerbread, honeycomb, ice cream sandwich
- 6. ″ Massive technologicaldisruptions 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.
- 8.
- 9.
- 10.
- 11. functional beautiful whimsicalemotional
- 12.
- 13. content from manysources
- 14.
- 15. the challenge imagesize and quality
- 16. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="300dp" android:layout_height="200dp" > </ImageView> be scalable Smartphones, 2.3+ 10-inch tablets, 3.2+ 150 dp by 100 dp
- 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. 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. functional beautiful whimsicalemotional
- 20.
- 21.
- 22. most important contentat screen center controls and metadata around it
- 23.
- 24. the challenge watchthe orientation change
- 25. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/myimage" ... /> <include android:id="@+id/metadata" layout="@layout/metadata" android:layout_width="wrap_content" android:layout_height="wrap_content" ... /> </RelativeLayout> use <include>
- 26. functional beautiful whimsicalemotional
- 27.
- 28.
- 29.
- 30. ice cream sandwichleft-to-right swipes
- 31. catalogue by thefindplume news360
- 32.
- 33. ViewPager layout PagerAdapterviews Android Developers Blog http://bit.ly/oef2fy
- 34. functional beautiful whimsicalemotional
- 35.
- 36. action bars importantfunctions easily available your app looks like an android app available on smartphones and tablets
- 37.
- 38. peripheral vs centralvision specific objects overview of scene
- 39. evernote global secondaryor contextual global primary
- 40. use to makecontent main focus group controls simplify action bar
- 41. hicks law timeit 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
- 42.
- 43.
- 44. functional beautiful whimsicalemotional
- 45. hide and showfragments
- 46. watch the orientationchange
- 47.
- 48.
- 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, "detailFragment"); // Start the animated transition. ft.commit(); slide fragments
- 50. public void onClick(Viewv) { FragmentTransaction ft = getFragmentManager().beginTransaction(); ft.setCustomAnimations( android.R.animator.fade_in, android.R.animator.fade_out); if ( fragment.isHidden() ) { ft.show(fragment); button.setText("Hide"); } else { ft.hide(fragment); button.setText("Show") } ft.commit(); } use show() and hide()
- 51. ok. what wasthat animation part?
- 52. <set> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:valueFrom="-1280" android:valueTo="0" android:valueType="floatType" android:propertyName="x" /> </set> create an xml animation
- 53. if (fragment.isHidden()) {ft.setCustomAnimations( R.anim.infromleft, R.anim.outtoleft); ft.show(fragment); button.setText("Hide"); } set the custom animation
- 54.
- 55. functional beautiful whimsicalemotional
- 56. so. how dowe get whimsical?
- 57. playfulness sets yourapp apart
- 58. playfulness sets yourapp apart engagement of the heart
- 59.
- 60. What would itbe like to shop in several languages?
- 61.
- 62. <uses-sdk android:minSdkVersion=" 11 " android:targetSdkVersion=" 13 " /> new package android.animation
- 63. <LinearLayout …> <ListView android:id= "@+id/list_en" android:layout_width="match_parent" android:layout_weight="1" android:layout_height="match_parent" /> <ListView android:id= "@+id/list_es" android:layout_width="match_parent" android:layout_weight="1" android:layout_height="match_parent" android:visibility="gone" /> </LinearLayout> two listview elements
- 64. ObjectAnimator visToInvis =ObjectAnimator.ofFloat( visibleList, "rotationY", 0f, 90f); visToInvis.setDuration(500); visToInvis.setInterpolator(accelerator); final ObjectAnimator invisToVis = ObjectAnimator.ofFloat( invisibleList, "rotationY", -90f, 0f); invisToVis.setDuration(500); invisToVis.setInterpolator(decelerator); and an objectanimator
- 65. functional beautiful whimsicalemotional
- 66. so what's anexample of emotional ?
- 67.
- 68. questions? @suzalex @motodevhttp://moto.ly/techlibrary more ui patterns
- 69. MOTODEV developer.motorola.com Create quality optimized apps Showcase your app to users Connect with developers 24/7
- 70. LEGAL LICENSE NOTICES Except where noted, sample source code written by Motorola Mobility Inc. and provided to you is licensed as described below. Copyright © 2010-2011, Motorola, Inc. All rights reserved except as otherwise explicitly indicated. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 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. 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. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 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. Other source code displayed in this presentation may be offered under other licenses. Apache 2.0 Copyright © 2010, Android Open Source Project. All rights reserved unless otherwise explicitly indicated. Licensed under the Apache License, Version 2.0 (the "License"); 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. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" 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. Creative Commons 3.0 Attribution License 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/). 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.
Editor's Notes
- #3 This is how to reach me … Now the feedback I've gotten is that there's lots of articles, presentations, and so on, on Android development – but that you want more design knowledge. So this presentation focuses more on design, especially design patterns. We'll talk about code a little, but this is much more of a design talk.
- #4 So there's a really great video that I'd like you all to watch. It's called The Piano Staircase, and it's all about why it's important to add some fun to your apps. Briefly, it's about a metro station in Stockholm, where the designers wanted people to take the stairs more, rather than the escalator. So they painted the steps to look like piano keys, and added musical tones to each one. And that made the staircase use dramatically increase.
- #5 Now, in addition to fun, here's the goal … graceful, natural, effortless communication between user, device, and application … and you want this across many different tablets and smartphones, and you want users to recognize your app across all those devices.
- #6 But here's the challenge. According to Andy Rubin there are about 600 different Android devices available in the market right now. smartphones different screen sizes, screen densities android versions, device features oem skins wvga, qhd, vga tablets 7-inch, 8-inch, 10-inch natural landscape, natural portrait gingerbread, honeycomb, ice cream sandwich
- #7 In addition to that, you also have this – the concept that tablets are disrupting the market, and that users often expect applications on tablets to behave differently, or have more functionality. So it can be challenging to create a user interface that works well across tablets and smartphones.
- #8 This is an example of a smartphone app, a shopping app, that doesn't transfer well to tablets. It may be usable, but not quite – because the images are very small and hard to tap. It's also not taking advantage of the large screen that tablets have to offer, or any of the new tablet features.
- #9 Now this is an app that shows you what can be. Here, with Evernote, you can see that the tablet and smartphone versions look very similar and are easily recognizable. They both have action bars, across the top. This particular screen is showing a list of notes, and the displays are both effective, for the different form factors.
- #10 This app is Catalogue by TheFind, and you can see that the tablet and smartphone versions look the same, and the interaction is the same, at least on this screen. These are both built with a HorizontalScrollView, so that you scroll horizontally through many images. So this is an example of very good usabiilty and branding, across different form factors.
- #12 Now, if you want your app to have good design and appeal to users, you'll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We'll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn't before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I've identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I'll talk about a few of those tonight.
- #14 so the pattern we want to show you is stacked image galleries, which is used in Pulse News and Taptu, both successful apps for Android tablets. use when content from many sources independently scrollable content pieces equal the items are grouped into categories or sources -- you want to display multiple categories or sources at the same time, with each category independently scrollable. for example - news items articles blog posts recipes classes videos
- #17 So here, we're setting the image size in a scalable way, by creating two ImageView sizes, in two different directories. The tablet size, in layout-sw720dp, is 300dp by 200dp. The smartphone size, in layout, is 150dp by 100dp.
- #18 Now, when you do this, you want to use this form of the inflate() method. The first paramater is the layout file. the second parameter is the parent view, which getView() gives you you must always pass the parent if you pass null as the parent, the layout inflater does not know what type of layout parameters to create, and ignores all the android:layout attributes the third parameter should be false, because it tells the inflater not to add the inflated view to the parent right away. that's the right thing, when you're in an adapter's getView() method
- #19 You also want to be careful of image quality. To get better quality when scaling images, especially when scaling images up for 10-inch tablets, use the BitmapFactory.Options class. This is what works well in my sample. I've set options.inDither to false, and options.inScaled to false. I've also set optionsinPreferredConfig to ARGB_8888, which means the bitmap stays at 32 bits. Then I use BitmapFactory to load it.
- #20 Now, if you want your app to have good design and appeal to users, you'll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We'll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn't before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I've identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I'll talk about a few of those tonight.
- #22 ** what is
- #24 Use this to make content, rather than navigation or category lists, the primary focus of the screen. ** This is a content forward interface. This can happen on a landing screen, a deep-level content screen, or in a single-screen application. (Note: This is not the only pattern for single-pane screens. Some benefit from a diagonal, horizontal, or vertical balance – those are other patterns.)
- #25 Now here's the challenge … you probably need different layouts for landscape and portrait on tablets, as well as landscape and portrait on smartphones. As you can see in this screen, the main content is not exactly centered, but the design is still balanced and uses the full screen.
- #26 Use includes … this is not a new technique … it's been in Android since the very beginning. You all know this already. You can override layout attributes. But there’s a gotcha. When you override layout attributes, be sure to specify both android:layout_width and android:layout_height , as well as any other layout attributes you want to override. This ensures that all of your attributes are recognized by the LayoutInflater class.
- #27 Now, if you want your app to have good design and appeal to users, you'll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We'll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn't before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I've identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I'll talk about a few of those tonight.
- #29 So this is an example of how a vertical scroll is created, with a ScrollView element. The header at the top, and the buttons at the bottom, have a fixed size. But the content in the center is scrollable, with a vertical swipe.
- #30 But this what happens when the screen is rotated to landscape. In landscape, or on a natural landscape device, the vertical scroll won't be too comfortable.
- #32 demo – Catalogue TheFind and ViewPagerDemo
- #33 ** DEMO CATALOGUE BY THEFIND There are a couple different ways to create a horizontal scroll. The first, and probably the simplest, is HorizontalScrollView. Think of a very wide layout that stretches horizontally and is wider than the width of the screen. This is a design pattern used in iPad. Pay attention to the view snapping behavior. With HorizontalScrollView, views stay exactly where the user moves them.
- #34 An important difference between ViewPager and HorizontalScrollView is that ViewPager gives you a &quot;snapping&quot; effect, where after a view is scrolled far enough, it snaps into place. Another difference is that ViewPager uses an adapter, just like a ListView. So items can be slid off the screen to the left, and then recycled and slid back in, from the right. The views used with a ViewPager can also be fragments, which gives you an amazing amount of control over your application. So if you want more information about ViewPager, you can read about it at this link, on the Android Developers Blog.
- #35 OPTIONAL … DEMO YOUTUBE AFTER But most usability problems occur because we're trying to satisfy one or more levels of the hierarchy of user needs. That hierarchy, starting from the bottom up, is Functional, Beautiful, Whimsical, and Emotional. Functional means that the app is useful and usable. Users can navigate and use the user interface, The next level, Beautiful , is about aesthetics and appealing to the senses, especially the senses of vision, hearing, and touch. You should always make sure your app satisfies those two levels first. The third level, Whimsical , means the app is fun and engaging. We'll look at some specific patterns and techniques for adding Whimsical in a few moments. The fourth and highest level is Emotional . When you app works on this level, it satisfies some of your users' emotional needs. One way to do this is by creating communities. An example of an app that works on at least 3 of these levels is the YouTube app for tablets.
- #39 When you use the edges of the screen, you need to be aware of the difference between peripheral and central vision. This is the result of a study done by Adam Larson and Lester Loschky, of Kansas State University, in which they showed people photographs of common scenes, where different parts of the image were obscured. They concluded that central vision is most critical for specific object recognition, but peripheral vision is used for getting the gist of a scene. So peripheral vision gives us more information than we realize. Specifically, it gives us information on what type of scene we are looking at. To relate this to Android, the edges of the screen give people an overview of what the screen is about.
- #44 On the smartphone, you may want to place the sidebar icons on a dashboard. This is the mapping of the functionality icons between smartphone and tablet, so you can see that 4 icons on the smartphone dashboard wind up in the tablet sidebar, while the most important, or frequently used function goes to the action bar. Now the development technique to use here is probably layout includes, as we saw earlier with Center Stage. You would create the sidebar using a layout include and reuse that include in all of your activities.
- #45 Now, if you want your app to have good design and appeal to users, you'll want to be aware of the hierarchy of user needs, which has 4 levels. With this hierarchy, you want to start from the bottom and work up. Those levels are – functional, beautiful, whimsical, and emotional. Functional means that the app is useful and its interface works well. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially to vision, hearing, and touch. After you handle those two needs, you can work on Whimsical . Whimsical means that the app is playful, fun, and enjoyable. This makes users want to use it and want to come back. We'll look at some good examples of Whimsical in a few minutes. And Emotional is the highest level. This is where an application satisfies some emotional needs in your users. A good example of this is an application that builds communities or allows people to connect in ways they couldn't before. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on beauty, uniqueness and meaningfulness. The question is … specifically, how do we get this? So I started looking at UI patterns found in successful apps, that work well across tablets and smartphones, and building a catalog of patterns. So far, I've identified about 20 patterns used in leading apps, and am starting to publish them on the MotoDev site. I'll talk about a few of those tonight.
- #49 OPTIONAL - DEMO GMAIL
- #50 To animate the transition between fragments, or to animate the process of showing or hiding a fragment, you use the Fragment Manager to create a Fragment Transaction. Within each Fragment Transaction, you can specify in and out animations. The in animation is used to show a fragment, the out is used to hide one, and both are used for replace. This code shows how you would replace a fragment by sliding out one fragment and sliding the other one in it's place.
- #51 To show and hide fragments, you want to use a FragmentManager to create a FragmentTransaction. A FragmentTransaction handles a set of fragment operations and then commits them. Now here, on this fragment object, there's a very useful method on the Fragment class, called isHidden(), that returns true if the fragment has been hidden. There are also some very useful methods on the FragmentTransaction class, show() and hide(). With these three methods, it will be very easy for you to show and hide fragments.
- #53 Now this technique is for Honeycomb and Ice Cream Sandwich, API level 11 and up. You also need to write some animations. For example, if you want a fragment to slide in and slide out, you would write slide_in and slide_out animations. If you want to define the animation in XML, use an objectAnimator tag. This animation slides an object (or a fragment) in from left to right – so here, we're sliding in from -1280, way off the screen to the left, to position 0.
- #54 And then, remember to set your custom animations, using FragmentTransaction.setCustomAnimations.
- #55 This is a sliding panel that's created with a TranslateAnimation
- #63 This technique is for Honeycomb and Ice Cream Sandwich, API level 11 and forward. It was developed by Chet Haase at Google, who has a great post on the Android Developers Blog The new animation features are available in the android.animation package, and you'll need to use a minSdkVersion, of at least 11.
- #64 So here we've defined two ListViews in XML, which are populated by two different String arrays, one in English and one in Spanish. Notice that on the second ListView, we've set android:visibility to gone.
- #65 For this animation, you use the new ObjectAnimator class. It's new in Honeycomb, since API level 11, part of the android.animation package – but it does work on Ice Cream Sandwich. So here, pay attention to the ofFloat method. The first ofFloat method is setting animation on an object named visibleList . (That's our first list.) It's also saying that the animation will take place on a new property that's added to the View class, called rotationY , and it controls rotation around a pivot point. So here, rotationY controls rotation around the Y axis. The visibleList is being rotated out from position 0 to position 90, and invisibleList is being rotated in from -90 to 0. So there are a lot of cool things you can do with the new animation package in Honeycomb. If you're interested in animation, you'll want to check out the post by Chet Haase on the Android Developer Blog, and the animation demos in the API Demos sample. So I'll leave you to play with that.