Android change height of selected tab in tabwidget

Question

I want to change the height of the selected tab within the tabwidget as shown in the image below.

I used approach: I used two images first image have transparent part on top of that and second is full image,on tab selected i changed first image with second one. but this approach doesn't work in all device. We have to create images with equal height and also convert to nine patch of each.

the figure is shown what i exactly needed.

TabHost.TabSpec spec    =   mTabHost.newTabSpec(AppConstants.TAB_A);

    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(R.id.realtabcontent);
        }
    });
     spec.setIndicator(createTabView(R.drawable.hometabselection));//style applied here on each tab
     mTabHost.addTab(spec);

    spec                    =   mTabHost.newTabSpec(AppConstants.TAB_B);
    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(R.id.realtabcontent);
        }
    });
    spec.setIndicator(createTabView(R.drawable.realtabselection));
    mTabHost.addTab(spec);
    spec       =   mTabHost.newTabSpec(AppConstants.TAB_C);
    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(R.id.realtabcontent);
        }
    });

    spec.setIndicator(createTabView(R.drawable.topnewwsselection));

    mTabHost.addTab(spec);

    spec                    =   mTabHost.newTabSpec(AppConstants.TAB_D);
    spec.setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {
            return findViewById(R.id.realtabcontent);
        }
    });

    spec.setIndicator(createTabView(R.drawable.treadingselection));

    mTabHost.addTab(spec);

hometabselection.xml //in drawable which is used for all different tab selection

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:state_selected="true"
    android:drawable="@drawable/homeselected" />//full image
<item
   android:state_selected="false"
   android:drawable="@drawable/homenormal" />//image with some portion transparent on top of that
</selector>

layout

 <TabHost
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@android:id/tabhost"
      android:layout_width="fill_parent"
       android:layout_height="fill_parent" >
    <LinearLayout
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:orientation="vertical" >
          <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="@dimen/fr_layout_width"
            android:layout_height="@dimen/fr_layout_height"
            android:layout_weight="0" />
        <FrameLayout
            android:id="@+android:id/realtabcontent"
            android:layout_width="fill_parent"
            android:layout_height="@dimen/fr_layout_height"
            android:layout_weight="1" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="@dimen/hdpi_tab_layout_height"
            android:layout_weight="0"
            android:divider="@drawable/tab_bg"
            android:background="@android:color/transparent"
            android:dividerPadding="@dimen/tab_divider_padding"
            android:orientation="horizontal" />
    </LinearLayout>
</TabHost>

Answer 1

I don't know if this would work, but you may try keeping the approach you've implemented and additionally implement an onTabChangedListener for that TabHost and resize the layout there when a tab is selected. I haven't tried it but my idea should be something like this:

your_tabhost.setOnTabChangedListener(new OnTabChangeListener() {
  @Override
  public void onTabChanged(final String tabId) {
    final TabHost th = (TabHost) findViewById(android.R.id.tabhost));
    final LinearLayout lLayout = (LinearLayout) th.getTabWidget().getChildTabViewAt(th.getCurrentTab());

    ViewGroup.LayoutParams curParams = lLayout.getLayoutParams();

    lLayout.setLayoutParams(new FrameLayout.LayoutParams(curParams.width, (int) (curParams.height * 1.20)));
  }
});

In case this works, however, you'll find an additional problem: You don't know which tab was selected prior to selecting this. You'd need to save each tab selection into a class variable to know which one was selected prior to resize it to its default height once a new tab has been selected.

Answer 2

One way is like,you have to convert that image into two different size bitmap and set into image view if it is selected or not.