Mobile technology for the masses: Coding gestures in Android

Convert buttons in Android mobile applications into swipe gestures

Mobile users are often distracted, busy, and ergonomically constrained, so you need to build your mobile app UI accordingly. Andrew Glover discusses the key factors that differentiate mobile apps from web apps, then walks you through creating a mobile app UI that uses swipe gestures instead of buttons for navigation.

When building a mobile app, just like building a web app, keep the end goal (and the user) in mind. Always understand what benefit your app will provide to the user. What type of information will your app display, what functionality will it have, and how will the user access it? Paying adequate attention to the user experience of your mobile app will help ensure success.

About this series: Mobile application releases have exploded in recent years, and so has the market for mobile development technologies. This is a new series that introduces mobile applications to developers who are familiar with programming but new to mobile technologies. It starts with coding native applications with Java code, and then expands the toolkit to include JVM languages, scripting frameworks, HTML5/CSS/JavaScript, third-party tools, and more. This series of articles will take you step by step to master these necessary technologies and actually handle all mobile development scenarios.

Unlike traditional GUI development for desktop or web applications, the rule for mobile applications is to have less than too much. When you decide to design an application interface, you probably want to keep it simple and easy. Most mobile devices are small (unless you are dealing with a Samsung Note 4, which is the largest mobile phone I have ever seen, also known as a tablet). Small size is an important reason for their popularity, because people can carry them with them and use them at any time. This leads to another important discovery about mobile applications, most users do not pay attention to the application when using mobile devices.

Some mobile apps are built specifically for tablets for business use only (like doctors accessing patient records). Most mobile apps require users to access them from a tiny device when, let’s be honest, they’re also doing other things. I might play a few games of Angry Birds while I wait to buy some groceries online. I might check my email after getting off a long flight. But if it takes only two clicks or a swipe to load Angry Birds or an email message, I’ll probably stick with the mobile app.

Another factor that really separates mobile apps from traditional web and desktop apps is sheer volume: for every web app, there are easily 100 mobile apps. Provide multiple valuable services with your app, and make sure they are easy to use and engaging. If you expect users to use your app through RTM (reference manual), you are creating a problem for the user, and it will eventually become a problem for you. It doesn't matter if the user is a doctor accessing a patient's records, or someone playing Cut-the-Rope in the break room. If your app only takes a few minutes to install, the user is likely to search the app store for an app that takes even less time.

(Hello) Overheard Word

If you have read the first article in this series, you will know how to build an Android development environment in Eclipse, and the previous article has configured the Android SDK for Android 4.2. You should have completed your first Android application, the classic Hello World. In this article, you will continue to design a more unique application.

My sample application, Overheard Word, is designed to make learning new vocabulary and using it in context more fun and easier, which are two of my biggest passions, by the way. In this application, users can take a quiz after learning a few words. The interface consists of a display and two buttons. The display is for words and their corresponding definitions, while the buttons are for user navigation.

Overheard Word is a fun and simple mobile app for people who love learning words (I mean them as vocabulary addicts and word connoisseurs). More importantly, the sample serves as an example of building a legitimate Android application that you can deploy to real Android devices.

Targeting applications

Before designing an app, I like to assess the target market. The app built in Part 1 targets Android 4.2, or API version 17. Take a look at the most popular Android versions released by Google. (See Figure 1):

Figure 1. Android distribution, sorted by version number

Tablets and phones : In Figure 1, tablet sales are likely driven by the increase in Android 15 users. Regardless of the vendor, most tablets currently run Android 4.x. Unless you are building an Android-only PC app, you should target your app to Android APIs 9 and 10, which are the mainstream markets for mobile devices today.

Figure 1 shows that Android 2.3.x (API versions 9 and 10) currently only accounts for about half of the Android device market! If half of all Android devices are running Android 2.3.x, wouldn't it make sense to develop for that market?

Starting a new project

At the end of the last article, I had already installed API 4.2. Now I want to install Android 2.3.3 (API 10). When you start the Android SDK Manager again, as shown in Figure 2 , you will see that there are some updates to install:

Figure 2. A local Android SDK installer with only one installed version

If you want to follow along with me, click the Android 2.3.3 (API 10) installation option, keeping the recommended updates specified by your administrator.

Figure 3. Installing Android 2.3.3 (API 10)

After you download the new Android API, you must create a compatible emulator or Android Virtual Device (AVD). In the Android SDK Manager, select the Tools menu and choose Manage AVDs. Be sure to create an AVD that targets API Level 10.

Figure 4. Creating an AVD

Next, create a New Android Application project and give it a name. Mine is called Overheard Word Application. I target the application to API 10 to make it accessible to the widest range of devices. Looking closely at the screenshot in Figure 5 , you’ll notice that I also chose to compile against API 10. You can compile against a later version of Android, but I like to program and compile against the same API. (If I compile against a more recently released API, I must be aware that I cannot use any of the features in my application, which could cause compatibility issues.)

Figure 5. Creating a new Android project in Eclipse

When you click Next, make sure you do not save your application as a Library Project. In the next article, you will continue to keep the same default settings for the Hello World application. You can make some small changes later (for example, change the application's icon file).

The last step is to name your first Activity. I named mine OverheardWord instead of Main, and I named my layout similarly. If you're also targeting API 10, you'll have a few Navigation Type options in the final dialog. Don't worry about it now; I'll show you how to create a navigation menu in a subsequent article. For this app, leave your Navigation Type option at none.

Figure 6. Creating a default Activity

Click Finish to create a project that will be very similar to the default project you created last time.

#p#

Building an Android UI

You've now built a simple UI. Remember? Android UIs are ultimately defined as an XML document, which you're probably familiar with. If you come from traditional Java™ GUI development, you probably remember layout tools, which Android uses as well. You use Android's layout tools to define (actually, suggest) how a device should lay out your application's visual components. Layout styles include:

• Linear: where components are laid out in a parallel and vertical manner (similar to newspaper columns)
• Relative: where components are spaced apart from each other (Widget 2 is to the right of Widget 1, etc.)
• Table: where widgets are displayed in rows or columns

There are many layout tools available, and this is just the beginning!

You use a layout tool to define widgets, which are common components you'll find in all GUIs. The Android platform provides basic widgets such as buttons, text boxes, and drop-down lists, as well as more complex widgets such as image viewers and scroll wheels.

I think my Overheard Word UI needs to:

• Three text boxes (one for each word, pronunciation, and definition)
• Two buttons (one to select a new word, one to take the quiz)

Defining the layout

To put together an Android UI, the first step is to define its layout and the widgets you want to use in it. In Listing 1 , I first define a LinearLayout with three TextViews. Next, I create a child layout (another LinearLayout) to hold two Buttons.

Listing 1. Defining a LinearLayout in Android

 < LinearLayout   xmlns:android = "http://schemas.android.com/apk/res/android"  
 xmlns:tools = "http://schemas.android.com/tools"  
 android:id = "@+id/LinearLayout1"  
 android:layout_width = "match_parent"  
 android:layout_height = "match_parent"  
 android:orientation = "vertical"  
 android:paddingBottom = "@dimen/activity_vertical_margin"  
 android:paddingLeft = "@dimen/activity_horizontal_margin"  
 android:paddingRight = "@dimen/activity_horizontal_margin"  
 android:paddingTop = "@dimen/activity_vertical_margin"  
 tools:context = ".OverheardWord"   >   
 
 < TextView  
 android:id = "@+id/word_study_word"  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:layout_gravity = "center"  
 android:layout_marginBottom = "10dp"  
 android:layout_marginTop = "60dp"  
 android:textColor = "@color/black"  
 android:textSize = "30sp"   />   
 
 < TextView  
 android:id = "@+id/word_study_part_of_speech"  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:layout_gravity = "center"  
 android:layout_marginBottom = "10dp"  
 android:layout_marginLeft = "20dp"  
 android:layout_marginRight = "20dp"  
 android:textColor = "@color/black"  
 android:textSize = "18sp"   />   
 
 < TextView  
 android:id = "@+id/word_study_definition"  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:layout_gravity = "center"  
 android:layout_marginLeft = "40dp"  
 android:layout_marginRight = "40dp"  
 android:textColor = "@color/black"  
 android:textSize = "18sp"   />   
 
 < LinearLayout  
 android:id = "@+id/widget62"  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:layout_gravity = "center"  
 android:layout_marginLeft = "5dp"  
 android:layout_marginRight = "5dp"   >   
 
 < Button  
 android:id = "@+id/next_word"  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:layout_marginTop = "20dp"  
 android:text = "@string/next_word"   />   
 
 < Button  
 android:id = "@+id/take_quiz"  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:layout_marginLeft = "50dp"  
 android:layout_marginTop = "20dp"  
 android:text = "@string/take_quiz"   />  
 </LinearLayout>​​   
 
 </LinearLayout>​​  

As you can see from the XML in Listing 1 , each widget has a number of attributes that ultimately affect its appearance. For example, each button has a text element whose string points to a resource element. The resource element is defined in a resource file called strings.xml, which is located in the res/values ​​directory. Listing 2 shows the strings.xml file.

Listing 2. Resource file that defines button colors and labels

 <? xml   version = "1.0"   encoding = "utf-8" ?>  
 < resources >   
 
 < string   name = "app_name" > Overheard Word </ string >   
 
 < color   name = "white" > #ffffff </ color >  
 < color   name = "black" > #000000 </ color >   
 
 < string   name = "next_word" > Next word </ string >  
 < string   name = "take_quiz" > Take quiz </ string >   
 
 </ resources >  

If you want to see what my UI looked like before, you can start an instance of the simulator and click Graphical Layout in Eclipse, as shown in Figure 7 .

Figure 7. Overheard Word running in Eclipse

Placeholder text

Previewing my UI, I was a little confused by the spacing between word attributes. This isn’t a big deal though: to get a more realistic representation of the text display, I added some sample text before writing the code.

First, add an android:text attribute to each widget, just like you did for the button label. Now, the placeholder text is added, as shown below:

Listing 3. Using android:text to create a placeholder

 < TextView  
 android:id = "@+id/word_study_part_of_speech"  
 android:layout_width = "wrap_content"  
 android:layout_height = "wrap_content"  
 android:layout_gravity = "center"  
 android:layout_marginBottom = "10dp"  
 android:layout_marginLeft = "20dp"  
 android:layout_marginRight = "20dp"  
 android:textColor = "@color/black"  
 android:textSize = "18sp"   
 android:text = "Part of Speech" />  

As you can see in Listing 3 , I added sample text ("Part of Speech") to word_study_part_of_speechTextView. I updated some of the style elements by increasing the text size, defining the text color, and centering the widget in the layout. The attributes in Listing 3 are fairly common for definitions in Android apps; you'll get to know and love them as you build more apps. I defined the sample text directly in my layout file, rather than in a resource file, because the text values ​​were temporary during my design process.

When I run my application from Eclipse, I wonder what the user will see when they launch the application:

Figure 8. Overheard Word running in AVD

There is a slight problem with some aspects of UI design right now. Can you guess what it is? Yep, those annoying buttons. Are they necessary? Do users normally click buttons on mobile apps? Users might swipe left or right to see new words, or swipe down to take a quiz.

Removing the button cleans up the UI and makes the Overheard Word app better suited to the expectations of most mobile users. I was able to implement the swipe behavior pretty easily, as you'll see shortly.

Coding Gestures in Android

I defined the initial interface for the Overheard Word application and added some behaviors. I reapplied my traditional Java GUI development to Android, using listeners for the first time in Android to respond to events. If I were to keep the two buttons, I would probably use OnClickListener to attach behaviors to the button click events, and then attach them to the setOnClickListener method of each button widget.

Anonymous classes : An anonymous class is a class that is defined inside a class, but has no name: You can define and instantiate an anonymous class in one expression. I find anonymous classes convenient and useful, and I write a lot of them, especially when writing user interface behaviors.

While I'm sure I can use an OnClickListener, I'll probably end up with multiple class files if there's more than one widget. I don't like clutter, so I've chosen an alternate implementation strategy using anonymous classes.

Although swipe gestures are a concept not found in traditional GUI programming, their implementation is similar to programming a button click. I start a touch listener (which is part of the underlying Android platform) and then provide responsive behavior. To detect finger swipes, I also calculate the difference between the start and end of a gesture, as well as the swipe position. (I find this useful to consider that in Cartesian coordinates, left-right swipes are on the X axis, while up-down swipes are on the Y axis.)

Gestures can occur anywhere in the interface, and if you attach this type of listener to any component of your app's interface, you can start with a layout (which can be represented as a View in Android) and include the simplest button widget. I use Android's SimpleOnGestureListener to create my initial gesture implementation, and then attach it to the View through the onTouchListener method. By attaching it to the view instance, I can detect finger swipes across the entire interface, rather than just testing inside its components (such as the small image browser).

While this is possible, I would have to write a class that detects finger activity on a mobile device.

#p#

SwipeDetector

Button clicks are relatively easy to detect. The underlying operating system usually extracts the coordinate information of the button boundaries, so you can skip the manual definition step. Writing your application to recognize and respond to a swipe gesture is a bit more complicated. Android leaves it up to the programmer to write, which is a slightly more complex task but also gives you a lot of flexibility. You can choose to detect a single swipe gesture like I did, or you can detect other finger movements, such as friction, which is sometimes used in games.

Think about mobility : Are you curious if mobile listeners are still defined by action clicks? Last time I checked, users typically press buttons on mobile devices, not click them like they do with a mouse on a desktop. If you're a mobile developer, you need to think about mobility, which means rethinking traditional web and desktop mechanisms like button clicks, start menus, and even GUI wizards.

Writing a gesture swipe detection program involves Cartesian mathematics. That is, if the starting coordinate minus the ending coordinate on the X axis is greater than a predefined distance, then you can assume that the user swiped their finger from the right side of the application interface to the left side. The same method is used on the Y axis to detect up and down swipes.

It's easy to abstract this kind of logic into a simple class that does the math. SimpleOnGestureListener has a method called onFling. The onFling method takes two parameters of type MotionEvent (one for start and one for end) to represent the velocity on the X axis, and two float parameters to represent the velocity on the Y axis. Thus, the SwipeDetector class in Listing 4 has four methods that describe the full range of motion for a swipe: up, down, left, and right.

Listing 4. SwipeDetector

 import android.view.MotionEvent; 
 
 public   class SwipeDetector { 
 
 private   int swipe_distance;
 private   int swipe_velocity;
 private   static   final   int SWIPE_MIN_DISTANCE = 120 ;
 private   static   final   int SWIPE_THRESHOLD_VELOCITY = 200 ; 
 
 public SwipeDetector( int distance, int velocity) {
 super ();
 this .swipe_distance = distance;
 this .swipe_velocity = velocity;
 } 
 
 public SwipeDetector() {
 super ();
 this .swipe_distance = SWIPE_MIN_DISTANCE;
 this .swipe_velocity = SWIPE_THRESHOLD_VELOCITY;
 } 
 
 public   boolean isSwipeDown(MotionEvent e1, MotionEvent e2, float velocityY) {
 return isSwipe(e2.getY(), e1.getY(), velocityY);
 } 
 
 public   boolean isSwipeUp(MotionEvent e1, MotionEvent e2, float velocityY) {
 return isSwipe(e1.getY(), e2.getY(), velocityY);
 } 
 
 public   boolean isSwipeLeft(MotionEvent e1, MotionEvent e2, float velocityX) {
 return isSwipe(e1.getX(), e2.getX(), velocityX);
 } 
 
 public   boolean isSwipeRight(MotionEvent e1, MotionEvent e2, float velocityX) {
 return isSwipe(e2.getX(), e1.getX(), velocityX);
 } 
 
 private   boolean isSwipeDistance( float coordinateA, float coordinateB) {
 return (coordinateA - coordinateB) > this .swipe_distance;
 } 
 
 private   boolean isSwipeSpeed( float velocity) {
 return Math.abs(velocity) > this .swipe_velocity;
 } 
 
 private   boolean isSwipe( float coordinateA, float coordinateB, float velocity) {
 return isSwipeDistance(coordinateA, coordinateB)
                && isSwipeSpeed(velocity);
 }
 }

Now that I have a handy class that tells me if my finger has swiped, I can embed it into my UI. Recall the default activity I first created, which I named OverheardWord. I kept all of the code that Eclipse provided, but added a few new things to listen for swipes and respond. I defined an Android GestureDetector that will perform an OnGestureListener implementation. I'm really grateful that the Android team created a handy class that I can use to do this with an anonymous class called SimpleOnGestureListener, and then override the onFling method.

Swipe detection in UI

In the onCreate method of the Activity, a GestureDetector is initially created using a SimpleOnGestureListener, which requires the use of my SwipeDetector class.

The next step is to create a small dialog box and specify the trigger event when the finger slides. This kind of small, temporary dialog box is called Toast here. Sometimes Toast has only one line of code.

Listing 5. GestureDetector

 private GestureDetector initGestureDetector() {
 return   new GestureDetector( new SimpleOnGestureListener() { 
         
 private SwipeDetector detector = new SwipeDetector(); 
         
 public   boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
 float velocityY) {
 try {
 if (detector.isSwipeDown(e1, e2, velocityY)) {
 return   false ;
 } else   if (detector.isSwipeUp(e1, e2, velocityY)) {
                    showToast( "Up Swipe" );
 } else   if (detector.isSwipeLeft(e1, e2, velocityX)) {
                    showToast( "Left Swipe" );
 } else   if (detector.isSwipeRight(e1, e2, velocityX)) {
                    showToast( "Right Swipe" );
 }
            } catch (Exception e) {} //for now, ignore  
 return   false ;
 } 
         
 private   void showToast(String phrase){
            Toast.makeText(getApplicationContext(), phrase, Toast.LENGTH_SHORT).show();
 }
 });
 }

Now we'll create an initGestureDetector method that calculates the extent and speed of the user's finger swipe. First, create an anonymous SimpleOnGestureListener instance and provide an implementation of the onFling method. Notice how the onFling method uses the SwipeDetector. For example, if a matching item is swiped up, a Toast is displayed to indicate the movement.

The next step is to insert this swipe detection behavior into my UI. I start by registering a few listeners with the View instance.

Listing 6. Registering swipe detection on a view.

 private GestureDetector gestureDetector; 
 
 protected   void onCreate(Bundle savedInstanceState) {
 super .onCreate(savedInstanceState);
    setContentView(R.layout.activity_overheard_word); 
 
    gestureDetector = initGestureDetector(); 
 
    View view = findViewById(R.id.LinearLayout1); 
 
    view.setOnTouchListener( new View.OnTouchListener() {
 public   boolean onTouch(View v, MotionEvent event) {
 return gestureDetector.onTouchEvent(event);
 }
 }); 
 
    view.setOnClickListener( new OnClickListener() {
 public   void onClick(View arg0) {
 }
 });
 }

I get a handle to the View instance by its Id in the onCreate method. Most Java developers prefer this handy Android-ism.

Find a view by ID

Remember when I defined the XML for the UI, the corresponding values ​​in various resource files (such as strings.xml)? When I compile the Android application, the XML will be turned into code, providing the corresponding Ids in class R. Before going further, you should examine the R class in the gen directory of your project.

Look at your layout XML file (you may recall that I named mine activity_overheard_word.xml). Each widget in the XML file has an id attribute. For example, for simplicity, the layout id of my application is android:id="@+id/LinearLayout1" or LinearLayout1. The id name is automatically generated by Eclipse and can be changed if necessary. The important thing is that this idLinearLayout1 has a corresponding attribute in the R class, as shown in Listing 7 .

Listing 7. Widget IDs in the R class

 public   static   final   class id {
 public   static   final   int LinearLayout1= 0x7f090000 ;
 public   static   final   int action_settings= 0x7f090004 ;
 public   static   final   int word_study_definition= 0x7f090003 ;
 public   static   final   int word_study_part_of_speech= 0x7f090002 ;
 public   static   final   int word_study_word= 0x7f090001 ;
 }

By combining the contents of the XML file with its corresponding R file, I can reference these widgets without having to parse the XML. Therefore, the onCreate method of the Activity is returned and I can apply the View widget by its id (R.id.LinearLayout1). The findViewById method is provided by the Android platform when extending an Activity.

Just swipe your finger and it's done easily!

Once I have the View instance, I can attach my gestureDetector instance via setOnTouchListener. In Listing 6 , another anonymous class is now handling all of my touch behavior. When the user touches the device screen, events are triggered and actions are taken according to the gestureDetector. I also implemented an OnClickListener and set it in the OnClickListener method; however, the anonymous class has no behavior in this case.

With this, I have a relatively simple interface that responds to a finger swipe. In this example, three of the swipe gestures are used: left, right, and up. Try this code in your AVD. To simulate a finger swipe, use the mouse to click and then drag up, down, or right.

Now, what will it be like to run this application under development on a real device?

Deploy a development

In response to the proliferation of viruses, Trojans, and malware that plague unsuspecting users, Apple and Google each introduced code signing for third-party apps that run on their devices. In theory, code signing ensures that reputable people build apps, ensuring that no one can tamper with them before you install them. In practice, Google and Apple sign code with the same degree of security. For example, when I sign my Android app, I can state that I am a national bank in good standing. I can't do that when I sign my iOS or Windows Phone 8 app.

In development mode, you don't have to worry about code signing. In fact, Android and Eclipse build binaries signed with a developer key, unknown to you. So, it's not difficult to get an app onto a device in development mode, and the easiest way is to plug your Andriod device into a computer USB port.

Next, go into Eclipse, right-click your project and select the Run As menu option, then click Run Configurations. Eclipse displays a configuration dialog box where you can select your project and then click the Target tab, as shown in Figure 9 .

Figure 9. Select a device to run your application.

You can choose to Always prompt to pick device (if you want to be selective) or Launch on all compatible devices/AVD's. If you choose the latter, you can select the Active Devices tab like I did and click Run. Assuming you are coding along with me, a few moments later, a beautiful application will appear on your device. Swipe your finger left, right, and up, and watch the magic happen, this simple dialog box will take care of everything.

Security Settings : If you can't load your app from Email or Dropbox, go to your device settings and enable Unknown Sources under Security Settings. You can use this feature to install apps, including apps you're developing, instead of installing them from Google Play.

Another way to deploy an application is to have its .apk file emailed to you, then open the file on your Android device and follow the automatic installation dialogs. You can also upload the .apk file to a service like Dropbox, then open Dropbox on your device to install it. The application's .apk file is in your project's bin directory, where Eclipse also saves the corresponding binary file.

Keep in mind that these deployment mechanisms are for development testing, not for publishing your application. Publishing your application and making money from it involves more steps, which I will cover in a subsequent article.

Conclusion

Designing a mobile app means thinking about everything a little simpler and easier. In this installment, you learned how to write a mobile app that responds to swipe gestures, without the button clicks that desktop or Web users have. Sometimes, a mobile device can benefit from a handy button or two. Make sure they fit the user's purpose. I didn't need to design buttons for my super simple app, Overheard Word. For most app users, the up-and-down swipe navigation I used is intuitive.

In this article, I gave a general introduction to mobile app deployment and didn't go into depth about testing because you haven't deployed a production app yet. Most users won't install an app without a good reputation, which is why many successful apps are distributed through intermediaries such as Google Play, the iTunes App Store, or the Amazon Appstore for Android. In this article, I detailed the process of meeting app store security standards, which requires only a few steps and is much simpler than signing your app. The important thing is that once your app is published by a major distributor, it becomes available to the world.