Android – iPhone like Tab bar in Android



Hi,

If you have gone through my previous article to Display Tab Bar in android, where we have just seen the simple Tab bar display process as per the Android way. But what if we want to display iPhone Like tab bar in Android(i.e. Displaying Tab bar at bottom side in Android). Is it possible? yes, it is possible and check the below image for the same:

Android - Tab bar at bottom side

Android - Tab bar at bottom side

In my previous Tab bar example, just change the main.xml file as below, and then you will be having a tab bar at down side.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost
	android:id="@android:id/tabhost"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	xmlns:android="http://schemas.android.com/apk/res/android">

	<RelativeLayout
		android:layout_width="match_parent"
		android:id="@+id/linearLayout1"
		android:layout_height="match_parent">

		<TabWidget
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:id="@android:id/tabs"
			android:layout_alignParentBottom="true">
		</TabWidget>

		<FrameLayout
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:id="@android:id/tabcontent">
		</FrameLayout>
	</RelativeLayout>
</TabHost>

FYI, i have just change the RelativeLayout and set the android:layout_alignParentBottom=”true” in TabWidget so that it will be displayed at down side.



About Paresh Mayani

I'm Paresh Mayani, a passionate mobile application developer from India. Having been involved in android app development since 2010. By passion, I am Head/Organizer of Google Developers Group (GDG), Ahmedabad
  • http://www.facebook.com/profile.php?id=100001861268894 Святослав Былим

    It will be helpful, I think:
    if somebody add ListView into your “tab_test.xml” then ListView overlap tabs :( So they can add two lines into the FrameLayout :)

  • http://www.facebook.com/profile.php?id=100001861268894 Святослав Былим

    … a part of code was deleted, so I put it again without tags:

    android:id=”@android:id/tabcontent”
    android:layout_width=”fill_parent”
    android:layout_height=”fill_parent”

    android:layout_alignParentTop=”true”
    android:layout_above=”@android:id/tabs”

    • http://pareshnmayani.wordpress.com Paresh N Mayani

      Thanx for the great feedback :) , i like it because you have played with this example and help me to find out the optimized solution.

  • sathya

    Hi ..,
    nice one. was searching for this long time , tried the same with background image and all. its quiet simple!!… thanks a lot

  • Anders

    Why dosent this code work? i´m running 2,2 on my application but the tabs dosent shows

  • Anders

    Problem solved thanks for great tutorials :) keep it up

    • http://www.technotalkative.com/ Paresh Mayani

      Welcome.

  • manish yadav

    if i want to focus on any specific tab then how to do