[THEME][HOW TO]Animated Backgrounds From Video - ViperOne ROM demo

Search This thread

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA
How-to make your own custom animated backgrounds from slices cropped from video ...
So your end results are things like these:


XV8S8Dw.gif
K1DkXw0.gif
3z9UL4h.gif

Or like turning this (left) into this (right)
W106sc7.jpg
pFivlBH.gif



Also, my flashables to apply in VenomTweaks are all here.
This tutorial uses the ViperOne M8 ROM but the process described here for turning a video into a folder of images for animation is universal.

This tutorial is made for the users of ViperOne ROM because Team Venom has a pretty awesome built-in theme engine that everybody should be using and enjoying. Here is one way you can do that! The overall process is universal for anything you want to do involving video to custom animation (i.e. boot animations), but I made this tutorial for ViperOne ROM users. "Giving back" because I love that ROM too. I am not a Team Venom member, just a satisfied user.

One Key Prerequisite – You need to already be set up to decompile and build (recompile) apk files and make a few specific, simple edits to XML files. There are many guides about this and several options. In this tutorial I will use APKTOOL and VIRTUOUS TEN STUDIO. If you cannot decompile and recompile an app then this guide is not YET for you. Figure that out first, then come back! ;) It's good to know how to do this for a TON of reasons if you're just getting started with Android and wanting to learn some more. Search "how to decompile" or "how to use apktool" and pick a guide. I am not offering to help with that part. Come back here when you're set up though. ;)

I also made a Video Walk-through for this tutorial:
http://vimeo.com/erikalin/animated

Have these things (all free & good):
1. Computer setup for decompiling and recompiling apk files (i.e. apktool)
2. Something for editing XML files (i.e. Virtuous Ten Studio)
3. Something to batch rename and resize images (i.e. FastStone Photo Resizer)
4. Something to extract zip files (i.e. 7-zip or Winrar)
5. A short animation or video or loop to work with.
6. Download animationtemplate.apk here: http://www.androidfilehost.com/?fid=23501681358537298

Overall Directions:
1. Find or create a short video about 5 seconds in length.
2. Turn that video into a series of jpeg image files.
3. Choose 100 images for the animation.
4. Resize images to be 116 width by 200 height jpeg format, and rename images anim#
5. Decompile animationtemplate.apk.
6. Drop those 100 images into the decompiled drawable-hdpi folder
7. Edit strings.xml for correct theme name and author
8. Edit AndroidManifest.XML package name
9. Build and sign the apk
10. Rename the apk to the name of your animation
11. Test it!
12. Create an animated gif preview for you own records and for sharing on XDA
13. Share it!


Detailed Directions (see video demo also)
1. Find or create a short video about 5 seconds in length.

Be sure to download only what is legally offered for free and public use by the party authorized to give such rights. It's fun to grab a quick video of a kid or pet if you have any. If you find such a thing on youtube, a safe download site to use is this: http://www.clipconverter.cc/ . You're going to have to resize and crop out a vertical slide (the aspect ratio of your phone's display), so keep that in mind. You can accomplish the ratio by adding canvas to the top of bottom as well. I often end up "zooming in" on a piece of the video by cropping the images. Trial and error.

2. Turn that video into a series of jpeg image files.

You can do that here: http://image.online-convert.com/convert-to-jpg
You’ll get a zip file from that conversion. Extract it. Name the extracted folder rawimages.

3. Choose 100 images for the animation.

Create a new folder and name it chosenimages. It doesn’t matter how many jpeg files are in that rawimages folder right now, you need to narrow it down to 100 for your animation. If your video was a good resolution, you can take skip every other jpg file and they’ll still work for your animation at this resolution. Just narrow it down to 100, however you want. Remember that the animation is a loop, so try to “end” the animation in a way that naturally looks good when it starts back at the beginning. When you’re done you have the 100 images you want to use in your chosenimages folder.
Optional info: Don’t consider this paragraph on your first try, but you can use any number of images in your animation. Longer animation means more images. For your first animation, just use 100 images because it’s already setup for that. If you get into this and want to make longer or shorter animation loops, you’ll need to use a different number of images. That just requires editing this file: res/drawable/bg_anim.XML. Open it and the edits will be obvious. If you add more jpg image files into your folder and do not also list them here, they will be ignored.

4. Resize images to be 116 width by 200 height jpg format, and rename images anim#

This is the step that can take some time. You’ll do this in a batch. The names are such that the first image will be named anim0 and the last image will be named anim99.
I use FastStone Photo Resizer for this. Create a folder and name it drawable-hdpi. You have your chosenimages folder with your chosen 100 images in it. They need to end up being 116 X 200 px in size. Your aspect ratio won’t be correct at this point, so you will need to crop as well as resize. Do whatever it takes to get your images to 116 X 200. You’ll have to play around a bit with the resize and crop and canvas settings based on your specific image set. It can take a few extra steps to get from your chosen images to the properly named and sized drawable-hdpi folder images you’ll be using in final form.

In the process, rename images to anim# and start at “0”. Make sure they are jpg not png format.

This step is done when your 100 images are resized and properly named, in your drawable-hdpi working folder.

5. Decompile animationtemplate.apk.

6. Drop those 100 images into the decompiled drawable-hdpi folder in apktool directory

7. Edit strings.xml for your new theme name and author

Inside res/values/strings.xml make two edits:
Code:
    <string name="theme_name">[COLOR="Red"]YourAnimationTitle[/COLOR]</string>
    <string name="theme_author">[COLOR="red"]YourName[/COLOR]</string>

8. Edit AndroidManifest.XML package name

Make one edit:
Code:
package="venom.background.anim.[COLOR="red"]newanimationnamehere[/COLOR]">

9. Build and Sign the apk

10. Rename the apk to the name of your animation

11. Test it!

Install on your phone as a normal app, then apply through Venom Tweaks. Don't share things until you've tested.

12. Create an animated gif preview for you own records and for sharing on XDA

Screen record like 5-10 seconds of the pulldown with the animation running. Use a built-in screen record or “Rec.” on the Market.

Upload the screen record video file directly to https://imgflip.com/gifgenerator and choose start and end points, and a small size for the gif output. You can also put text onto the image so you can include the name of your animation. For sharing on xda, upload that animated gif somewhere. I use http://imgur.com/
.
13. Share it!

Be sure to include the following three things in your post: One jpg image from your hdpi folder as a static preview, your apk file, and the animated gif preview. Share it on the Official ViperOne Theme thread, where they invite user contributions and can upload the good ones to Venom Hub for everyone to enjoy.


I hope to see some nice stuff get shared from your creative minds! :good:
 
Last edited:

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA
::thinking about making an animation of crickets::

I challenge ViperOne ROM users to make a custom animation. Surely there's a 5-7 second video you want to transform to use as your notification panel background... you can do this. I'd love to see some sweet creations on here.

:good:

I made up a Valiant Comics animation for @lorddunlow that is shared up here if anyone wants to check it out. I like how it came out.
 
Last edited:

lorddunlow

Senior Member
Mar 17, 2011
186
61
::thinking about making an animation of crickets::

I challenge ViperOne ROM people to make a custom animation. Surely there's a 5-7 second video you want to transform to use as your notification panel background... you can do this. I'd love to see some sweet creations on here.

:good:

I made up a Valiant Comics animation for @lorddunlow that is shared up here if anyone wants to check it out. I like how it came out.

I love how it came out! Thanks so much for putting it together for me!

Sent from my HTC6525LVW using Tapatalk
 

dannejanne

Senior Member
Mar 23, 2011
2,430
856
Norrköping, Sweden
OMG I'm dreaming of a bokeh kind of background for the notification drawer with very very light colors to suit my self modded notification pulldown.

Kind of like in this video but even lighter: DIY: Bokeh Light background effect: http://youtu.be/VEAuO4ZQSVE

What can I say. I'm a sucker for lightness!

jehu5e6u.jpg


Sent from my HTC One M8
 

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA
OMG I'm dreaming of a bokeh kind of background for the notification drawer with very very light colors to suit my self modded notification pulldown.

Kind of like in this video but even lighter: DIY: Bokeh Light background effect: http://youtu.be/VEAuO4ZQSVE

What can I say. I'm a sucker for lightness!

Sent from my HTC One M8

Hi. Not sure what you're saying (or asking?). That video is over 4 minutes long. If you want to make an animation you'll need to start by choosing what 5-7 seconds you want to extract to create an animation loop, then follow the steps in the OP to transform it according to what you want it to look like.
 

Top Liked Posts

  • There are no posts matching your filters.
  • 14
    How-to make your own custom animated backgrounds from slices cropped from video ...
    So your end results are things like these:


    XV8S8Dw.gif
    K1DkXw0.gif
    3z9UL4h.gif

    Or like turning this (left) into this (right)
    W106sc7.jpg
    pFivlBH.gif



    Also, my flashables to apply in VenomTweaks are all here.
    This tutorial uses the ViperOne M8 ROM but the process described here for turning a video into a folder of images for animation is universal.

    This tutorial is made for the users of ViperOne ROM because Team Venom has a pretty awesome built-in theme engine that everybody should be using and enjoying. Here is one way you can do that! The overall process is universal for anything you want to do involving video to custom animation (i.e. boot animations), but I made this tutorial for ViperOne ROM users. "Giving back" because I love that ROM too. I am not a Team Venom member, just a satisfied user.

    One Key Prerequisite – You need to already be set up to decompile and build (recompile) apk files and make a few specific, simple edits to XML files. There are many guides about this and several options. In this tutorial I will use APKTOOL and VIRTUOUS TEN STUDIO. If you cannot decompile and recompile an app then this guide is not YET for you. Figure that out first, then come back! ;) It's good to know how to do this for a TON of reasons if you're just getting started with Android and wanting to learn some more. Search "how to decompile" or "how to use apktool" and pick a guide. I am not offering to help with that part. Come back here when you're set up though. ;)

    I also made a Video Walk-through for this tutorial:
    http://vimeo.com/erikalin/animated

    Have these things (all free & good):
    1. Computer setup for decompiling and recompiling apk files (i.e. apktool)
    2. Something for editing XML files (i.e. Virtuous Ten Studio)
    3. Something to batch rename and resize images (i.e. FastStone Photo Resizer)
    4. Something to extract zip files (i.e. 7-zip or Winrar)
    5. A short animation or video or loop to work with.
    6. Download animationtemplate.apk here: http://www.androidfilehost.com/?fid=23501681358537298

    Overall Directions:
    1. Find or create a short video about 5 seconds in length.
    2. Turn that video into a series of jpeg image files.
    3. Choose 100 images for the animation.
    4. Resize images to be 116 width by 200 height jpeg format, and rename images anim#
    5. Decompile animationtemplate.apk.
    6. Drop those 100 images into the decompiled drawable-hdpi folder
    7. Edit strings.xml for correct theme name and author
    8. Edit AndroidManifest.XML package name
    9. Build and sign the apk
    10. Rename the apk to the name of your animation
    11. Test it!
    12. Create an animated gif preview for you own records and for sharing on XDA
    13. Share it!


    Detailed Directions (see video demo also)
    1. Find or create a short video about 5 seconds in length.

    Be sure to download only what is legally offered for free and public use by the party authorized to give such rights. It's fun to grab a quick video of a kid or pet if you have any. If you find such a thing on youtube, a safe download site to use is this: http://www.clipconverter.cc/ . You're going to have to resize and crop out a vertical slide (the aspect ratio of your phone's display), so keep that in mind. You can accomplish the ratio by adding canvas to the top of bottom as well. I often end up "zooming in" on a piece of the video by cropping the images. Trial and error.

    2. Turn that video into a series of jpeg image files.

    You can do that here: http://image.online-convert.com/convert-to-jpg
    You’ll get a zip file from that conversion. Extract it. Name the extracted folder rawimages.

    3. Choose 100 images for the animation.

    Create a new folder and name it chosenimages. It doesn’t matter how many jpeg files are in that rawimages folder right now, you need to narrow it down to 100 for your animation. If your video was a good resolution, you can take skip every other jpg file and they’ll still work for your animation at this resolution. Just narrow it down to 100, however you want. Remember that the animation is a loop, so try to “end” the animation in a way that naturally looks good when it starts back at the beginning. When you’re done you have the 100 images you want to use in your chosenimages folder.
    Optional info: Don’t consider this paragraph on your first try, but you can use any number of images in your animation. Longer animation means more images. For your first animation, just use 100 images because it’s already setup for that. If you get into this and want to make longer or shorter animation loops, you’ll need to use a different number of images. That just requires editing this file: res/drawable/bg_anim.XML. Open it and the edits will be obvious. If you add more jpg image files into your folder and do not also list them here, they will be ignored.

    4. Resize images to be 116 width by 200 height jpg format, and rename images anim#

    This is the step that can take some time. You’ll do this in a batch. The names are such that the first image will be named anim0 and the last image will be named anim99.
    I use FastStone Photo Resizer for this. Create a folder and name it drawable-hdpi. You have your chosenimages folder with your chosen 100 images in it. They need to end up being 116 X 200 px in size. Your aspect ratio won’t be correct at this point, so you will need to crop as well as resize. Do whatever it takes to get your images to 116 X 200. You’ll have to play around a bit with the resize and crop and canvas settings based on your specific image set. It can take a few extra steps to get from your chosen images to the properly named and sized drawable-hdpi folder images you’ll be using in final form.

    In the process, rename images to anim# and start at “0”. Make sure they are jpg not png format.

    This step is done when your 100 images are resized and properly named, in your drawable-hdpi working folder.

    5. Decompile animationtemplate.apk.

    6. Drop those 100 images into the decompiled drawable-hdpi folder in apktool directory

    7. Edit strings.xml for your new theme name and author

    Inside res/values/strings.xml make two edits:
    Code:
        <string name="theme_name">[COLOR="Red"]YourAnimationTitle[/COLOR]</string>
        <string name="theme_author">[COLOR="red"]YourName[/COLOR]</string>

    8. Edit AndroidManifest.XML package name

    Make one edit:
    Code:
    package="venom.background.anim.[COLOR="red"]newanimationnamehere[/COLOR]">

    9. Build and Sign the apk

    10. Rename the apk to the name of your animation

    11. Test it!

    Install on your phone as a normal app, then apply through Venom Tweaks. Don't share things until you've tested.

    12. Create an animated gif preview for you own records and for sharing on XDA

    Screen record like 5-10 seconds of the pulldown with the animation running. Use a built-in screen record or “Rec.” on the Market.

    Upload the screen record video file directly to https://imgflip.com/gifgenerator and choose start and end points, and a small size for the gif output. You can also put text onto the image so you can include the name of your animation. For sharing on xda, upload that animated gif somewhere. I use http://imgur.com/
    .
    13. Share it!

    Be sure to include the following three things in your post: One jpg image from your hdpi folder as a static preview, your apk file, and the animated gif preview. Share it on the Official ViperOne Theme thread, where they invite user contributions and can upload the good ones to Venom Hub for everyone to enjoy.


    I hope to see some nice stuff get shared from your creative minds! :good:
    2
    ::thinking about making an animation of crickets::

    I challenge ViperOne ROM users to make a custom animation. Surely there's a 5-7 second video you want to transform to use as your notification panel background... you can do this. I'd love to see some sweet creations on here.

    :good:

    I made up a Valiant Comics animation for @lorddunlow that is shared up here if anyone wants to check it out. I like how it came out.
    1
    Your a beast ..thanks for the tut !!!!

    Sent from my HTC One_M8 using XDA Premium 4 mobile app