Monday, March 19, 2012

How to add Virtual Softkeys / Navigation bar to Gingerbread.

Virtual buttons allows for the buttons (Home, Back, etc) to be incorporated in the bottom of the screen.

The Input system in Android provides special features for implementing virtual soft keys.

There are three cases:

1. If the virtual soft keys are displayed graphically on the screen, as on the Galaxy Nexus, then they are implemented by the Navigation Bar component in the System UI package.

2. If the virtual soft keys are implemented as an extended touchable region that is part of the main touch screen, as on the Nexus One, then the input system uses a virtual key map file to translate X / Y touch coordinates into Linux key codes, then uses the key layout file to translate Linux key codes into Android key codes.

3. If the virtual soft keys are implemented as capacitive buttons that are separate from the main touch screen, as on the Nexus S, then the kernel device driver or firmware is responsible for translating touches into Linux key codes which the input system then translates into Android key codes using the key layout file.

From ICS onwards, Android supports the (1) case along with (2) and (3) case. The introduction of virtual buttons does not necessarily spell the end to hardware buttons, as such devices with buttons will simply not display the digital buttons.

This article targets for the devices which are running on Gingerbread (2.3.6) without the hardware buttons. 

I Back-ported the "Virtual Soft keys / Navigation Bar from ICS (4.0.3) to Gingerbread (2.3.6) .

The animation changes of ICS have been discarded in Gingerbread and the Functionality of 'Recent Applications list ' of ICS hasn't been taken into GB.

Follow these steps to get the Virtual soft keys on Gingerbread (2.3.6).

Prerequisites : 
           a) AOSP Gingerbread code (2.3.6) -- Get it from here
           b) AOSP ICS source code    (4.0.3)    -- Get it from here 

Source File Changes:
All the source file changes are in '/frameworks/base' module.

Addition of source files : New source files have been added from ICS to GB.

     a) Copy this file from ICS to GB.  
         ICS Location : /frameworks/base/packages/systemui/src/com/android
         GB Location :  /frameworks/base/packages/systemui/src/com/android
         Note :  Ignore out all the animator related stuffs in this source file.
                     Change the package name also.

    b) Copy this file from ICS to GB.  
         ICS Location : /frameworks/base/packages/systemui/src/com/android
         GB Location :  /frameworks/base/packages/systemui/src/com/android
         Note :  Ignore out all the animator related stuffs in this source file.
                     Change the package name also.

Modification to source files

 a) core/java/android/view/ :
 b) core/java/android/view/
 c) core/java/android/view/
 d) core/java/android/view/
 e) include/ui/InputDispatcher.h
 f) packages/SystemUI/src/com/android/systemui/statusbar/
g) policy/src/com/android/internal/policy/impl/

Resource File Changes :

Addition of Resource Files : New Resource files have been added from ICS to GB
a) Copy these files from /frameworks/base/packages/SystemUI
      /res/drawable-hdpi  to

  • packages/SystemUI/res/drawable/ic_sysbar_back.png
  • packages/SystemUI/res/drawable/ic_sysbar_back_land.png
  • packages/SystemUI/res/drawable/ic_sysbar_highlight.png
  • packages/SystemUI/res/drawable/ic_sysbar_highlight_land.png
  • packages/SystemUI/res/drawable/ic_sysbar_home.png
  • packages/SystemUI/res/drawable/ic_sysbar_home_land.png
  • packages/SystemUI/res/drawable/ic_sysbar_lights_out_dot_large.png
  • Packages/SystemUI/res/drawable/ic_sysbar_lights_out_dot_small.png
  • packages/SystemUI/res/drawable/ic_sysbar_menu.png
  • packages/SystemUI/res/drawable/ic_sysbar_menu_land.png
  • packages/SystemUI/res/drawable/ic_sysbar_recent.png
  • packages/SystemUI/res/drawable/ic_sysbar_recent_land.png
b) navigation_bar.xml: Copy this file from /frameworks/base/packages/SystemUI
    /res/layout/  to

 c) attrs.xml         : Copy this file from /frameworks/base/packages/SystemUI/res/values/ to /frameworks/base/packages/SystemUI/res/values/

 Modifications to Resource Files :

a) core/res/res/values/dimens.xml
b) packages/SystemUI/res/layout/status_bar.xml
c) packages/SystemUI/res/values/dimens.xml
d) packages/SystemUI/res/values/strings.xml

Will be updating the complete patches list of the modifications soon !!!

Happy Navigating !!


  1. Nice work! Could you make a flashable zip of it because i don't know how to compile these stuff but I'd really like to try it out.

  2. how about a flashable zip........ cant understand all the programming part.....

  3. I'd like to do this too... but won't pester you for a flashable zip as I know that there won't just be a systemfile or 2 to replace that will fit every device and ROM. Would be nice to get a detailed "how to" for technically literate non-programmers though. Can you point us at some resources or guides to read that will help?

  4. Do you think it would be possible to add the soft keys wothout any interference with the current theme???

    Please, made it!!!

    Thank you.

  5. Thanks for this tuto.
    Do you think modifications can be made without source files but by searching in system/framework/ jar files, smali files and systemui.apk ?


  7. Hello, nice tut, but could you please add the details on the modifications you made to the single files? That info would really be helpfull! Thanks in advantage, have a good time!

  8. Hi

    Thanks for the awesome tutorial. Can you provide some more details on the source file modifications, though? Or can you put the modified source files online somewhere? That would be great!

    Thanks and regards

    1. Hi
      Thanks for the inputs.
      Please provide more inputs on the source file modifications required.
      Hope to get the details.

  9. It also goes on gingerbread 2.3.4? Fw. 62

  10. Nice and after update it's ready to compile?

  11. I am in need of navigation bar(having home and back button) for my gingerbread 2.3.4;Can anybody tell me what changes i need to do in source code after following above steps.

  12. Hi,

    I want to add an extra menu button in the navigation bar in 4.2.2
    Can you help me with that ?

  13. if you have a rooted phone..
    try pimp my roms navigation bar ..
    its easy to install.. hope it work for you guys too (y)
    goodluck mates.

  14. hi..Im college student, thanks for sharing :)

  15. have someone actually tried it? does it work?

  16. Thanks for your sharing,i learn a lot.In my application i want to create an action bar which as my application icon and a view control. I refered so many tutorials and samples to create action bar but all of them have a plenty of code. I have also read the ActionBarSherlock but this need minsdkversion 15 to compile the libraries. Because i am new in android therefore i need a step by step tutorial to create a simple action bar. If you know a simple and easy tutorial to create action bar using xml then please post your answer.
    create barcode image in android

  17. Please make a video tutorial im too noob haha

  18. Make an easy tutorial bro , thats way complicated :3 better if you make a thread in XDA , I will be grateful if you PM me there (raisul2010.5396@XDA) , yet Im trying what you have written here, if I succeed, your name will be highlighted in my ROM thread , thanks a lot :)