Skip to main content

iPhone like Tabs in Android.

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:
  1.     tab_selected.xml    (will be used to show effect while selected)
  2.     tab_pressed.xml    (will be used to show effect while pressed)
  3.     tab_unselected.xml    (will be used to show effect while unselected)
  4.     tab_focus.xml    (will be used to show effect while focused)
  5.     tab_indicator.xml    (will be used to show effect while to sum up all the states)

in res/layout directory:
  1.     tab_indicator.xml    (Layout of the tab indicator which will include image)
  2.     main.xml    (Layout containing TabWidget and TabHost)
  3.     mock.xml    (Layout for mock Activity)
in res/values

  1. color.xml (Color definition as resource)
  2. strings.xml (Strings as resource)
  3. dimentions.xml (Dimentions will be used to set size of components)
  4. 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>

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.
Labels:

Comments

  1. Hameed17 June 2011 at 23:32

    Nice effort dear

    ReplyDelete
  2. chiataytuday20 July 2011 at 20:14

    HI!

    i need 5 TAB in screen. But i don't add.
    Please help me,

    thanks,

    ReplyDelete
  3. Adil Soomro26 July 2011 at 22:23

    Hay chiataytuday!
    you can add as many tabs as you wish.
    Just add another tab as you do usually.

    ReplyDelete
  4. Android app development19 December 2011 at 20:54

    This comment has been removed by a blog administrator.

    ReplyDelete
  5. Ganeshji Marwaha31 January 2012 at 11:26

    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...

    ReplyDelete
  6. Superbowl20127 February 2012 at 22:45

    This comment has been removed by a blog administrator.

    ReplyDelete
  7. مهند الحريري6 May 2012 at 07:26

    Thanks very much
    Muhannad al hariri

    ReplyDelete
  8. Anonymous24 September 2012 at 04:40

    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?

    ReplyDelete
    Replies
    1. Adil Soomro25 September 2012 at 04:38

      Well 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.

      tab_selected.xml, tab_pressed.xml, tab_unselected.xml, tab_focus.xml, tab_indicator.xml

      Delete
  9. Ko Ko24 January 2013 at 09:24

    Hi Adil Soomro,

    I 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

    ReplyDelete
  10. Unknown3 May 2013 at 01:49

    thanks for the post

    ReplyDelete
  11. Anonymous18 June 2013 at 00:05

    For Android you probably want to use the Action Bar Tabs:
    http://developer.android.com/design/building-blocks/tabs.html

    Also we just released PortKit: UX Metaphor Equivalents for iOS & Android

    http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/

    It has side by side comparisons of the native ui widgets and links to downloadable PSDs for designing.

    ReplyDelete
  12. Anonymous23 August 2013 at 11:39

    Is thera any way to use activity group with this layout to open new activitys within the same tab??

    Thanks

    ReplyDelete
    Replies
    1. Adil Soomro24 August 2013 at 07:02

      Well, TabActivity is no longer recommended, however you can put ActivityGroup in every tab.

      Delete
  13. Angel Sul11 December 2013 at 00:28

    You are using tab host ..It is deprecated now.. So will it cause any problem if we use it ion higher API level

    ReplyDelete
    Replies
    1. Adil Soomro11 December 2013 at 00:40

      It'll work, but its not suggestible. You should go with Fragments and ActionBar

      Delete
    2. Angel Sul11 December 2013 at 00:57

      I want to implement it with action bar only but i m not getting how to start with.. :( Can you guide me??

      I am not Stackover flow.. I pinged u in Android discussion but you are not available..

      Delete
  14. Unknown12 March 2014 at 03:04

    Nooo!!!! Don't do this!! This really annoys me. Android apps should be Android apps, not iPhone apps! Tabs should be at the top in Android!!!

    ReplyDelete
    Replies
    1. Adil Soomro12 March 2014 at 06:39

      @Mark yes! I agree, I believe in pure android, thats why I added the same in my answer to this question here: Android - iphone style tabhost. But when you work with clients and after a long hours of discussion on the UI and they still stick to the requirements ignoring the UX of platforms, then you've no options left.

      Delete
  15. Blazing29 November 2014 at 02:50

    This comment has been removed by a blog administrator.

    ReplyDelete
  16. Anonymous20 July 2015 at 18:27

    Hello Adil,

    Thanks for the wonderful tutorial,

    may i know one more thing? How can i use Action bar search with this?

    Thanks and regards,

    Wasif

    ReplyDelete

Post a Comment

Popular posts from this blog

Android Studio ListView with Speech Bubble

Hi, Android Speech Bubble example Today I'm going to discuss how to make a ListView with speech bubble same as native android message app or some other apps out there. First of all we need to discuss the making of a row layout with speech bubble. How to make Speech Bubble? Well that is the most interesting part of the development. I've already posted a blog post about how to make 9 patch image of speech bubble, you can find that post here. Android How to use 9 patch png? Here we will discuss how to use them in our application. You will copy them into your project in relevant  hdpi, ldpi, xhdpi and mdpi folders accordingly. Now we come to the coding part. We need to make simple ListActivity with ListView . There are lot of tutorials available: Vogella ListView Tutorial TechnoTalkative ListView and lot more. You can f ind customizat ion of the ListView there too. Here I'll discuss the Adapter part of the ListView  only. What is Adapter in A
54 comments
Read more

Android Studio How to use 9 patch png?

Hi, 2nd blog post after almost 1.5 year :) Today I'm going to discuss about 9 patch image and how to use 9 patch png in android apps. What is 9 patch? 9 patch is technique used to scale the image in such a way that the 4 corners remain unscaled, but the four edges are scaled in one axis and the middle is scaled in both axis. So the graphical representation of this scenario will be something like this: Icon when divided into 9  patch Simple Icon file The image at left side when divided into 9 patch will look like the image at the right side. Now the interesting part, the four corners of the image will be remain unscaled and the edges will be scaled in single axis, which may be X or Y. and the center of the 9 patch image will be scaled in both axis. Now we include an image which will represent the parts of image unscaled, scaled into Y axis and scaled into Y and scaled into both direction with color differentiation. Here it is. 9 patch parts represented w
20 comments
Read more

How to add arabic text on photos using iPhone

This question can come across your mind many times, while you want to share a simple photo with some arabic caption on it. There's no built-in app there on iPhone OS that can add arabic text to photos. Add arabic to photos Well we've made a nice app that can let you do that in seconds with few taps. Here's how you can add text to photos using iPhone. Download the app. Select and open your photos in editor. Select the 'Add Text' option from bottom toolbar. Enter your text. Change font, color, stroke, border, and many customization. Save your photo. Where to download?  Imagitor is a great tool to add text to your photos. https://appsto.re/i6725K2 Be more creative and let your imagination design your next facebook post, business card, event flyer, motivational quote, fan poster or political review using Imagitor. See Screenshots. Add Arabic to Photos Choose arabic fonts.
Post a Comment
Read more