Custom Android Tabs
Due to limitation of Android Tab component I created a custom TabWidget that I am using in couple different projects already. The widget allows us to add custom background and use custom icons, tabs can be Top/Bottom aligned.
Currently tabs can launch new Activity and Dialog , when starting new Activity we can use “startActivityForResult” so our tab will get a notification when other activity have finished.
This is not a perfect solution as there are some drawbacks to it but it suits me well so I will stick to it till something better comes along; Hint Android gurus we need to be able to start new activities inside existing tab with more customization.
Creating a Tab
There a two thing that a tab needs
- Icon: either R.drawable.id or Drawable Object
- An Activity set via Intent or Dialog
Tab homeTab=new Tab(context, "HOME"); homeTab.setIcon(R.drawable.home); homeTab.setIconSelected(R.drawable.home_selected); homeTab.setIntent(new Intent(context, CarmeLauncher.class));
What is a TabHost ?
TabHost host tabs and specify how they will be rendered , TabViewConfig is used to configure the TabHost
TabHost tabHost=new TabHost( new TabViewConfig() .context(context) .headerResourceId(R.drawable.tab_background_55) .separatorId(R.drawable.separator) .orientation(TabHost.Orientation.BOTTOM) );
I use fluent interfaces or as some call it Builder pattern for configuring TabHost I think its straight forward and intuitive.
Binding tabs to Activity
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //Our Tab provider TabHostProvider tabProvider=new CarmeTabProvider(this); TabHost tabHost=tabProvider.getTabHost("main"); //This is the content of the tab tabHost.setCurrentView(R.layout.main); setContentView(tabHost.render()); }
To make tab selected we need to retrieve it using tab assigned TAG name in this case “HOME” before setContentView(tabHost.render()) is called.
Tab home=tabHost.getTab("HOME"); home.setSelected(true); setContentView(tabHost.render());
March 9th, 2009 at 8:47 am
Cool! Is the source code of you project available?
April 8th, 2009 at 10:16 am
Yes, I will make this a opensource project. Right now I am switching from Activity to using ActivityGroup for better performance. It will be hosted here.
May 8th, 2009 at 6:36 am
Hi, great work! Any news on the release of your project’s code?
May 8th, 2009 at 7:50 am
Hello guys,
There is still more work to do on it but it is usable it will be mostly an implementation/performance fixes.
Project is hosted on googlecode
http://code.google.com/p/androidtabs/
source will be uploaded sometimes today.
May 25th, 2009 at 2:54 am
Hello
Thanks for sharing code. but while running i had faced lot of problems.
i have added all resources and done respective changes,now program is running.
but its not showing any tab.
please help me.
Thanks
Makrand
July 14th, 2009 at 3:49 pm
Hi, Greg, I really like how your tab design looks! Great job.
I also looked up the code on google code but couldnt find it. Any chance you can share it with me? Regards Christian
September 3rd, 2009 at 10:37 am
Hey Greg,
I would also be very glad if you could (re-)publish your code since I’m really interested
in the custom Tabs…
Rgds
Coyle L. McGuire
September 9th, 2009 at 9:11 am
Hey Greg,
Your code looks great! Could you possibly do an export of a working project that uses your code and make it available for download on your google code site?
Thanks for all your work! This looks very promising!
September 10th, 2009 at 8:35 am
Yes, I should do that this weekend. But if you like here is a link to a working demo project
September 11th, 2009 at 10:22 am
No you should not have to, can you post what SKD you using and a stack trace from your Logcat. Also are you running the demo project TabWidgetDemo?
Email me gregbugaj @@@ yahoo … com or post here if you have any specific questions?
September 17th, 2009 at 4:08 pm
Hey,
I have this problem when running the code for first time:
09-17 23:09:33.552: ERROR/AndroidRuntime(781): Caused by: java.lang.NullPointerException
09-17 23:09:33.552: ERROR/AndroidRuntime(781): at com.gregbugaj.tabwidget.TabWidgedLauncher.onCreate(TabWidgedLauncher.java:54)
09-17 23:09:33.552: ERROR/AndroidRuntime(781): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1123)
09-17 23:09:33.552: ERROR/AndroidRuntime(781): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2364)
And line 54 is: Tab home=tabHost.getTab(”HOME”);
Can anyone help me?
September 18th, 2009 at 8:49 am
Make sure that you defined
homeTab = new Tab(context, "HOME");
homeTab.setIcon(R.drawable.home);
//t1.setIconSelected(R.drawable.home_selected);
homeTab.setIntent(new Intent(context, TabWidgetDemoLauncher.class));
tabHost.addTab(homeTab);
Also here is a complete Demo project http://www.gregbugaj.com/?p=117
September 19th, 2009 at 11:29 am
Hi,
I’m trying to run your TabWidgetDemo in v1.6 of the SDK. Getting the following:
D/AndroidRuntime( 824): Shutting down VM
W/dalvikvm( 824): threadid=3: thread exiting with uncaught exception (group=0×4001aa28)
E/AndroidRuntime( 824): Uncaught handler: thread main exiting due to uncaught exception
E/AndroidRuntime( 824): java.lang.VerifyError: com.gregbugaj.tabwidgetdemo.TabWidgetDemoLauncher
E/AndroidRuntime( 824): at java.lang.Class.newInstanceImpl(Native Method)
E/AndroidRuntime( 824): at java.lang.Class.newInstance(Class.java:1472)
E/AndroidRuntime( 824): at android.app.Instrumentation.newActivity(Instrumentation.java:1097)
E/AndroidRuntime( 824): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2316)
E/AndroidRuntime( 824): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2417)
E/AndroidRuntime( 824): at android.app.ActivityThread.access$2100(ActivityThread.java:116)
E/AndroidRuntime( 824): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1794)
E/AndroidRuntime( 824): at android.os.Handler.dispatchMessage(Handler.java:99)
E/AndroidRuntime( 824): at android.os.Looper.loop(Looper.java:123)
E/AndroidRuntime( 824): at android.app.ActivityThread.main(ActivityThread.java:4203)
E/AndroidRuntime( 824): at java.lang.reflect.Method.invokeNative(NativeMethod)
E/AndroidRuntime( 824): at java.lang.reflect.Method.invoke(Method.java:521)
E/AndroidRuntime( 824): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:791)
E/AndroidRuntime( 824): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:549)
E/AndroidRuntime( 824): at dalvik.system.NativeStart.main(Native Method)
November 5th, 2009 at 4:15 pm
same as Derek
November 5th, 2009 at 4:26 pm
I have the sae with 1.5 :/
November 5th, 2009 at 7:03 pm
I will take a look at it this weekend
January 18th, 2010 at 2:34 pm
Hello,
I’m really trying to get this to work but I’m having some problems. Originally after finally getting the two projects imported together and what I thought was properly defining the tabs like mentioned above, I tried it on my phone and got a force close error. When looking at the log it said the same error as Wouter Goossens’s posted above. I’m not sure what I’m doing wrong as I got that error after defining homeTab etc etc.
I would really like to get this to work but am not sure what exactly am I doing wrong. I’ve followed every instruction I’ve found and still nothing. Is there a more precise step-by-step guide? or any other tips?
January 19th, 2010 at 8:46 pm
Hello! Is there any way to get the PSD files for those icons included in the project? Thanks! Please email them!
January 19th, 2010 at 11:29 pm
I don’t think that I have the psd for this files, I have found them on one of the icon websites.
February 2nd, 2010 at 5:13 pm
Hi I’m trying to make my own custom tabwidget but its not working. I downloaded the code and run it but when try to make it work in my application it doesn’t work at all. It breaks on TabViewConfig and such. I’m getting errors telling me that they can’t be resolved. Am I missing a reference or something this is very strange
February 3rd, 2010 at 10:37 am
I see people running into some problems with setting up the widget, so I have decided to make a screen cast asap.
February 7th, 2010 at 4:30 pm
Hi, I cannot find the actual tabwidget library with the demo. Is it published elsewhere?
February 7th, 2010 at 4:38 pm
Nevermind, I found it!
It is under http://code.google.com/p/androidtabs/source/checkout
For anyone looking for the code under ‘downloads’, click the ’source’ tab.
March 19th, 2010 at 8:40 am
Hi Greg,
I tried to implement this code using the demo you supplied and I get the same error as everyone else. A screencast would be fantastic. I recommend using Jing for your screencast. Its quick, simple, and free. I use it for documentation all the time. I think your component sounds like just what I need, I just need to see if I happen to be missing anything.
1. I imported both projects
2. added the TabWidgedLauncher as a required project on the build path
3. Corrected the project name in the TabWidgedLauncher .project file.
I had to remove some overrides the compiler was complaining about but after that, it compiled but fails with the same error everyone else has.
Please help!!!!
Thanks in advance
May 17th, 2010 at 3:17 pm
Same exception here…frustrating.
May 30th, 2010 at 4:25 pm
Hi Greg,
I wanted to start by saying you have done great job with those tabs.
I’m just starting with java and android so doing something like this is beyond my abilities.
I want to use your tabwidget solution in my app I’m writing and I was wondering if it is possible for me to use. I wouldent fill right using it without asking first.
May 31st, 2010 at 10:46 pm
Thank you for you comment, also you can use in any project you like.
June 7th, 2010 at 11:47 am
I’ve just found a solution, that allows the same, with androids native tabhost, going to post an “tutorial” soon
here is a Preview: http://images.sourceway.eu/android/betterTabs.jpg (its even possible without the Text below the icon, or just text… or whatever u want <3)
June 7th, 2010 at 12:43 pm
http://www.sourceway.eu/ <- there you can find the tutorial =D
its not nice but well, dont have a CMS or Blog setup there =D
June 8th, 2010 at 12:46 pm
here is a new link, i’ve just installed wordpress and made a nice tutorial
http://sourceway.eu/wp/2010/06/android-tutorial-1-custom-tabs/
(you may delete the post from June 7th, 2010 at 12:43 pm ^^)
June 8th, 2010 at 1:23 pm
Very nice tutorial.