Appcelerator - How to create custom tab bar for iPhone

Hi There!
It's been a long time and I have not posted any how-to video. Well here we go. This time I'm gonna post about Appcelerator.
For those who don't know how what Appcelerator is, please check their website. Basically, Appcelerator is a Cross-platform developing tool which lets you develop for both iOS and Android platforms at the same time using Javascript. From my own experience, I must tell you that iPhone and Android have a lot different capabilities. So, you have to have if and then condition in your code all the time. If you don't, your app will definitely crash. But it's a good platform for the beginners to get started.
If you opened this page, I'm sure you know that Appecelerator doesn't let you customize tabbar.
What you can do is, you can fake a tabbar with your original tabbar hidden.
Here's an example:
In your app.js file, you could have this code in your tabgroup

Now for your custom tabs, you could create a window that will appear at very bottom of your app. Like this:

Don't forget to add tabController in tabGroup
tabGroup.add(tabController);


Now let's create custom buttons for your tabController. I recommend creating buttons in Photoshop and use them as backgroundImages.

Notice that I have an event listener. And on the click event, I have set the active tab (0) which is your homescreen. The screen which will load 'onload'.

For next button, you should have tab(1) on click event. Like this:

Make sure your tabbar is hidden like this:

So there you go. You have your own custom button in tabs and you still have your beautiful navbar.

If you have any questions/comments/requests, please leave a comment below. Hope you found this helpful :)