MEAP Edition Manning Early Access Program Android UI in Action MEAP version 1

Transcription

1

2 MEAP Edition Manning Early Access Program Android UI in Action MEAP version 1 Copyright 2012 Manning Publications For more information on this and other Manning titles go to

3 brief contents PART 1 THE ANDROID UI LANDSCAPE 1. The Android UI 2. Views and view groups 3. Fragments 4. Positioning and style 5. Performance considerations 6. Handling different screen sizes and densities PART 2 UI DESIGN 7. Design principles 8. UI design patterns 9. Practical steps to UI design PART 3 BUILDING RICH AND DYNAMIC COMPONENTS 10. Animation 11. Property animations 12. Custom components and layouts 13. ListViews 14. Gestures and interactions 15. Application widgets (home screen widgets)

4 1 1 The Android UI This chapter covers Understanding the importance of a good UI Working with mobile and touchscreen devices Using Animation in the UI Reviewing the UI in an Android application Creating a Simple UI Understanding small details make a big difference Android devices are everywhere. From it s humble origins as part of Android Inc, to being listed as the best selling smart phone platform, the growth of Android has been phenomenal. Android is powering hundreds of millions of devices and all the current indications point to its huge growth continuing for the foreseeable future. Google play (formerly Android market) has equally impressive figures. There are roughly half a million apps (Android applications) available, with estimated downloads of 10 billion! This large number of Android devices combined with an excellent distribution channel such as Google play can lead to some great opportunities for software developers. The possibility of creating an app that is downloaded by hundreds of thousands or even millions of people is a very real one. Google play gives a great platform to distribute an app, but with the larger numbers of apps available we need to find a way to make our app shine, so that it

5 2 stands out and catches the eye of potential users. Only by doing this can we realise the full potential of our efforts. Key to making an app successful is the user experience (UX) and a core part of the UX is the user interface(ui). In this book we are going to take an in-depth look at Android UIs. We ll look at a range of tips and techniques that can be used when designing and building Android UIs. The aim is to give you the skills and knowledge to make sure your app is an outstanding app. 1.1 The importance of the UI To quote Jeff Raskin, who started the Macinktosh project at Apple in the late 1970s, As far as the customer is concerned the interface is the product.. This is not to say that there are not many other important parts in creating an Android app, but the UI is certainly a very important part of the picture. The UI is central to creating a good user experience (UX) and a good UX is central to creating a successful app. There are a number of areas that we should look at when trying to create a great UX. From the first impressions, to how easy an app is to use, to whether it delights and captivates are all driven by the users interaction with the UI. Lets take a closer look at some of these areas Aesthetics and usability First impressions of an app really do count, not just in catching the eye, but in a way that can make a real difference to how easy a user might find an app to use. A study by Noam Tractinsky, an Israeli scientist, looked at the usability of two ATM machines. These machines were identical in functionality but one was made to be more aesthetically pleasing. To Tractinsky s surprise users found the aesthetically pleasing machine easier to use. Cognitive psychologist Don Norman looked at why aesthetically pleasing UIs would be easier to use. He argues that aesthetically pleasing objects put us in an open and exploratory state of mind. We can think in broader terms and generally solve problems easier, therefore when we are in this frame of mind anything is easier to use. So aesthetics shouldn t just be a last thought. They give tangible benefit, and contribute to the usability of the application.

6 The UI and UX As well as the importance of aesthetics there are other factors of the UI that we should pay close attention to so that we can make sure that we provide a good UX. The general areas we should consider are: Information architecture - How we organise the information within an application Navigation - How we navigate through an app. Usability - Is it quick, efficient and intuitive to use. Interaction - How does the use interact, touching,swiping, or via voice. By looking at each of these areas we can work towards creating a great UX. By working out how best to organise information and then applying UI navigational design patterns we can organise the app so information is clear and easy to find. To make an app usable we have to make sure that it is responsive to the user and that it is easy to understand. Finally we should pay careful attention to how the user interacts with an app. Should they just tap, swipe or use multi-touch gestures such as pinching. Whatever we decide we have to make sure that it makes sense to the user Delight and captivate One last area we should look at in our UI is how we can delight, surprise and captivate the user. In many ways this is one of the most abstract and difficult concepts to put into practice, but it can also be one of the most powerful in driving the success of an application. The Kano model developed by professor Noriaki Kano outlines that a product can have three different type of attributes. These are: Basic attributes - The features a product simply must have otherwise it does not fulfill its function. Performance attributes - These are attribute add additional features so the user can achieve more. Delight attributes - Are unexpected attributes that exceed a user expectation, they may not add useful functionality but they delight and surprise the user, giving them much satisfaction.

7 4 Figure 1.1 The Kano Model showing the relevance of three different attributes Figure 1.1 shows the Kano model. Making attributes that excite and delight the user can really create great user experience and drive engagement. These kinds of attributes are usually unexpected to the user and aim to surprise and delight, their nature seems almost serendipitous. Figuring out how to delight a user is a tricky process and the target is constantly moving. As apps become more sophisticated so a users expectations increase, to delight we have to exceed their expectations. 1.2 Mobile UI considerations Developing UIs for mobile and tablets devices can be great fun but these devices have a number of differences from developing a traditional UI for a desktop device. In this section we ll take a look at some the of aspects of building UIs for these smaller touch based devices.

8 Touch based devices Predominantly Android devices are touch based devices and so we have to take this into account. Unlike a traditional desktop application where we manipulate a pointer by using a mouse for Android devices we interact with the UI by touching the screen. When interacting with UIs via touch there are number of things to consider: Active areas on the UI such as buttons have to be bigger so that they are easy to touch with fingers and thumbs. When touching the screen fingers can obscure the screen so making it difficult to perform precise operations such as drawing. We do not have a hover state, as with a mouse, this hampers discoverability of functions Touch devices support multi-touch interactions.

9 6 Figure 1.2 Fingers can obscure areas of a screen, buttons need to be big enough so that

10 7 they can be easily touched When we use our fingers on a touch screen it is a lot less accurate than clicking on an object with a mouse. We should also take into account the context in which an app may be used. The user might by using the app on the move, and not sitting stationary at a desk, therefore it is all the more important to make targets easy to hit on the screen. The Android design guide recommends that target areas are a minimum of 48dp (density independent pixels), which roughly relates to an on screen size of 9mm. Another aspect of using touch as input is that performing precise operations such as drawing can be difficult, since the users finger obscures the area being touched, and it is not possible to touch as small areas with a finger. Some devices try to overcome this limitation by providing stylus or pen like device to allow more accurate manipulation of the touch screen. In general hover states are not supported on mobile devices. When using a desk top application with a mouse it is possible to hover over a button or UI component. By hovering additional information can be shown to the user so they can discover functions just by moving the mouse around the screen. This is not available for touch screen devices and interaction, users generally have to tap on UI component to change it s state. Some devices do support hardware such as track balls, and more recently some new devices have started to introduce a hover functionality to touch screen, whereby the user can interact with the device by hovering they finger over the screen without touching it. But on the whole a larger number of devices to not support this type of interaction. The last thing to be aware of using touch devices is that the vast majority of them allow multi-touch interaction. This means that we can manipulate the UI using multiple touch points. An example of this is the pinch to zoom gesture that uses two fingers, two touch points, to allow zooming in and out. Figure 1.3 illustrates a pinch gesture being used to zoom out on Google maps.

11 8 Figure 1.3 Using a pinch multi-touch gesture to zoom out of a map view

12 Handling orientation changes Unlike an application running on a large screen desktop device, the orientation of the screen of a mobile app can be changed easily. Figure 1.4 shows an example of an application being viewed in a portrait and landscape mode. Figure 1.4 Comparison of Google play viewed in portrait and landscape Handling orientation changes in android is not particularly difficult. In some cases we may just keep the same layout, but with Android it is possible to declare different layouts for portrait and landscape mode as the Google Play app shows. To make more of the horizontal space in landscape mode the Apps, Books and Movies sections have been move to the right of the screen. It s also possible that you may want certain parts of the application to only be displayed in one mode, for example a game might only be played in landscape mode. Again this is not a difficult thing to achieve, we just need to be aware that orientation can be changed and make decisions on how we want to handle this Minimise Text input In comparison to desktop PCs most mobile device will have inferior keyboards and many will have virtual keyboards displayed on the touchscreen. Figure 1.5 shows and app with the virtual keyboard displayed.

13 10 Figure 1.5 A virtual keyboard used to input text In general inputting text on these devices is slower and more difficult. With this is mind we should try and minimise the amount of text that a user will have to input into an app. We can help this user in the respect by suggest sensible defaults,

14 11 using auto completion or simple saving state within the UI were ever possible Use Mobile UI design patterns As we ve already seen developing UIs for mobile and touchscreen devices has it own set of constraints and considerations. Issues such as how we present and organise complex data, and how we navigate through an app all need to be solved and optimised for small screen mobile devices. Fortunately others before us have encountered these problems and have come up with a set of ways of dealing with them. These generic solutions are known as UI design patterns. Design patterns are a great place to start when we are looking at how we might build a UI, they can save a lot of work and provide consistent solutions to many reoccurring problems when building UIs for mobile and touchscreen devices. We ll take a more in depth look at UI design patterns in a later chapter. 1.3 Animation in the UI Animation is not something that one might associated with building UIs. Yes, it s used a lot in games, but what role does it have to play in the UI? Well it has a significant and important role to play. When used correctly and subtly it can really make a huge difference to the user experience. Some of the best Android apps use animation extensively throughout the UI. Animations in UIs can be used in a number of ways. Such as : Orientating the user Drawing attention to areas of importance Adding surprise, delight and making UI feel natural. Animation can be used to help with user orientation when navigating through an app. Figure 1.6 shows and example of a user tapping on an item in a list. As this action is carried out the current screen slides out to the left and the detailed view slides in for the right. On pressing the back key we get the reverse animation. The difference in direction of the motion conveys to the user that they are going deeper down to more detail information or back up to higher level views.

15 12 Figure 1.6 Using a slide animation to orientate the user The human eye is naturally drawn to motion, and to this end we can again use animation. By adding subtle movements we can bring the users attention to areas of the UI that could be of interested at a certain time. Small subtle animations such as an expansion and contraction of a button or a subtle change in color are all that is needed. Animation can also be used to surprise and delight. As we mention in and earlier section of this chapter this a important aspect of creating a successful app. By adding animations that are subtle but unexpected we can surprise and delight our users as these use our app. The final important aspect of using animation in a UI is one of making the application feel natural. By using animation to move components onto and off the screen, or fade from one state to another, we can create a much more natural feel to the app. If we don t use animation things tend to appear and disappear suddenly. Since things don t do this in the real world this can give a very unnatural feel to the

16 13 app. Make an app feel natural again adds to the overall user experience, which relates to an apps success. 1.4 The UI in the big picture In earlier sections we ve looked at the importance of the UI and the considerations of building UIs for mobile and touch screen devices. In this section we are going to take a high level view of how the UI fits in with the rest of an Android application. Android applications are classed as native applications, which in means that they don't run in a web browser, they run natively on the Android platform. They are much different from the native applications of old. Typically Android applications are connected application and use web services to update their data frequently. To help manage data and cache local copies of data many Android applications will also use a local SQLite databases. SQLite database are light weight and ideal for organising data cached on a local device, it's an open source standard and Android provides APIs for creating, reading and writing these databases. Figure 1.7shows a high level overview of the various parts that make up a typical Android applications.

17 14 Figure 1.7 Overview of the UI in an Android application

18 15 As we can see from figure 1.7, in Android we generally create UIs using XML, although it is also possible to create them in Java. This is a declarative way of defining our UIs and in many ways is similar to HTML. Using this declarative method for creating UIs means that we only declare what should appear in a UI, where it will be in the UI and how it will look. To enhance the look of our UIs we can also use locally stored resources, these are usually in the form of images and graphics. The behaviour of a UI, such as how interactions are handled, is not defined in XML, this is down to the Java code in an Android application. The main body of any android application is written in Java. The Java code handles all the different aspects of an Android application. It loads in the XML to display the UI. It handles the user interactions with the UI and in many applications will be used to retrieve data from web services and possibly cache data in a local SQLite database. One thing to note when developing Android applications is that we have to pay attention to the threading model. In Android, applications run on the main UI thread. This thread is responsible for drawing UI components to the screen and also handles dispatching touch events. Since this is the case we should avoid running long lasting operations, such as retrieving data from a web service, on this thread. Doing so would cause the UI to freeze and stutter. Fortunately Android has a number of mechanism we can use to solve these threading issues. 1.5 The Hello world example I couldn t resist the hello world example so here it is. Building a simple Android UI can be very easy and literally does not require any coding. Here we ll create the simplest of Android UIs with the classic hello world text, and to show you how easy it can be we ll also add a button to our UI, and we ll do all this without having to write a single line of code. Here s what our magnificent hello example is going to look like.

19 16 Figure 1.8 The basic UI of our hello world example To run this example you ll need to have the Android SDK installed and a version of the Eclipse IDE with the Android Developer Tools (ADT) plugin installed. If you need to set these up there are plenty of good guides on how to do

20 17 this. A good place to start is on the Android developers website: The first thing we ll need to do is fire up eclipse and create a new Android project. Once eclipse is started select the Ctrl and N keys to create a new project. This brings up the new project wizard. Under the Android folder select Android project and click Next as shown in Figure 1.9. Figure 1.9 Creating a new Android project in eclipse Next we ll see the New Android Project window as shown in figure Here we enter the name of our project which you ll be surprised to know is HelloWorld, then click Next.

21 18 Figure 1.10 Creating a new project call HelloWorld The next screen asks us to select the version of Android we are going to build against. Here just select a version that your device or emulator can run. Here we are going to select version 2.3.3, but if you have a device that is capable of running

22 19 a later version you could select a higher version number here. Figure 1.11 shows the screen to select the build version. Again once we ve selected our version click the Next button. Figure 1.11 Selecting the Android version to build against Now we can see the Application Info screen for the new Android project wizard. We ve just one more thing to do, and that is specify the package name for

23 20 the project. Here we ll just call it com.example, obviously for a really project you'll want something better than this. Once you ve entered the package name press Finish, and Eclipse will create a new Android project. Figure 1.12 shows the Application Info screen Figure 1.12 Specifying the package name Now that we ve created a our hello world example lets have a look through the

24 21 project structure. To the left of the Eclipse IDE is the Package explorer window. In the window locate our HelloWorld project and click on the small arrow to the left. This will open the tree structure of the project and allow us to browse it s contents. Figure 1.13 shows our newly created HelloWorld project. Figure 1.13 The HelloWorld project structure Here we can see that we have the usual elements that make up an Android project with the Java code in the src folder. In Figure 1.13 we ve also opened up the layout folder for the project. In here we have a main.xml file which contains a UI that is automatically created when we create a new project. Lets have a closer look at this file by double clicking on it The Graphical Layout Editor By double clicking on the main.xml file we open the ADT Graphical Layout Editor in the main Eclipse window. Figure 1.14 shows the Graphical Layout Editor viewing our main.xml file.

25 22 Figure 1.14 The ADT Graphical Layout Editor The Graphical Layout Editor is a great tool for prototyping and building UIs. It contains four main areas: The Palette that contain all the UI components and layouts that are available for a project The Configuration editor which give us option such as the screen type, orientation etc. of the preview. The Main canvas window which shows the preview of the UI. The Outline, which display the nested hierarchical structure of the UI. The Graphical Layout Editor really is a powerful tool, and is a great way to preview the UIs that we build for Android. By using the Configuration editor we can change the size, orientation, themes and versions of devices to see how our UI might look with these different set ups. The Outline view gives a good overview of how our UI is constructed and what components it contains. The Palette is a great place to explore the Android UI components that are available to us. By clicking on the different sections in the Palette we can view previews of all the different components that are available in Android. Figure 1.15 shows a number of screenshots of the Palette viewing previewing android components.

26 23 Figure 1.15 Using the Palette to browse Android UI components By using a combination of the Palette and the Canvas we can add components to a UI simply by dragging and dropping, and this is how we will add the button to finish our hello world example. In the Palette view select the Form widgets. You should now be able to see a number of buttons. Now simply click on the Button with the text Button on it and drag it into the Canvas just below the Hello world, HelloWorldActivity text. Release the mouse and the Button will appear in the Canvas below the Text.Figure 1.16 shows the results of this. Notice that our outline now also shows that we have an additional button component as in figure 1.17.

27 24 Figure 1.16 The Canvas in the Graphical Layout Editor now contains a button Figure 1.17 The updated Outline view So that s just about it for our Hello World example, we ve created a simple Android UI without having to write any code. This is due to the Android developer tools that we can use within eclipse and more specifically the Graphical Layout Editor. For more information on the Graphical Layout Editor take a look at the A n d r o i d d e v e l o p e r d o c s a t

28 25 Just to prove that our Android UI will work you may want to take it for a spin and run it. To do this right click on the HelloWorld Project and select Run As and Android Application. If you ve got an Android device connect via USB or an Android emulator setup you will see the Hello world example running. 1.6 The detail is the design So far in this chapter we ve looked at the practical side of creating a UI. But of course a very important aspect to creating a compelling UI is its design. As one of the great designers of the 20th century Charles Eames said, The details are not the details. They make the design. So to make a professional UI we have to pay attention to all the design details. This means paying attention to everything from the aesthetics, information architecture and navigation architecture, to the non-behavioural elements such as application performance. To illustrate this point lets take a look at a simple example, where we will pay attention to the visual design aesthetics. Here we are going to create a UI screen for a fictional coffee application. We ll create just one screen showing some details of a particular type of coffee. Figure 1.18 shows two examples of such as screen. In the first we have just added the various elements without too much attention the visual design. In the second example we have just tweaked a few small areas, but still we have a much better result. These are only small adjustments but added together they create an overall larger effect on the resulting aesthetics.

29 26 Figure 1.18 By applying simple design rules and paying attention to detail we can improve our end result All we ve done here is apply some basic rules of visual design. The areas that worth paying particular attention to are: Alignment - Make sure that elements are aligned, the icon, titles and body text all have the same alignment on the left of the screen, also we have added space to the left and right of the screen so elements are not wedged against the edge of the screen. Proximity - Elements of a similar nature are grouped together, such as the icons at the top of the screen. Contrast - We ve used different colors, sizes and weight fonts to bring attention to titles and subtitles. Repetition - We ve repeated the color used in the icon at the top left and used the same font throughout. This brings a visual unity and identity to the UI. To finish off the visual design we ve also added a diagonal striped texture to

30 27 the top icon bar. We moved the main title text up to overlay the image and added a translucent black background. To finish the background of the text we ve applied a subtle gradient to add depth. This is a somewhat contrived example but hopefully it illustrates that details, in this case visual design details, can really make an overall large impact to the end results. If you re a UI developer should you care about this? Whether you re a developer working on your own or in a small team ultimately you ll be the one putting the parts of the UI together, even if a graphic designer created the original mockups and assets. This means that you need to have a good appreciation of visual design details. By missing the visual details: colours, alignment, proximity etc, we can easily take a great starting point and make it into a not so good result. In the following chapters we ll take a detailed look at UI design aspects so that you can be sure that you won t be missing any details. 1.7 Summary We ve covered a broad range of areas in this chapter. We ve looked at how important the UI is in creating a professional application and highlighted the areas we need to pay close attention to when creating a professional UI. From there we ve look at the aspects of mobile UIs and the constraints that we must understand when developing for these types of devices. Animation also has a role to play in UIs and using it subtly throughout we can enhance the users experience. To get an understanding of how the Android UI relates to the rest of elements of an Android application we ve taken an overview of an Android app so that we have the bigger picture. Creating Android UIs can be straight forward and to show this we created a simple hello world example using the Android developer tools (ADT) and in particular the Graphical Layout Editor. To finish this chapter we ve highlighted that to create a great UI we really must pay attention to the details. The Android UI framework is powerful and flexible and gives the foundation for creating a wide range of applications. By mastering the tools and concepts needed it provides great flexibility and gives the potential for created a wide range of applications. Add to this the fantastic distribution channel that is Google play, and there really are some great opportunities to be had. Our aim in this chapter was to give a broad idea of the areas that we will be covering the following chapters. We hope you now have an appreciation of what is needed to create a professional Android UI that will succeed in the market place. In

31 28 the following chapters we ll look at these areas in more details so that you can get a better understanding and learn the skills that you need to craft a truly outstanding UI and Android application.