Hi all!
While developing Android application we needed Iphone like tab bar at the bottom of the screen, so Googled and find usefull links but having some issues.
Some of the usefull links I found were.
and so many links.
These posts are good and useful also.
But I was curious about having TabWidget and TabHost not using any other controller like some of authors have used RadioButtonGroup and Repeated Image Background.
So I searched about customizing android TabIndicator and found a solution.
The files which will be needed are as follows:
in res/drawable directory:
in res/layout directory:
Here we will see how the tab_focus.xml will look.
the remaining xml drawable will also be something like this but with little changes to show their related effects.
The tab_indicator.xml in layout folder will be as follows:
The main.xml will be same as usual layouts are defined but the TabWidget will be placed at the bottom.
so in Java side while defining TabActivity it will looks like this.
the addTab(); method will get the String id as text indicator and Drawable Id as to show the icon of the tab.
When we will compile and run the code we will se the iPhone Tabs in Android app.
We can change the color of the Tab Bar in under res/color.xml
by replacing Dark and relevent Medium color we can change the Tab look.
The app will look like this.
The best thing in this approach is we can add tabs as we add usual tab in Android.
Fully Satisfied.
The full source code is available for download HERE.
Happy Coding!
Regards.
While developing Android application we needed Iphone like tab bar at the bottom of the screen, so Googled and find usefull links but having some issues.
Some of the usefull links I found were.
and so many links.
These posts are good and useful also.
But I was curious about having TabWidget and TabHost not using any other controller like some of authors have used RadioButtonGroup and Repeated Image Background.
So I searched about customizing android TabIndicator and found a solution.
The files which will be needed are as follows:
in res/drawable directory:
- tab_selected.xml (will be used to show effect while selected)
- tab_pressed.xml (will be used to show effect while pressed)
- tab_unselected.xml (will be used to show effect while unselected)
- tab_focus.xml (will be used to show effect while focused)
- tab_indicator.xml (will be used to show effect while to sum up all the states)
in res/layout directory:
- tab_indicator.xml (Layout of the tab indicator which will include image)
- main.xml (Layout containing TabWidget and TabHost)
- mock.xml (Layout for mock Activity)
- color.xml (Color definition as resource)
- strings.xml (Strings as resource)
- dimentions.xml (Dimentions will be used to set size of components)
- styles.xml (Define Style etc.)
Here we will see how the tab_focus.xml will look.
the remaining xml drawable will also be something like this but with little changes to show their related effects.
The tab_indicator.xml in layout folder will be as follows:
The main.xml will be same as usual layouts are defined but the TabWidget will be placed at the bottom.
so in Java side while defining TabActivity it will looks like this.
the addTab(); method will get the String id as text indicator and Drawable Id as to show the icon of the tab.
When we will compile and run the code we will se the iPhone Tabs in Android app.
We can change the color of the Tab Bar in under res/color.xml
<color name="tabMedium">#4F4F4F</color>
<color name="tabDark">#3F3F3F</color>
<color name="tabDark">#3F3F3F</color>
by replacing Dark and relevent Medium color we can change the Tab look.
The app will look like this.
The best thing in this approach is we can add tabs as we add usual tab in Android.
Fully Satisfied.
The full source code is available for download HERE.
Happy Coding!
Regards.
Nice effort dear
ReplyDeleteHI!
ReplyDeletei need 5 TAB in screen. But i don't add.
Please help me,
thanks,
Hay chiataytuday!
ReplyDeleteyou can add as many tabs as you wish.
Just add another tab as you do usually.
This is one of the good post.Your blog is playing important role In Internet marketing Business.This is one of the powerful post.Android is one of the good and fastest moving mobile application.
ReplyDeleteAndroid app developers
Very nicely done. This is how tab customization should be done. Expecting to see many more UI customizations done the right way from you. Keep doing the good work...
ReplyDeleteThanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
ReplyDeleteWINDOWS PHONE 7 DEVELOPMENT| SEO tools
Hi there, awesome site. I thought the topics you posted on were very interesting.
ReplyDeleteI tried to add your RSS to my feed reader and it a few. take a look at it, hopefully I can add you and follow.
Android App Development
Thanks very much
ReplyDeleteMuhannad al hariri
can you please tell how you change the whole background of bar. As i want to use a background image for whole tab bar, so how could I?
ReplyDeleteWell I wouldn't suggest you to use image as background, as there are plenty of android devices with different screen sizes, so this may cause bad layout design at some device, However you can use any texture image, for this you have to edit the first tag of the following files.
Deletetab_selected.xml, tab_pressed.xml, tab_unselected.xml, tab_focus.xml, tab_indicator.xml
Hi Adil Soomro,
ReplyDeleteI am new to android.
I want to write app with this design.
I downloaded your code.
But unable to start.
I have download eclipse android developer tool.
I have written some easy android app.
But I don't know how to start this tabbar app and write this.
Can you tell me how can I start using this GUI ?
Best Regards,
Ko Ko
thanks for the post
ReplyDelete