Getting the Magic on Android Tablets

Editor's Notes

• #3: introduce myself was a developer, then one day I had a usability invention, and my life changed. this year, the motodev team traveled around the world, teaching developers how to work with honeycomb. many developers asked me for ui patterns for tablets.
• #4: … play video from the xoom using hdmi … this slide is here
• #6: yikes !! you can't give me dogfood apps ! I am the President of the United States !!! aarrgghh !!!! wait !! more apps are coming soon
• #7: OPTIONAL … DEMO YOUTUBE AFTER Now, if you want your app to have good design and appeal to users, and also take advantage of the beautiful platform that Android Honeycomb offers, you'll want to appeal to users on all 4 levels of the hierarchy of needs. And 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. All technology innovations start at a functional level. This level is where user interface design often focuses. Beautiful is about aesthetics. It means the app appeals to the senses, especially the senses of 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 doing this in a few moments. 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. The reason this is important is that … Competition based on price and functionality has been commoditized. To win, companies are differentiating based on “the aesthetic imperative,” or beauty, uniqueness and meaningfulness.
• #9: There are two ways you can work. If you want to take full advantage of large screens and make your app tablet only .. The first three lines say that the app does not support the traditional screen size buckets – small, normal, and large – which are usually not tablets. Those lines are for Android 3.1 or older. The last line, with requiresSmallestWidthDp, says that your app requires a screen size with a minimum width of 600dp. 600 dp is generally a 7" or larger screen. Your minimum size might be different, depending on how well your design works on different screen sizes. You might require a minimum width of 720dp. BUT – You must compile your app against Android 3.2 or higher to use requiresSmallestWidthDp. Develop your app against the minimum API level When building your release candidate, change build target to Android 3.2 and add requiresSmallestWidthDp At runtime, older Android versions ignore it, so there's no risk of runtime failure. So you CAN work this way … but you might also want your app to run on both smartphones and tablets. This will become much easier with the upcoming Ice Cream Sandwich release.
• #10: When Ice Cream Sandwich arrives, Android apps will be forward compatible. An app developed for Honeycomb will be compatible with a device running Ice Cream Sandwich, which could be a tablet, a phone, or maybe another type of device. If your app is designed to use all of a large screen to deliver content, optimizing it for handsets can be tricky. But it's worth the effort, because Ice Cream Sandwich brings the Honeycomb APIs to smartphones, and you'll substantially increase the user base for your app. Using a single APK also simplifies the process of updating and publishing to Android Market.
• #11: The two best guidelines we can give you now are – Build your design around fragments that you can use in multi-pane layouts on smartphones and single-pane layouts on tablets Keep your action bar simple, so the system can adjust its layout based on screen size A good example of a simple action bar is Pulse News.
• #12: 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.
• #13: So the goal of UI patterns is to provide a repeatable solution to a recurring problem. We'd like to show you a few UI patterns for Honeycomb and Android tablets today.
• #14: Now, to introduce our first pattern. Tablets have 4-way rotation … so what does your app do when the device turns upside down? You can choose to have your app rotate in all 4 directions, and that's the most versatile approach. But sometimes, for some reason, you really want your app to be landscape only, or portrait only. An example of this is a digital magazine app that is designed to be read in portrait. CLICK
• #15: So there's a pattern called up + down rotation. This sounds very simple and obvious for experienced developers, but we're finding that many developers aren't aware of it, so we just want to mention it. CLICK
• #16: If your app wants to be landscape only …
• #17: If your app wants to be portrait only, in theory, you can use screenOrientation = portrait. *** issue *** sensorPortrait doesn't compile file a bug for google
• #18: Or, for 4-way rotation, use sensor, fullSensor, or the default - no value.
• #19: So that pattern works on a functional level. Now let's look at a pattern that works on both Functional and Beautiful.
• #21: This is an example of a smartphone app, a shopping app. It uses an image gallery that doesn't transfer well to tablets. It may be Functional, 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.
• #22: so the pattern we want to show you is stacked image galleries, which is used in Pulse News, a very successful app for Android tablets. use when you want to display many content items that have equal importance and are similar to each other. 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
• #25: 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.
• #26: 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
• #27: 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. DEMO APPS – Background PhotoBig
• #34: 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.
• #35: 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.
• #37: 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.
• #38: And then, remember to set your custom animations, using FragmentTransaction.setCustomAnimations.
• #46: The new animation system in Honeycomb is not specific to Views, and it's not just a visual animation system. Instead, the new animation system animates values over time, and assigns those values to ANY target objects and properties. So you can animate a View or a Drawable, or any object that has values in a data structure. The Android platform is actually changing properties on target objects.
• #47: So here we've defined two ListViews, which are populated by two different arrays of strings, one in English and one in Spanish.
• #48: For this animation, you use the new ObjectAnimator class. It's new in Honeycomb, since API level 11, part of the android.animation package. So here, pay attention to the ofFloat method. The first ofFloat method is setting animation on an object, named visibleList . It's also saying that the animation will take place on a new property that's added to the View class with this new animation system. That property is 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.
• #50: So that's an example of one quick, simple animation you can add on Honeycomb, to bring a bit of fun and whimsical into your apps. Now I didn't talk much about emotional today, because emotional is more about the experience of your entire product or service. Remember, for a good example of an app that fulfills emotional needs, look at the YouTube app on tablets.