Feb 26, 2012

Android - How to stretch video to fill VideoView area

The VideoView class included in the Android SDK provides a very convenient wrapper of the Surface View class. It takes care of computing its measurement from the source video so that it can be used in any layout manager.

By default  Android will scale the video to fit the VideoView but keeping the video aspect ratio. That means that depending on the device's screen size there might be some black spaces left around the video the video since the it's not filling the screen.

Depending on what you are looking for, you might actually want to completely fill the parent container area even if that means to stretch the video to fill the gaps (in other words, altering the aspect ratio of the video).

Well, turns out that even though the VideoView doesn't provide an explicit way to specify the filling mode, you can achieve the same result by wrapping the video view in a Relative Layout and setting the VideoView alignments to match the parent's boundaries:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <VideoView android:id="@+id/videoViewRelative"
         android:layout_alignParentTop="true"
         android:layout_alignParentBottom="true"
         android:layout_alignParentLeft="true"
         android:layout_alignParentRight="true"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent">
    </VideoView>
    
</RelativeLayout>
Here is an example of two different layouts, one using a Linear Layout to wrap a VideoView and the other one using a Relative Layout:

LinearLayour wrapper
RelativeLayout wrapper

So, whether you want to keep the aspect ratio of a video or stretch it to fill its parent area, using the right layout manager can get the job done.

Hope this helps!

59 comments:

  1. Could you use this to make some sort of filter for google hangouts so that faces filled the screen, even if the aspect ratio and/or distance from the camera of the source feed was not ideal.

    Find the face
    Zoom/stretch to fill screen

    Why?

    To fill tablets screens with a face.


    ReplyDelete
    Replies
    1. I Don't Know You, but all i can say is 'THANK YOU FOR EVER',you solved my problem

      Delete
  2. Many thanks! Awesome share - I've been trying to do this and couldn't get my video views to fill.

    Works a treat.

    ReplyDelete
  3. Thanks this was helpful.

    ReplyDelete
  4. Yes, it helps. Thanks

    ReplyDelete
  5. I also don't want the black space but I also don't want to altering the aspect ratio. For example, for 16:9 video to be place on 4:3 screen. Normally, there is black space on the top/bottom. Then I resize the video height to screen height and keep aspect ratio such that the video width is bigger than screen width. I have implemented this in surfaceView. I can resize the surfaceView as I want but once it is bigger than the screen size, it only show black screen and keep playing audio:(

    ReplyDelete
  6. Great, that works !!!! Thank you

    ReplyDelete
  7. I can only say u rock..............

    ReplyDelete
  8. This is very useful post.....can u please post full video view in android emulator from local sd card codings... Thanks in advance

    ReplyDelete
  9. Cool ....Thanks for sharing :-)

    ReplyDelete
  10. Thank you so much.

    ReplyDelete
  11. Excellent sharing... u saved my day
    Thank you very much!!

    ReplyDelete
  12. Its really working,

    thanks.....

    ReplyDelete
  13. thank you very very much but please explain reason too..

    ReplyDelete
  14. Thanx...it works...

    ReplyDelete
  15. really thanks to u ...well done...

    ReplyDelete
  16. Just what I needed. Thanks!

    ReplyDelete
  17. it works. Thank you!

    ReplyDelete
  18. It really was helpful. Thank you.

    ReplyDelete
  19. Thank you very much!!!!

    ReplyDelete
  20. Works well still in 2015!

    ReplyDelete
  21. Where do i type these commands??

    ReplyDelete
  22. where do i write these commands?

    ReplyDelete
  23. thank you! this was helpful

    ReplyDelete
  24. Thanks for sharing this! Very useful~

    ReplyDelete
  25. Working Good..Simple and correct.

    ReplyDelete
  26. Worked like a charm!!!

    ReplyDelete
  27. Thanks :) This was very useful as a quick fix as opposed to overriding the videoview class

    ReplyDelete
  28. really thanx mate..

    ReplyDelete
  29. it works great thank you so much you are very helpful

    ReplyDelete
  30. It works really good and was an easy fix. Thank you!

    ReplyDelete
  31. Excellent post. Android is an open source operating system used for tablet computers and smartphones. If your are interested to develop creative mobile applications then you must learn about android OS. Its helpful for you.

    Regards..
    Android Training in Chennai

    ReplyDelete
  32. Simple but useful...

    ReplyDelete
  33. Thanks, man! Be my guest! You deserve a piece of cake!

    ReplyDelete
  34. awesome , I dont know what I would have done if There haven't been your website

    ReplyDelete
  35. Thanks a lot man
    Really helpful :D

    ReplyDelete
  36. I can use this code to work,In my code ,I use fragment attach to ViewPager to show videoview,But can not stretch video to VideoView.can you help me?

    ReplyDelete
  37. thanks man , you saved my time

    ReplyDelete
  38. Check out this article about parental control software, to stay in touch with the topic.

    ReplyDelete
  39. The Info shared was very much useful My sincere thanks for sharing this post Please Continue to share this post.


    Android Training in Chennai

    ReplyDelete
  40. Thanks, Still helpful in 2018

    ReplyDelete
  41. Thank you, your post saved my time.

    ReplyDelete