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!

50 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
  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. thank you very very much but please explain reason too..

    ReplyDelete
  13. Thanx...it works...

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

    ReplyDelete
  15. Just what I needed. Thanks!

    ReplyDelete
  16. it works. Thank you!

    ReplyDelete
  17. It really was helpful. Thank you.

    ReplyDelete
  18. Thank you very much!!!!

    ReplyDelete
  19. Works well still in 2015!

    ReplyDelete
  20. Where do i type these commands??

    ReplyDelete
  21. where do i write these commands?

    ReplyDelete
  22. thank you! this was helpful

    ReplyDelete
  23. Thanks for sharing this! Very useful~

    ReplyDelete
  24. Working Good..Simple and correct.

    ReplyDelete
  25. Worked like a charm!!!

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

    ReplyDelete
  27. really thanx mate..

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

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

    ReplyDelete
  30. 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
  31. Thanks, man! Be my guest! You deserve a piece of cake!

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

    ReplyDelete
  33. Thanks a lot man
    Really helpful :D

    ReplyDelete
  34. 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
  35. thanks man , you saved my time

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

    ReplyDelete
  37. Works , dude you are a genious

    ReplyDelete
  38. Works , dude you are a genious

    ReplyDelete