4 min read

The custom Mobile App Development experts at Lia Infraservices is here to brief you about how to set up “Single Screen Layout with Video View and Multiple Gestures“. This contains custom video controllers, seek bar with timer, multiple gestures like a single tap at left and right, swipe up and down.

For that, I split the device screen into three parts. Left, Middle, Right.
Our device screen has two coordinates X and Y.
To splitting the device screen into three parts, we must know the total range of values in X and Y coordinates.
For that, the ACTION_DOWN event is used to get the value of X and Y while touching the screen.

        case MotionEvent.ACTION_DOWN:
            initialX = event.getX();
            initialY = event.getY();
            break;
        case MotionEvent.ACTION_UP:
            float finalX = event.getX();
            float finalY = event.getY();
            x1 = event.getX();
            y1 = event.getY();
            Log.d("x1", ">>" + x1);
            Log.d("y1", ">>" + y1);

(approximately)

Find the layout width: Single Screen Layout with Video View and Multiple Gestures

For finding the width, make sure our xml layout_width and layout_height should be match parent.
android:layout_width=”match_parent”
android:layout_height=”match_parent”
Because each mobile has different pixels.so this will affect the design.

// GET WIDTH OF THE LAYOUT
relativeLayout.post(new Runnable() {
@Override
public void run() {
width = relativeLayout.getWidth();
}
});

By using the values of x and y, write the conditions for each gestures on touch event,

Here I used only Action down and action up

@Override
public boolean onTouchEvent(MotionEvent event) {

    int action = event.getActionMasked();

    switch (action) {
case MotionEvent.ACTION_DOWN:

break;
case MotionEvent.ACTION_UP:
break;

Click here To know about MotionEvents

Splitting Screen into three parts:

        case MotionEvent.ACTION_UP:
            float finalX = event.getX();
            float finalY = event.getY();
            x1 = event.getX();
            y1 = event.getY(); 
            float half = width / 2;       //540
            float Dividedby3 = width / 3; //360
            float Dividedby4 = width / 4; //270
            float mid = by3 + by4;
            Log.d("half", ">>" + width / 2);
            Log.d("3", ">>" + width / 3);
            Log.d("4", ">>" + width / 4);
            Log.d("mid", ">>" + mid)

On Swipe up and down: Single Screen Layout with Video View and Multiple Gestures

Create a separate layout for content to show while swiping up, on swipe down set that layout invisible.

if (initialY < finalY) {

                swipe.setVisibility(View.GONE);
            }

if (initialY > finalY) {
swipe.setVisibility(View.VISIBLE);
relativeLayout.setVisibility(View.GONE);

            }

Hide and show the layout content by tapping at middle of the screen:

Create separate layout for this action and initialize Boolean variable flag.
Make that layout background as transparent.
android:background=”#66000000″

                if (flag == false) {
                    relativeLayout.setVisibility(View.GONE);
                    flag = true;
                } else {
                    relativeLayout.setVisibility(View.VISIBLE);
                    flag = false;
                }

Tap right or left to see previous or next Video:

if (x1 < Dividedby3) {

       (write action)

}
else if (x1 > Dividedby3 && x1 > mid) {

      (write action)

}

Swipe Left or Right to see next session:

            if (initialX < finalX) {
                 Log.d(TAG, "Left to Right swipe performed");

            }

            if (initialX > finalX) {
                 Log.d(TAG, "Right to Left swipe performed");

            }

Custom video controller:

Prepared Listener for Media Player

    videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
        @Override
        public void onPrepared(MediaPlayer mp) {
            videoView.start();
            setVideoProgress();
        }
    });
    setPause();
    setforward();
    setRewind();

    return super.onTouchEvent(event);
}

For seek bar timing, Use this time conversion

//time conversion
public String timeConversion(long value) {
String videoTime;
int dur = (int) value;
int hrs = (dur / 3600000);
int mns = (dur / 60000) % 60000;
int scs = dur % 60000 / 1000;

if (hrs > 0) {
    videoTime = String.format("%02d:%02d:%02d", hrs, mns, scs);
} else {
    videoTime = String.format("%02d:%02d", mns, scs);
}
return videoTime;

}

Get the current position and total duration from seek bar, for forward and rewind the video.
//progress video
public void setVideoProgress() {
//get the video duration
current_pos = videoView.getCurrentPosition();
Log.d(“current_pos”, “>>>” + videoView.getCurrentPosition());//0

total_duration = videoView.getDuration();
seekBar.setMax((int) total_duration);
Log.d("total_duration", ">>>" + videoView.getDuration());//-1

//display video duration
total.setText(timeConversion((long) total_duration));
current.setText(timeConversion((long) current_pos));
seekBar.setMax((int) total_duration);
final Handler handler = new Handler();

Runnable runnable = new Runnable() {
    @Override
    public void run() {
        try {
            current_pos = videoView.getCurrentPosition();
            current.setText(timeConversion((long) current_pos));
            seekBar.setProgress((int) current_pos);
            handler.postDelayed(this, 30);
        } catch (IllegalStateException ed) {
            ed.printStackTrace();

        }
    }
};
handler.postDelayed(runnable, 30);
//seekbar change listner
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        Log.d("seekchangeprogress", ">>>>>" + progress);
        progress1 = seekBar.getProgress();
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        current_pos = seekBar.getProgress();
        videoView.seekTo((int) current_pos);
        Log.d("seekchange1", ">>>>>" + current_pos);
    }
});

}

Write some methods for,
setPause();
setforward();
setRewind();

Conclusion:

To develop custom video controllers seek bar with timer, multiple gestures like a single tap at left and right, swipe up and down, contact LIA Infraservices the leading Mobile App Development Company in Chennai, Experts in Web Development, DevOps, Digital Marketing, Graphics & UI/UX Design and Cloud Migration Services.

If you find this blog “Single Screen Layout with Video View and Multiple Gestures” informative please comment below or Contact Lia Infraservices