Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,730,714 Members 41,056 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
erikalin
Old
(Last edited by erikalin; 16th July 2014 at 09:07 PM.)
#1  
erikalin's Avatar
Recognized Contributor - OP
Thanks Meter 2182
Posts: 810
Join Date: Sep 2012
Location: Boston - Southern NH ish
Default [THEME][HOW TO]Animated Backgrounds From Video - ViperOne ROM demo

How-to make your own custom animated backgrounds from slices cropped from video ...
So your end results are things like these:



Or like turning this (left) into this (right)



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):
Quote:
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:
Quote:
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">YourAnimationTitle</string>
    <string name="theme_author">YourName</string>

8. Edit AndroidManifest.XML package name
 

Make one edit:
Code:
package="venom.background.anim.newanimationnamehere">

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!
Are you about to ask a question? Hold up. Before you do that, did you check HERE?
NEW! The Box - my latest app...Seriously, at least check out the nice video promo.
The Following 14 Users Say Thank You to erikalin For This Useful Post: [ Click to Expand ]
 
erikalin
Old
#2  
erikalin's Avatar
Recognized Contributor - OP
Thanks Meter 2182
Posts: 810
Join Date: Sep 2012
Location: Boston - Southern NH ish
Reserved just one, in case I make a related tutorial.
Are you about to ask a question? Hold up. Before you do that, did you check HERE?
NEW! The Box - my latest app...Seriously, at least check out the nice video promo.
 
Galaxysm
Old
#3  
Galaxysm's Avatar
Senior Member
Thanks Meter 554
Posts: 3,014
Join Date: Sep 2012
Location: Mission
Just a question can I use my .gif?

Sent from my HTC One_M8 using Tapatalk
Current Device:Nexus 5 Rooted-SlimKat ROM.
Current Device:HTC One M8.(T-Mobile) Rooted/S-Off Viper ROM.
History Of Phones...
Galaxy Note 2 (T-Mobile) Rooted.
Galaxy S2 (T-Mobile) Rooted.
ZTE Warp (Boost Mobile)-Rooted.
Htc Inspire(AT&T)-Rooted/S-Off.
Optimus Elite(Virgin Mobile)-Rooted.
Htc Amaze 4G(T-Mobile)-Rooted.-SOLD.
Tablet: Nexus 7 (2013) model 32GB.
 
erikalin
Old
#4  
erikalin's Avatar
Recognized Contributor - OP
Thanks Meter 2182
Posts: 810
Join Date: Sep 2012
Location: Boston - Southern NH ish
Quote:
Originally Posted by Galaxysm View Post
Just a question can I use my .gif?

Sent from my HTC One_M8 using Tapatalk
What gif? Do you mean can you use any gif? You need a series of jpg files, resized and renamed for this mod, but you can use an online file converter to turn a gif into jpg files, and pick up from there. If that's what you're asking (?).
Are you about to ask a question? Hold up. Before you do that, did you check HERE?
NEW! The Box - my latest app...Seriously, at least check out the nice video promo.
 
Basil3
Old
#5  
Recognized Themer
Thanks Meter 7304
Posts: 4,536
Join Date: Apr 2008
Location: Dublin

 
DONATE TO ME
Nice work [emoji106]

Sent from something using Tapatalk
 
armyboy11b
Old
#6  
armyboy11b's Avatar
Senior Member
Thanks Meter 952
Posts: 2,501
Join Date: Feb 2012
Location: new orleans
Your a beast ..thanks for the tut !!!!

Sent from my HTC One_M8 using XDA Premium 4 mobile app
-DEVICES-
------------------------
*Galaxy note i717
Rom-black+star v3
*Nexus 7 tab (shipping)
Rom-stock
------------------------
*U.S ARMY*
PARA-T
The Following User Says Thank You to armyboy11b For This Useful Post: [ Click to Expand ]
 
erikalin
Old
#7  
erikalin's Avatar
Recognized Contributor - OP
Thanks Meter 2182
Posts: 810
Join Date: Sep 2012
Location: Boston - Southern NH ish
Quote:
Originally Posted by armyboy11b View Post
Your a beast ..thanks for the tut !!!!

Sent from my HTC One_M8 using XDA Premium 4 mobile app
If you have some time, make something from it!
Are you about to ask a question? Hold up. Before you do that, did you check HERE?
NEW! The Box - my latest app...Seriously, at least check out the nice video promo.
 
erikalin
Old
(Last edited by erikalin; 16th July 2014 at 08:55 PM.)
#8  
erikalin's Avatar
Recognized Contributor - OP
Thanks Meter 2182
Posts: 810
Join Date: Sep 2012
Location: Boston - Southern NH ish
::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.



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.
Are you about to ask a question? Hold up. Before you do that, did you check HERE?
NEW! The Box - my latest app...Seriously, at least check out the nice video promo.
The Following 2 Users Say Thank You to erikalin For This Useful Post: [ Click to Expand ]
 
lorddunlow
Old
#9  
lorddunlow's Avatar
Senior Member
Thanks Meter 35
Posts: 122
Join Date: Mar 2011
Quote:
Originally Posted by erikalin View Post
::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.



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
Old
#10  
Senior Member
Thanks Meter 342
Posts: 1,317
Join Date: Mar 2011
Location: Írebro, 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!



Sent from my HTC One M8

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


XDA PORTAL POSTS

Blast Those Flags with Knock the Flags

Lately, we have seen a rather drastic shift in the world of mobile device gaming. The infamous Angry … more

Hide Numbers on Your SMS and Call Logs with Reflection

How many times have you given your device to someone else in order to show them a … more

Implement Split View in Your LG G2 KitKat Rom with Automated Installer

Some of you may have remembered a story on the Portal a few weeks back … more

Cast Your Device Screen the Way it Was Meant to be with Second Screen

Not too long ago here on the XDA Portal, we covered how Google had made … more