Android - iphone style tabhost

Question

Is it possible to style the Android Tabhost to look like that of the iPhone? If not, is there any open source code that can show how to create Bottom Tabs for Android ?

_{(source: appshopper.com)}
alt text

Is there something wrong with the system tabs, other than that they don't look like iPhone tabs? Why force your users to learn a different platform's UI standards, just for the heck of it? Android users already know how to interact with Android tabs. Don't break their expectations for no reason; it'll just make your app less usable. — Yoni Samlan, Apr 20 '10 at 22:46
@Yoni. Yes, I want bottom tabs because I intend to have a "Back" button at the top. Besides what do you mean by "Why force your users to learn a different platform's UI standards"? If anyone is using a different UI, it is Google itself. Have a look at the "Android Market", "Google Finance" etc. What UI is that? I mean which tabHost or ListView is being used in the "Android Market"? — Soni Ali, Apr 21 '10 at 13:45
is there something wrong with the hardware "back" button? It's exceptionally unusual to have a back button on the screen; Android users know how to use the physical on-device back button. That said, there are reasons to use custom tab-like controls (like Alex mentions) in some views, usually for filtering a list on different criteria (like in the Market), but that's kind of a different case. It seems like the screenshot above is a pretty good fit for normal Android tabs. — Yoni Samlan, Apr 21 '10 at 18:33
@Yoni: It is for filtering a list. And that is why I need to put a [Back] button because if the use clicks on the "standard" [Back] button, the app will exit. — Soni Ali, Apr 23 '10 at 14:12
You should probably be overriding the hardware back button, then... I think users will expect the physical back button to close the filtering mode, not exit the activity. Giving them two different buttons for back (hard and soft) that do two different things in the same context is probably confusing. — Yoni Samlan, Apr 23 '10 at 15:23
+1 @Yoni you made your point with the first comment but it is still a very good point. — Terrance, Dec 09 '10 at 18:12
i hope this will give you some good idea [http://stackoverflow.com/questions/2395661/android-tabs-at-the-bottom](http://stackoverflow.com/questions/2395661/android-tabs-at-the-bottom) — Ads, Nov 17 '10 at 19:38
I know its too Late but here it is : http://bakhtiyor.com/2009/10/iphonish-tabs/ Hope this helps to someone someday... — Kartik Domadiya, Apr 13 '11 at 10:16
@YoniSamlan After almost 3 years, 80% of my Android users do not know how to use their Android physical buttons. I deal with this everyday. There is no standard UI IMO. You should be free to build any UI that you feel is more friendly for your app. — Bms270, Jul 12 '13 at 14:54
I disagree with the idea that "it is better to show Android tabs as Android tabs, because of UI standards". Lets remember that some apps are made for commercial purposes and, in fact, they are much more interested in their own UI identity than making each device having its own standard UI. — Marcelo, Mar 03 '15 at 17:46

Adil Soomro · Answer 1 · 2016-08-19T19:51:46.297

68

I would suggest you guys to not change the default look and feel of the tabs, because users on android devices have their own user experience, and you will negate that past experience, so don't force them to learn new tabs experience (because users on mobile are so lazy to learn new things, usually they rely on their past experience.)

See Pure Android for more.

However if you want to go ahead, I've customized the default Android Tabs to be look like iPhone tabs. Which is simple and features default Android tabs' ui components (̶T̶a̶b̶H̶o̶s̶t̶, ̶T̶a̶b̶W̶i̶d̶g̶e̶t̶).

Download link: GitHub, Iphone-Tab-in-Android

This sample has been upgraded to use TabLayout and ViewPager

Relavent Blog entry can be found here:

iPhone like Tabs in Android.

The screenshot:

I have also cutomized the tabhost to look like Raised Center Tab.

Raised Center Screenshot

to download RaiseCenterTab, please go here GitHub: RaisedCenterTab.

edited Aug 19 '16 at 19:51

answered Aug 09 '11 at 07:19

Adil Soomro

37,609
9
103
153

3

Good to have a solution, but there's no explanation and the GitHub project has a zip file? Atleast unzip the code on GitHub so that it can be read online. – HRJ Nov 26 '11 at 09:52
also hate when people put zip files on github, defeats the whole purpose of github and being able to take a look at the code right there. – Gubatron Dec 14 '11 at 05:25
6

Guys! unzipped and added the source code :) – Adil Soomro Dec 14 '11 at 07:57
1

Good work Adil! Is there a way to get that blue tint via xml and avoid using images? – Rahul Choudhary Jan 07 '12 at 08:28
1

Cool stuff Adil, I'm very grateful even if I have to unzip unlike some other users! Question though, how do you create the blue tint in Photoshop for the selected icon. I'm a complete PS noob. – georgiecasey Jan 29 '12 at 01:49
4

+1 What rubbish, How can someone make such great example? – MKJParekh Jul 02 '12 at 06:37
Nice work!.. One problemI encountered is the tab widget's shadow. Its drawn at the top of the screen. how should I draw it at current position? – Ron Aug 11 '12 at 13:02
Nice one! One issue I'm having is that the larger middle button pushes the content in the selected tab so they don't overlap. Does anyone know how to resolve this? – PaperThick May 16 '13 at 09:46
@PaperThick: you can come to [Android People chat](http://chat.stackoverflow.com/rooms/5098/android-people) for discussion. – Adil Soomro May 16 '13 at 09:49

score 16 · Answer 2 · answered Apr 20 '10 at 20:04

16

You'll need to build this control yourself. Few options:

use RadioGroup and put custom radio buttons there and customize hell of it.
build this control from scratch, inherit it from one of the layouts ( Frame, Relative, Linear ) and build the behavior you need.
You can also take TabHost src, and use it as a base for your control

answered Apr 20 '10 at 20:04

Alex Volovoy

67,778
13
73
54

you can find an example of using RadioGroup to replace Tab here http://mokriya.com/blog/2011/02/13/custom-tabs-in-android/ – anticafe Apr 13 '11 at 11:21
@anticafe link is broken can you have any other demo link for the same? – NIKHIL Mar 21 '12 at 09:46
Can you look at https://github.com/makeramen/android-segmentedradiobutton as a replacement? – anticafe Mar 21 '12 at 11:03
3

@neild we have moved blog post to http://blog.mokriya.com/post/15342694933/custom-tabs-in-android – Mohith Km Apr 03 '12 at 18:55
@alex your ideas are helpful – umesh Oct 23 '13 at 19:23
@MohithKm tutorial link works amazing and really easy to setup – bentzy Nov 28 '13 at 09:56

score 5 · Answer 3 · answered Jan 24 '13 at 12:33

5

You can look at: https://github.com/mta452/iTab

The plus point of this is that it automatically does images shaping with gradient like iOS does.

Screenshot:

Screenshot of iTab

answered Jan 24 '13 at 12:33

Tayyab Akram

366
3
12

score 1 · Answer 4 · answered Apr 21 '10 at 07:35

Your screenshot has the android 1.6. style. If you are using a tabhost on a newer version and simply put it on the bottom of the screen it will look very much like the iphone version.

I wouldn't change to much at the UI of android simply give it a resemblance to the iphone look and feel(same icons) and stay with the rest in the android style. This will make the app look familiar to the users.

To achieve the same look for the icons just use an xml definition of you drawable with a selected and a not selected state of the button like it looks on the iphone. To set an icon use the setIndicator method of the tabspec.

You can somewhat style the tabhost by setting a background or a style for the tabwidget. But the actual inner part of the widget will be drawn above you style and background

Android - iphone style tabhost

4 Answers4

Linked

Related