Mobile Single Screen Layout with Video View and Multiple Gestures

1. Mobile Single Screen Layout with Video View and Multiple Gestures 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:

2. 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() {

3. 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); }

4. 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();

5. 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; }

6. 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);

7. } }); } 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