Some brilliant minds in the Android community figured out how to modify your navbar to use an animated .gif as your home key, and Appuals has the guide to do it!
Image may be NSFW.
Clik here to view.
Warning: This is a fairly involved process. You need to decompile your SystemUI.apk, mess with some important files, and recompile it back together. Make a backup of your SystemUI.apk incase something goes wrong!
Related Appuals guides:
- How to Manually Theme Android System UI
- How to Decompile and Theme Android APKs
- How to Deodex Your APKs on Stock ROMs
Requirements:
- A rooted Android phone (Appuals has plenty of Android root guides!)
- An APK decompiling tool (we recommend APK Easy Tool)
- A good code editor like Notepad++
Decompiling your SystemUI.apk
The first thing you need to do is deodex your SystemUI.apk – you can use a tool like Tickle My Android for this. Read Appuals guide for deodexing APKs on this process.
The next step is to decompile the SystemUI.apk, which requires a guide by itself if you’ve never done it before – luckily, Appuals has “How to Manually Theme Android System UI” with decompiling instructions, so give that a read if you’ve never decompiled an APK before.
Adding the SMALI files
Now you need to add new smali files – there’s a pack of already modified .smali files for exactly what we need to do available HERE. Specifically, you need to extract the “SelfAnimatingImageView.smali” file from the .zip, and add it to your decompiled APK in the directory:
SystemUI.apk\smali\com\android\morningstar\
You will need to create these folders if they don’t exist.
Splitting a GIF into Frames
Now you need to find an animated .gif you like and want to use as your navbar home button. You should use a sticker gif, like you can find on Giphy.com/stickers – you’ll notice they have transparent backgrounds like a PNG, but they are in fact GIFs.
Once you save a sticker GIF you like, you need to convert it to a series of PNGs. This is because our modified SystemUI will not actually run a native .gif file, it will play PNGs in sequential order. So we need to split the .gif into sequential PNGs, luckily we can very easily do this with an online converter like EZGIF Split.
Image may be NSFW.
Clik here to view.
Simply upload your GIF to the EZGIF Split tool, choose “Output images in PNG format” from the Split Options dropdown menu, and it will extract all the frames in sequential order. Then you can download the frames together in a ZIP file.
Image may be NSFW.
Clik here to view.
Now you need to add the PNG frames from the split GIF to your appropriate “drawable-xxxDPI” folder in your decompiled SystemUI apk folder. The folder you will use depends on your device’s DPI, so:
- MDPI = ~160 DPI
- HDPI = ~240 DPI
- XHDPI = ~320 DPI
- XXHDPI = ~480 DPI
- XXXHDPI = ~640 DPI
Now we need an XML file that instructs Android which images to use for the animation, and how quickly to cycle through them. Go back to the ZIP you downloaded earlier and grab the “frame_anim.xml”, and copy it to your “res\drawable” folder inside the decompiled APK.
If you open the frame_anim.xml in Notepad++, it should look like this:
<?xml version="1.0" encoding="utf-8"?> <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:duration="100" android:drawable="@drawable/frame_0" /> <item android:duration="100" android:drawable="@drawable/frame_1" /> <item android:duration="100" android:drawable="@drawable/frame_2" /> <item android:duration="100" android:drawable="@drawable/frame_3" /> </animation-list>
Each line beginning with <item represents the frames in sequential order, so you need to add or delete the lines as necessary, depending on how many frames are in the GIF you split into individual PNGs.
And finally, before we can recompile the SystemUI.apk, we need to put our animation onto the navbar. This is a little tricky, as we’ll be editing the layout XML file. In most stock ROMs, the code that controls the HOME navbar softkey can be found in “layout\navigation_bar.xml”, but it might also be found in “layout\home.xml”. You need to hunt around for this, depending on your ROM.
Basically, you’re looking for whichever layout XML file contains the code that looks like this:
<com.android.systemui.statusbar.policy.KeyButtonView android:layout_gravity="center" android:id="@id/home_button" android:layout_width="0.0dip" android:layout_height="0.0dip" android:scaleType="center" android:contentDescription="@string/accessibility_home" systemui:keyCode="3" />
You’ll know you’re in the right XML file when you see lines that reference the home_button or similar. What we need to do is hide this HOME key, and put a new one in its place that will be the same size, but invisible, and then our animated frames will go underneath it. This is actually quite easy, all we need is a FrameLayout code.
<FrameLayout android:layout_width="@dimen/navigation_key_width" android:layout_height="fill_parent"> <com.android.systemui.statusbar.policy.KeyButtonView android:layout_gravity="center" android:layout_width="@dimen/navigation_key_width" android:layout_height="fill_parent" android:src="@drawable/transparent" android:scaleType="center" android:contentDescription="@string/accessibility_home" systemui:keyCode="3" /> <com.android.systemui.statusbar.policy.KeyButtonView android:layout_gravity="center" android:id="@id/home_button" android:layout_width="0.0dip" android:layout_height="0.0dip" android:scaleType="center" android:contentDescription="@string/accessibility_home" systemui:keyCode="3" /> <com.android.systemui.morningstar.SelfAnimatingImageView android:layout_gravity="center" android:id="@+id/frame_animation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/frame_anim" /> </FrameLayout>
If you examine this code, you’ll see how we have three different things stacked on top of each other. But when the app is running, you won’t see it – all you’ll see is your animated GIF where the HOME key should be on the navbar.
So all you need to do is replace the HOME softkey line of code with the FrameLayout code above, but you might need to tweak it for your particular ROM. A little bit of trial and error is necessary here.
Recompiling the APK and Flashing it
Now we’re ready to recompile the modded APK. Simply use the APK Easy Tool to recompile the SystemUI.apk, and flash it in recovery mode on your device. Its important to do this in recovery mode, because you need to wipe the Dalvik cache or else the new smali files we added won’t be activated.
If everything goes well, you should see your animated GIF as your new navbar home key!
The post How to use a GIF as your Android Navbar Home Key appeared first on Appuals.com.