Getting Magic on Android Tablets
•
2 j'aime•1,232 vues
Getting the Magic on Android Tablets is a presentation by Suzanne Alexandra of Motorola Mobility about developing tablet applications for Android. It discusses taking advantage of large tablet screens, using fragments, handling orientation changes, and adding animation and playfulness to engage users. The presentation provides code examples and design patterns for tablet applications.
Recommandé
Contenu connexe
Tendances
Similaire à Getting Magic on Android Tablets
Similaire à Getting Magic on Android Tablets (20)
Plus de Motorola Mobility - MOTODEV
Plus de Motorola Mobility - MOTODEV (20)
Dernier
Dernier (20)
Getting Magic on Android Tablets
- 1. Getting the Magic on Android Tablets Suzanne Alexandra Motorola Mobility 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.
- 2. Reach me @suzalex #AndroidOpen Suzanne Alexandra developer.motorola.com
- 4. ″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
- 5. your app ... when?
- 6. emotional whimsical beautiful functional
- 8. Be tablet only Take full advantage of large screens <supports-screens android:smallScreens="false" android:normalScreens="false" 3.1 and earlier android:largeScreens="false" android:xlargeScreens="true" android:requiresSmallestWidthDp="600" /> Compile with 3.2 and up
- 9. Be tablet and smartphone Expand your reach <supports-screens android:smallScreens="true" android:normalScreens="true" 3.1 and earlier android:largeScreens="true" android:xlargeScreens="true" /> <uses-sdk android:minSdkVersion="9" android:targetSdkVersion="13" />
- 10. Be tablet and smartphone Expand your reach Use fragments Keep action bars simple
- 11. emotional whimsical beautiful functional
- 12. now, a few patterns
- 13. what do you do when the device turns upside down
- 14. up + down rotation
- 15. android:screenOrientation="landscape" change to sensorLandscape
- 16. android:screenOrientation="portrait" change to sensorPortrait ( but … )
- 18. emotional whimsical beautiful functional
- 21. many sources or categories independently scrollable content pieces equal
- 22. sources timeline
- 23. the challenge image size and quality
- 24. Stacked image galleries Change image size, in a scalable way <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="300dp" android:layout_height="200dp" > </ImageView> 150 dp by 100 dp Smartphones, 2.3+ 10-inch tablets, 3.2+
- 25. Stacked image galleries Override getView() 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; }
- 26. Stacked image galleries Use BitmapFactory.Options 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);
- 27. emotional whimsical beautiful functional
- 28. hide and show fragments
- 29. Hide and show Watch the orientation change
- 30. Hide and show Stacking is better
- 31. Hide and show But hiding and showing is even better
- 33. Hide and show Slide one fragment out and another in 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();
- 34. Hide and show Or, use show() and hide() 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("Hide"); } else { ft.hide(fragment); button.setText("Show") } ft.commit(); }
- 35. ok. what was that animation part?
- 36. Hide and show Create an XML animation <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>
- 37. Hide and show Set the custom animation if (fragment.isHidden()) { ft.setCustomAnimations( R.anim.infromleft, R.anim.outtoleft); ft.show(fragment); button.setText("Hide"); }
- 38. emotional whimsical beautiful functional
- 39. so. how do we get whimsical?
- 40. playfulness sets your app apart
- 41. playfulness sets your app apart engagement of the heart
- 42. flipping lists
- 43. What would it be like to shop in several languages?
- 45. Flipping lists Target API 11 or higher <uses-sdk android:minSdkVersion="11" android:targetSdkVersion="13" /> android.animation
- 46. Flipping lists Use two ListView elements <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>
- 47. Flipping lists And an ObjectAnimator 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);
- 48. more info animation in honeycomb chet haase http://bit.ly/grk1rI apidemos, animation
- 49. emotional whimsical beautiful functional
- 50. won't you join us? @suzalex @motodev
- 51. 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. O 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.
Notes de l'éditeur
- 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.
- … play video from the xoom using hdmi … this slide is here
- yikes !! you can't give me dogfood apps ! I am the President of the United States !!! aarrgghh !!!! wait !! more apps are coming soon
- 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.
- 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&quot; 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.
- 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.
- 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.
- 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.
- 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.
- 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
- 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
- If your app wants to be landscape only …
- 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
- Or, for 4-way rotation, use sensor, fullSensor, or the default - no value.
- So that pattern works on a functional level. Now let's look at a pattern that works on both Functional and Beautiful.
- 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.
- 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
- 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.
- 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
- 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
- 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.
- 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.
- 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.
- And then, remember to set your custom animations, using FragmentTransaction.setCustomAnimations.
- 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.
- So here we've defined two ListViews, which are populated by two different arrays of strings, one in English and one in Spanish.
- 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.
- 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.