Github Tutorial App Shows You How to Use… Github

Github can get pretty complicated and using it can become quite daunting, especially … more

Google Glass-like Clip-On For Regular Glasses Developed by Sony

For the price of $2,000, a pair of glasses that can run apps, take pictures, … more

Micromax Takes OnePlus to Court! Android Wear Receives Lollipop – XDA TV

Android 5.0 Lollipop is available officially for the Moto 360! … more

Google Invites Selected Devs to Buy Project Tango Development Kit

Just about a month ago, the curious Project Tango development kit was … more

Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

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

OP erikalin

23rd May 2014, 03:59 PM   |  #1  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,680
 
966 posts
Join Date:Joined: Sep 2012
Donate to Me
More
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!
Last edited by erikalin; 16th July 2014 at 10:07 PM.
The Following 14 Users Say Thank You to erikalin For This Useful Post: [ View ]
23rd May 2014, 03:59 PM   |  #2  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,680
 
966 posts
Join Date:Joined: Sep 2012
Donate to Me
More
Reserved just one, in case I make a related tutorial.
23rd May 2014, 04:58 PM   |  #3  
Galaxysm's Avatar
Senior Member
Flag Mission
Thanks Meter: 582
 
3,319 posts
Join Date:Joined: Sep 2012
More
Just a question can I use my .gif?

Sent from my HTC One_M8 using Tapatalk
23rd May 2014, 05:19 PM   |  #4  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,680
 
966 posts
Join Date:Joined: Sep 2012
Donate to Me
More
Quote:
Originally Posted by Galaxysm

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 (?).
23rd May 2014, 08:21 PM   |  #5  
Recognized Themer
Flag Dublin
Thanks Meter: 8,648
 
5,314 posts
Join Date:Joined: Apr 2008
Donate to Me
More
Nice work [emoji106]

Sent from something using Tapatalk
24th May 2014, 12:15 PM   |  #6  
armyboy11b's Avatar
Senior Member
new orleans
Thanks Meter: 955
 
2,501 posts
Join Date:Joined: Feb 2012
More
Your a beast ..thanks for the tut !!!!

Sent from my HTC One_M8 using XDA Premium 4 mobile app
The Following User Says Thank You to armyboy11b For This Useful Post: [ View ]
24th May 2014, 06:39 PM   |  #7  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,680
 
966 posts
Join Date:Joined: Sep 2012
Donate to Me
More
Quote:
Originally Posted by armyboy11b

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!
28th May 2014, 05:32 AM   |  #8  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,680
 
966 posts
Join Date:Joined: Sep 2012
Donate to Me
More
::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.
Last edited by erikalin; 16th July 2014 at 09:55 PM.
The Following 2 Users Say Thank You to erikalin For This Useful Post: [ View ]
28th May 2014, 06:21 AM   |  #9  
lorddunlow's Avatar
Senior Member
Thanks Meter: 41
 
146 posts
Join Date:Joined: Mar 2011
Quote:
Originally Posted by erikalin

::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
29th May 2014, 01:33 PM   |  #10  
Senior Member
Flag Írebro, Sweden
Thanks Meter: 405
 
1,486 posts
Join Date:Joined: Mar 2011
More
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

Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes