— Pixels Commander

[ In English, На русском ]

IPhone-like TabBar for Android applications

Some time ago I worked for conservative client who wants Android and iPhone versions of application look identical. Ofcourse one of main problems became development of iPhone-like TabBar widget in Android.

TabBarNavigator does not fit because of difference in position and visual appearence. So i`ve started to search the way to solve the problem.

We would extend view class and describe it into xml respectively:

[xml title=”mainActivity.xml”]
<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
class="com.pixelscommander.tabbarapp$iRelativeLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background = "#C5CCD4FF"
>
<view

android:id="@+id/Tabs"
android:layout_width = "fill_parent"
android:layout_height = "50px"
android:layout_alignParentBottom = "true"
/>
</view>

[/xml]

There we can find two classes iTab and iRelativeLayout described into application activity.
We would create TabBar with overriding view`s onDraw method for every iTab.
I`ll not describe listing in this article as it`s large enough. You can just look at comments into project that can be loaded here.

Ofcourse there are another ways to mimic iPhone tabbar but this not only looks like native, it allows the use of the same PNG icons with semitransparence so you have not to create new assets for android version of application.