variables to store current configuration of quote card. Place these lines of code before the when(event.action) statement: tOnTouchListener( We will just make sure that it is calculated with respect to the full-screen width, not just the card's width. To implement the logic, we first need to have the starting position of the card, which is fairly easy to calculate. You guessed it – we will calculate the mean position and on the ACTION_MOVE event, we will check if the user swiped to the left and move the card accordingly. Swipe only if moved towards the left of mean position We want the card to swipe if and only if the user swipes it to the left of the mean position. Let's define the mean position as the center of the card. Now, to achieve this, let's think of it in terms of the card. We want users to be able to swipe it only to the left, and if the minimum threshold to load a new quote is reached, it should move back to its original position and load a new quote. Your code will also make more sense when your requirements are clear. Implementing functionality is easier when you know exactly what you wish to have. The math behind the swipe actionįirst, let's re-think what we want to achieve. The basic setup for the card is done, so let's figure out the swiping logic. There are many other action events that we can override, such as ACTION_DOWN that's called when a person gets hold of the view, but we don't need them for this feature. The ACTION_UP is called when a user lifts their finger from the card, basically, when they release it.The ACTION_MOVE event is called when a user starts swiping the card, that is, moving it. Here, we are specifically listening for 2 actions on the card – the ACTION_MOVE and the ACTION_UP. Here is the blueprint of the touch listener we will be using: tOnTouchListener( Within the listener, we will add the logic to do the math and perform the animations. Each time an action is performed on the card, the touch listener is called. To handle swipes, we first need to set a touch listener on the card. Now, we're ready to make that awesome swipe interface! How to Handle Swipes in Our App It uses the MVVM design pattern, but this article doesn't rely on what pattern you use for the business logic of your app, as we'll just be working on the UI part. Here's the complete code for our Quotes app, if you wish to check it out. You can get the layout I used here from the GitHub repository, or build your own. We won't be making the XML code for the user interface. There's also a ProgressBar that gets shown while loading a new quote. It is an androidX CardView with a bunch of TextViews and an ImageView. Here's a demo of how it works:Īmazing, right? Let's get into it! Prerequisitesįor this tutorial, we will use Kotlin as the programming language for our app – but you can easily translate the code to Java and it would work the same.įor reference, this is the quote card that we wish to enable the swipe feature on. When they've swiped far enough, the app will load a new card with a new quote.īy the end of this post, you will learn how to make a really smooth animated card which a user can swipe that can perform whatever action you choose. So what we'll do in this tutorial is drop the buttons, and instead have logic where a user can swipe the card to the left. But that's pretty basic and any app could do that! Even if you're just building a simple side-project, there's no trade-off for good UX :) Of course, you could just add two simple buttons to load the next/previous quote and call it a day. It can be hard to hook the user and keep them interested. Now, it might seem difficult to make your app stand out if you just have something basic like a quote sharing app (which is what we are going to work on here). And since interactive experiences are kind of the new norm, you'll want to figure out ways to set your app apart. These days, if you see an app that has no animation, it can feel odd and out-dated. They can improve your app's user experience and increase retention. If you're building an Android app, you should consider adding animations.
0 Comments
Leave a Reply. |