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

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.

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

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:

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