FORUMS

[MOD][TUT] Animated HOME Softkey In Nav Bar

6,741 posts
Thanks Meter: 8,623
 
By Ticklefish, Recognized Themer on 13th July 2018, 01:58 PM
Post Reply Email Thread
This thread made the Portal! Woo!
https://www.xda-developers.com/anima...utton-android/

(Thanks To @Tulsadiver for the above image)

Want an animated HOME softkey in your navbar? Of course you do!

This is a relatively simple mod, which should work on any rom and any version of Android. Android P, with its gesture control navbar setup, is a different matter but I'll deal with that another time.

Follow the simple steps below to find out how to do this mod. Any problems, just let me know!

Step 1 - Decompile Your "SystemUI.apk"
The first thing you need to do is, as it says above, is to decompile your deodexed SystemUI.apk. I'm not going to tell you how to do that here, because there are already a lot of tutorials and guides for that on xda. There's also a lot of decompiling tools you can use. I personally recommend using Tickle My Android(https://forum.xda-developers.com/sho....php?t=1633333). It's fast, user-friendly, makes flashable ZIP's and rumour has it that the developer is devastatingly handsome..
If your rom isn't deodexed, this rom won't work. You have to deodex it first. By a strange coincidence, Tickle My Android can deodex roms too. What a clever developer they must be!
Once you've done this, move onto Step 2!


Step 2 - Add The Smali Files
Now we need to add the new smali files for this. However these aren't my files, somebody else made them so you'll need to get them from the attachment at the bottom of this post here: https://forum.xda-developers.com/and...views-t3174519
This code was written by @Morningstar and I can't take any credit for it. So you'll need to make sure you press the "Thanks" button at the bottom of his post. If you don't. this mod won't work!!
Extract the "SelfAnimatingImageView.smali" file from the ZIP and add it to your decompiled APK at "SystemUI.apk\smali\com\android\morningstar\". You'll need to make those folders if they're not there already.


Step 3 - Add The Image Files
In the second post in this thread, you'll find a few animations that I've put together for you to download. Just download the ZIP and add the PNG image files to the appropriate "drawable-?dpi" folder. Which folder you need to put them into depends on your particular phone.
If you don't like any of the animations on offer, you can make your own. All I've done is use Google Image Search to find some fun GIF's and online tools like EZGIF (https://ezgif.com/split) to turn the GIF into a collection of individual images.
Of course, you could always make your own images if you wanted..but I don't have the artistic ability for that!
If you are using your own animation, make sure you add the "transparent.png" file to your "drawable-?dpi" folder anyway. You'll need it in Step 5..


Step 4 - Edit The Drawable XML File
In the previous step, you put a collection of images into your decompiled APK to serve as your animation. Now you need an XML file that tells Android which files to use for your animation, as well as how quickly to cycle through them.
For this, go back to the ZIP you downloaded and copy the "frame_anim.xml" to your "res\drawable" folder. If you're using your own PNG files, you can still use this file or make your own.
The "frame_anim.xml" looks something like this:
Code:
<?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 "item" line represents a different image. The "android:drawable" bit contains the name of the image being displayed the "android:duration" bit says how many milliseconds it's on display for."
If you're using your own animation, just add/delete/edit these lines as you need.
Don't forget to save when you're done!


Step 5 - Edit The Layout XML
We're nearly there, I promise! Just this one step left to do and we can start recompiling. This is the tricky one though - this is the part where we actually put our animation into the navbar, replacing the image for the HOME softkey.
What makes this extra difficult is that Google keep changing where the code we need to change is. In most roms, you'll find the code that controls the HOME softkey in "layout\navigation_bar.xml". In some modern roms, it might actually be in "layout\home.xml"!
So you'll need to do some detective work. You need to find which layout XML file contains a line that looks like this:
Code:
<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" />
Let me rearrange that to make it a bit easier to read..
Code:
<com.android.systemui.statusbar.policy.KeyButtonView
    android:layout_gravity="center"
	android:id="@id/home_button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:scaleType="center"
	android:contentDescription="@string/accessibility_home"
	systemui:keyCode="3" />
See those references to "home" and that bit about "systemui:keyCode="3""? This is the line of code that displays the HOME softkey. Your code might not look exactly like that but it'll be close.
We can't make this display an animation, Android just isn't set up for it. So what we actually need to do is hide this HOME softkey, put a new one in the same place that's the same size but invisble, then put our animation underneath that. Sounds complicated, but 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.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>
Take a moment to look at that above code. You can see how three different things are piled on top of each other. When the app is running, you won't see that. All you'll see is your animated image where your HOME softkey is. Neat, no?
(For more about FrameLayouts and other XML tricks, you could do worse than check out my short guide here: https://forum.xda-developers.com/gen...-easy-t2929816)
So just replace your HOME softkey line of code with the code above. You may need to make some changes for your particular setup. Every rom is different.
Save and move onto the next step.


Step 6 - Recompile The Modded APK
This is it - the last stage. All you need to do now is recompile your SystemUI.apk file and put it back to your phone.
I recommend doing this in recovery as you'll need to wipe the Dalvik cache, otherwise the new smali won't be active.
I also recommend doing it in recovery because I always recommend DOING A BACKUP FIRST!!


Once you've done the above steps, you should now have an animated HOME softkey in your navbar. But, if you have any problems, just let me know and I'll see what I can do to help.
The Following 24 Users Say Thank You to Ticklefish For This Useful Post: [ View ] Gift Ticklefish Ad-Free
13th July 2018, 01:59 PM |#2  
These are some of the animations that I've put together for this mod. If you like them, just download the appropriate ZIP file from the attachments and add them to your decompiled APK as I mentioned in the previous post.

If you don't like them, let me know what you would like and I'll see what I can do for you.

If you've made your own animation and you think others might enjoy it, let me know and I'll be more than happy to add it to this collection. Crediting you, of course.

If this mod proves popular, I'll see what other animations I can come up with. There aren't many right now and I hadn't really realised just how many of them are of Disney's Stitch...

BATMAN ICON -

- PIKACHU

MOVING TRIANGLE -

- UK FLAG (found at http://www.3dflagsplus.com/)

USA FLAG (found at http://www.3dflagsplus.com/) -

- INDIA FLAG (found at http://www.3dflagsplus.com/)

TABBY CAT -

- BLACK CAT

RYU (from Street Fighter) -

- STITCH EATING

STITCH WEARING A..ER..'HAT' -

- STITCH HULA DANCING

Enjoy!
Attached Files
File Type: zip blackcat.zip - [Click for QR Code] (3.1 KB, 202 views)
File Type: zip ryu.zip - [Click for QR Code] (150.7 KB, 138 views)
File Type: zip stitch_eating.zip - [Click for QR Code] (39.9 KB, 54 views)
File Type: zip stitch_hat.zip - [Click for QR Code] (55.6 KB, 48 views)
File Type: zip stitch_hula.zip - [Click for QR Code] (34.4 KB, 72 views)
File Type: zip tabby.zip - [Click for QR Code] (3.2 KB, 136 views)
File Type: zip india.zip - [Click for QR Code] (211.8 KB, 82 views)
File Type: zip unitedkingdom.zip - [Click for QR Code] (258.9 KB, 58 views)
File Type: zip unitedstates.zip - [Click for QR Code] (227.2 KB, 46 views)
File Type: zip batman_icon.zip - [Click for QR Code] (69.7 KB, 88 views)
File Type: zip endless_triangle.zip - [Click for QR Code] (25.6 KB, 48 views)
File Type: zip pikachu.zip - [Click for QR Code] (3.7 KB, 82 views)
The Following 18 Users Say Thank You to Ticklefish For This Useful Post: [ View ] Gift Ticklefish Ad-Free
13th July 2018, 04:03 PM |#3  
haifish9999's Avatar
Senior Member
Flag Ha Noi
Thanks Meter: 2,352
 
Donate to Me
More
Congrats mate. . Great job as always....

Sent from my SM-G955F using Tapatalk
The Following User Says Thank You to haifish9999 For This Useful Post: [ View ] Gift haifish9999 Ad-Free
14th July 2018, 05:41 AM |#6  
Senior Member
Thanks Meter: 22
 
More
Is it possible to have oreo's animated home button in stock nougat rom?
The Following User Says Thank You to mlleemiles For This Useful Post: [ View ] Gift mlleemiles Ad-Free
14th July 2018, 09:33 AM |#7  
I've added a few flag icons for people to try. There's a website that has loads of these, for lots of different countries. Definitely worth a look!

Quote:
Originally Posted by mlleemiles

Is it possible to have oreo's animated home button in stock nougat rom?

In theory, yes. We could use this mod and adjust the smali so the animation only runs when the home button is touched. That's a little beyond me, I'm more of a XML modder, but it's certainly a possibility.
Or we could take the relevant files from an Oreo rom and place them in your Nougat one. It'll involve a bit of work adjusting those files but, again, it's theoretically possible.
The Following User Says Thank You to Ticklefish For This Useful Post: [ View ] Gift Ticklefish Ad-Free
14th July 2018, 11:16 AM |#8  
whalesplaho's Avatar
Senior Member
Flag Treasure Island
Thanks Meter: 2,669
 
More
Amazing mod buddy..... Any idea on how to add menu key? I did add but doesnt get themed when nav bar is themed.
The Following User Says Thank You to whalesplaho For This Useful Post: [ View ] Gift whalesplaho Ad-Free
14th July 2018, 10:18 PM |#9  
Quote:
Originally Posted by whalesplaho

Amazing mod buddy..... Any idea on how to add menu key? I did add but doesnt get themed when nav bar is themed.

You can manually add the menu key by adding a line with the relevant keyCode. @Rajeev did a very nice tutorial about doing this sort of thing a few years ago for the original Xperia Z.
But it's pretty unlikely that it'll be themed. Google have been moving away from the menu softkey since ICS. Apps are supposed to have a settings button in the Action Bar at the top of the screen now, or in a hamburger menu. The menu softkey doesn't really officially exist anymore.
If you've got a theme that has a resource in it for replacing the menu icon and it doesn't work, you'll need to speak to whoever created the theme to see if they have any ideas.
The Following User Says Thank You to Ticklefish For This Useful Post: [ View ] Gift Ticklefish Ad-Free
15th July 2018, 05:32 PM |#10  
Senior Member
Thanks Meter: 22
 
More
Quote:
Originally Posted by Ticklefish

I've added a few flag icons for people to try. There's a website that has loads of these, for lots of different countries. Definitely worth a look!



In theory, yes. We could use this mod and adjust the smali so the animation only runs when the home button is touched. That's a little beyond me, I'm more of a XML modder, but it's certainly a possibility.
Or we could take the relevant files from an Oreo rom and place them in your Nougat one. It'll involve a bit of work adjusting those files but, again, it's theoretically possible.

I tried, without success, which made me start a post in Z5 Compact forum: https://forum.xda-developers.com/z5-...mpact-t3699417

Sadly no one is there to help..
17th July 2018, 06:00 AM |#11  
Senior Member
Thanks Meter: 50
 
More
Quote:
Originally Posted by Ticklefish

You can manually add the menu key by adding a line with the relevant keyCode. @Rajeev did a very nice tutorial about doing this sort of thing a few years ago for the original Xperia Z.
But it's pretty unlikely that it'll be themed. Google have been moving away from the menu softkey since ICS. Apps are supposed to have a settings button in the Action Bar at the top of the screen now, or in a hamburger menu. The menu softkey doesn't really officially exist anymore.
If you've got a theme that has a resource in it for replacing the menu icon and it doesn't work, you'll need to speak to whoever created the theme to see if they have any ideas.

Is this animation affect battery Life????
Post Reply Subscribe to Thread

Tags
animated, home, navbar, softkey, stitch

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes