Android - Show/Hide TextView using Swipe Left to Right

Question

I'm trying to show/hide TextView. So if the user swipe left-to-right, it will show TextView from behind the "orange gradient view". And after the text shown, after 5 seconds, it will hiding it again like the picture below:

But i don't have any idea what the best practice to implement just like above. Please help.

Make them one on top of another and google and research this: GestureDetector, Android Animation — JoKr, Jan 13 '17 at 12:38
to expand on what @gudin has wrote. put them both in a framelayout with the gradient on top, when a gesture is detected on the orange gradient widget, animate a slide right animation (when animation is finished set the orange gradient to INVISIBLE with an animation listener). Create a new postdelayed handler for five seconds and when that is complete either slide the orange gradient back in or make it visible again. — Bradley Wilson, Jan 13 '17 at 12:40
@BradleyWilson : can you give me an example, please? if the gesture x pos is in the center, how can i pause the animation to the half of the orange gradient widget width? — wdyz, Jan 13 '17 at 12:45
unfortunately I'm not here to write code for you. But you can just do a TranslateAnimation and set the position for the center as the same as the user's touch position until they reach the end of the screen (or close to it) — Bradley Wilson, Jan 13 '17 at 12:48
Thank you Bradley. @wdyz Read docs for animation: https://developer.android.com/guide/topics/graphics/view-animation.html once you understand it, you will figure it out. Anway this is bit more specific-custom design, so don't expect to find code that works exactly what you want, instead you will have to invest some time reading docs. — JoKr, Jan 13 '17 at 12:50

score 8 · Accepted Answer · answered Jan 13 '17 at 13:02

Here is the xml file

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/activity_theme_sel_ll_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

   <!--Add your content here for texview and whatever -->
    </LinearLayout>

Now use this class

import android.content.Context;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

/**
 * This TouchListener is Using for very First time ThemeSelection Screen with SwipeLeft Finger
 */
public class OnSwipeTouchListener implements OnTouchListener {

    private final GestureDetector gestureDetector;

    public OnSwipeTouchListener(Context ctx) {
        gestureDetector = new GestureDetector(ctx, new GestureListener());
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        return gestureDetector.onTouchEvent(event);
    }

    private final class GestureListener extends SimpleOnGestureListener {

        private static final int SWIPE_THRESHOLD = 1;
        private static final int SWIPE_VELOCITY_THRESHOLD = 1;

        @Override
        public boolean onDown(MotionEvent e) {
            return true;
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            boolean result = false;
            try {
                float diffY = e2.getY() - e1.getY();
                float diffX = e2.getX() - e1.getX();
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                        if (diffX > 0) {
                            onSwipeRight();
                        } else {
                            onSwipeLeft();
                        }
                    }
                    result = true;
                } else if (Math.abs(diffY) > SWIPE_THRESHOLD && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD) {
                    if (diffY > 0) {
                        onSwipeBottom();
                    } else {
                        onSwipeTop();
                    }
                }
                result = true;

            } catch (Exception exception) {
                exception.printStackTrace();
            }
            return result;
        }
    }

    public void onSwipeRight() {
    }

    public void onSwipeLeft() {
    }

    public void onSwipeTop() {
    }

    public void onSwipeBottom() {
    }
}

In your MainActivity.java class use below code

//llMain is the root layout of your xml where you want to perform swipe 
        llMain.setOnTouchListener(new OnSwipeTouchListener(ThemeSelectionActivity.this) {
            @Override
            public void onSwipeLeft() {
                super.onSwipeLeft();

                }
            }

            @Override
            public void onSwipeRight() {
                super.onSwipeRight();

    // Put your logic here for text visibility and for timer like progress bar for 5 second and setText 
            }
        });

Thank you! i've tried this code and works well. But, how i can add swipe animation on orange gradient widget? and can the animation be stopped at the x pos of gesture? — wdyz, Jan 13 '17 at 13:30

score 3 · Answer 2 · answered Jan 17 '17 at 05:02

Create a directory anim inside the res directory and put this as slide.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">

   <translate
        android:fromXDelta="0%p"
        android:toXDelta="75%p"
        android:duration="800" />
</set>

Use below method for animation

    /**
     * Animate the swipe rightto left
     *
     * @param context context of the activity or fragment
     */
    private void animImage(final Context context) {
        // Load the animation like this
        final Animation animRightToLeft = AnimationUtils.loadAnimation(context, R.anim.anim_move_right_to_left);
        textViewObject.setLayerType(View.LAYER_TYPE_HARDWARE, null);
        // Start the animation like this
        textViewObject.startAnimation(animRightToLeft);
    }

// Now on MainActivity 
llMain.setOnTouchListener(new OnSwipeTouchListener(ThemeSelectionActivity.this) {
            @Override
            public void onSwipeLeft() {
                super.onSwipeLeft();

                }
            }

            @Override
            public void onSwipeRight() {
                super.onSwipeRight();
animImage(getApplicationContext());
            }
        });

thanks, How can we make it touch responsive slide animation. Like if i touch and swipe it to right it swipe upto the point where my finger is. same as whatsapp reply functionality — Mohsin, Dec 24 '17 at 05:50

Android - Show/Hide TextView using Swipe Left to Right

2 Answers2

Linked