Making use of the many Android gestures is absolutely fundamental to providing an excellent user experience. You'll learn how to detect gestures for touching, double tapping, scrolling, time delayed touching, swiping, dragging, and scaling.
At the core of every great android application is an intuitive, interactive design. In this course, Android Gestures: Getting Started, you will learn how to master the core concepts related to detecting gestures with an Android device. First, you will take a close look at the basic touch gestures, double-tap gestures, scroll gestures, time delayed gestures, swipe gestures, drag gestures, and scaling gestures. Then, you will build a draggable, scalable custom ImageView. Finally, you will explore how to use a RecyclerView for moving list items, swiping, and detecting changes to the scroll state. When you’re finished with this course, you will have a foundational knowledge on detecting and responding to gestures that will help you as you move forward to develop mobile applications.
Course Overview Hi, my name is Mitch Tabian, and welcome to my course, Android Gestures: Getting Started. I'm a self-employed Android developer, and I'm going to teach you about detecting gestures with Android. Making use of the many Android gestures is absolutely fundamental to providing an excellent user experience. The Android SDK has a ton of built-in convenience classes that we can use to detect gestures. Things like touching, double-tapping, dragging, scaling, and even tracking movement around the screen. Some of the major topics we'll cover include detecting common gestures like touching the screen, removing a finger from the screen, detecting double-taps, and detecting a long press. We'll build a custom ImageView class that users can drag around the screen and zoom in or out. In the course, we'll customize a RecyclerView to allow user interactions like moving list items around, swiping, and detecting changes to the scroll state. By the end of the course, you'll have an excellent understanding of the most important concepts when it comes to detecting gestures. Your applications will be more interactive, intuitive, and therefore provide a superior user experience. The course is meant for beginners when it comes to gestures, but targets a more intermediate developer overall. You should be very familiar with RecyclerViews, ListViews, onClick events, fragments, and settings images to ImageViews. I hope you'll join me on this journey to learn about gestures with the Android Gestures course at Pluralsight.
Swiping Through Images with a ViewPager In this module, we'll implement the swipeable image functionality that we looked at in the application demo. For the duration of the module, we'll be working with the source code files in the directory Module_2/start_CodingWithMitchStore. If you imported the code from GitHub, you'll want to start with the branch named Module_2. 2_Start. For those of you who have no experience using a ViewPager and the FragmentStatePagerAdapter, you know it's actually not a gesture or a gesture listener. It looks like a gesture listener, because it responds to swiping left or swiping right. I chose to include it in this course, because in my opinion, it's the most effective way to swipe through images. For those of you who have no experience with ViewPagers, a ViewPager is a special type of fragment container that's swipeable. It's typically used to hold fragments in tabs. We're going to leverage the swipeability of the ViewPager and use it to swipe through product variations in our application. You can think of the ViewPager as the actual container holding the currently active fragment. Inside that fragment will be an image of the product, the title of the product, and the price. After the ViewPager is set up and we're able to swipe through the fragments, we'll introduce a tab layout and associate it with the ViewPager. That's what this is down here. These are the tabs that are associated with the ViewPager. The large gray circle denotes which fragment in the list we're currently viewing.
Detecting Common Gestures A touch gesture occurs when a user places one or more fingers on the screen, and your application interprets the pattern of touches as a particular gesture. For the duration of the module, we'll be working with the source code files in the directory Module_3/start/CodingWithMitchStore. If you imported the code from GitHub, you'll want to start with the branch named Module_3. 2_Start. There are three phases for detecting a touch gesture. Phase 1 is detecting the initial touch on the screen, phase 2 is determining what type of touch the gesture was, and phase 3 is executing the desired methods for that gesture. To detect the initial touch to the screen, we'll be making use of the View. OnTouch listener interface. The interface intercepts touch to the screen, tracks movement, and detects when the touch ends. We can determine which of these actions are occurring using some if/else logic or a switch statement. To detect more complicated gestures, we'll take a look at two more interfaces. GestureDetector. OnGestureListener, and GestureDetector. OnDoubleTapListener. With these two interfaces, we can detect gestures like long presses, flings, scrolls, and double-taps.
Leveraging RecyclerView Scroll Gestures In this module, we're going to increase the interactability of RecyclerViews by implementing a custom OnScrollListener and a SwipeRefreshLayout. For the duration of the module, we'll be working with the source code files in the directory Module_6/start/CodingWithMitchStore. If you imported the code from GitHub, you'll want to start with the branch named Module_6. 2_Start. So, how exactly does a scroll listener improve interactability? Well, it doesn't directly. But you can use it to listen for events when users are scrolling, and then trigger custom methods, and that can improve interactability. We're going to explore the various RecyclerView scroll states that you can leverage in your applications. We'll be able to detect when a user begins to scroll, when a user stops scrolling, when a user is actively scrolling, and when a user makes a flinging motion on the list. Have you ever used a swipe refresh layout? If you have, I'm sure you love them. I know I do. And it's for good reason. They look good, and they're so easy to implement. Not sure what it is? This is the mobile app for YouTube. See this circular loading animation? That's a swipe refresh layout. You can trigger it by dragging downwards on a view. In this case, it's a list of videos. We'll be implementing this same thing in our application to refresh a RecyclerView.
RecyclerView Interactions with ItemTouchHelper In this module, we're going to implement an ItemTouchHelper class for the RecyclerView in ViewCartActivity. For the duration of the module, we'll be working with the source code files in the directory Module_7/start/CodingWithMitchStore. If you imported the code from GitHub, you'll want to start with the branch named Module_7. 2_Start. So what exactly is an ItemTouchHelper? ItemTouchHelper is a utility class used to add swipe to dismiss and drag and drop support to RecyclerViews. It works with the RecyclerView and a Callback class. The Callback class is responsible for configuring what type of interactions are enabled and also receives events when the users perform these actions. That was the technical jargon. Now let me show you what we're going to be doing in a practical sense. The ItemTouchHelper class will help us build this interactive RecyclerView. As you can see, I have a bunch of items added to the cart, and there's different headings in the list. There is Must Have, Maybe, and Probably Not. Since this is a shopping app, it's meant to assist the user in deciding what products they're going to purchase. We'll add these headings to the RecyclerView list by inflating different views in the RecyclerView adapter. If I hold my finger down on a list item, it highlights. The highlight signifies the ability to move the list item around. Notice I can now drag the list item into a new position. We'll also be using the ItemTouchHelper to make the list items swipeable. Notice if I swipe to the right, the item is removed from the list and a toast prints out saying removed from cart.
Tying It All Together In the first part of the course, we worked on implementing a ViewPager for swiping through product images. But technically we didn't actually swipe through the images. We swiped through the fragments containing the images. Using a ViewPager like this isn't technically a gesture. But I believe it to be the most effective way to swipe through a bunch of images or any custom view for that matter. To improve the overall look and feel of the image swipe experience, we added a tab layout below the ViewPager. The tab layout will highlight the current position of the ViewPager by displaying a large gray circle. The smaller circles denote the positions of the remaining fragments in the list.