Android - iphone style tabhost [closed]

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)}

Branum

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

@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"? – Branum

Android Market IMO uses RadioGroup as "Tabs" – Glenn

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

@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. – Branum

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

This might help as well: gregbugaj.com/?p=6 Ger – Jacoby

i hope this will give you some good idea https://mcmap.net/q/157474/-android-tabs-at-the-bottom – Delftware

+1 @Yoni you made your point with the first comment but it is still a very good point. – Dorothydorp

I know its too Late but here it is : bakhtiyor.com/2009/10/iphonish-tabs Hope this helps to someone someday... – Eyestalk

Custom Android Tabs – Lareine

@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. – Timi

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

Answer 1

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.

to download RaiseCenterTab, please go here GitHub: RaisedCenterTab.

Colubrine

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

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

Guys! unzipped and added the source code :) – Colubrine

Good work Adil! Is there a way to get that blue tint via xml and avoid using images? – Gregale

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

+1 What rubbish, How can someone make such great example? – Sanguinary

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? – Lindbergh

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? – Persia

@PaperThick: you can come to Android People chat for discussion. – Colubrine

Answer 2

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

Glenn

you can find an example of using RadioGroup to replace Tab here mokriya.com/blog/2011/02/13/custom-tabs-in-android – Chandler

@Chandler link is broken can you have any other demo link for the same? – Magnetic

Can you look at github.com/makeramen/android-segmentedradiobutton as a replacement? – Chandler

@neild we have moved blog post to blog.mokriya.com/post/15342694933/custom-tabs-in-android – Normy

@alex your ideas are helpful – Breach

@MohithKm tutorial link works amazing and really easy to setup – Gundry

Answer 3

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:

Mongrelize

Answer 4

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

Burnaby