How can i to set image at center tabhost?

Question

Somebody have any idea how i set image at center tab? I tryed to change my xml but not worked.

Below my xml:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>
</TabHost>

Below my code Activity:

@SuppressWarnings("deprecation")
        final
        TabHost tabHost = getTabHost();

        // Tab 1
        TabSpec aba1spec = tabHost.newTabSpec("Tab 1");
        // setting Title and Icon for the Tab
        tabHost.getTabWidget().setStripEnabled(false);
        aba1spec.setIndicator("",getResources().getDrawable(R.drawable.tab1));
        Intent tab1 = new Intent(this, tab1.class);
        aba1spec.setContent(tab1);

        // Adding all TabSpec to TabHost
        tabHost.addTab(aba1spec); // Adding tab1

Image:

Thanks a lot.

Answer 1

1)- Create a layout file with name my_xml.xml or any name you like.

In report_tabs use this code.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/layout_tabsLayout"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/btn_selector"
 android:gravity="center"
 android:orientation="vertical"
 >

 <ImageView
 android:id="@+id/img_icon"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_marginTop="3dp"
 />
</LinearLayout>

2)- And use below code in your activity.

Intent intent;
tabhost = getTabHost();
TabHost.TabSpec tabspec;
intent = new Intent().setClass(getApplicationContext(),xxxxx.class);

tabspec = tabhost.newTabSpec("First");
view = LayoutInflater.from(this).inflate(R.layout.report_tabs,
tabhost.getTabWidget(), false);
imgtabF = (ImageView) view.findViewById(R.id.img_icon);
imgtabF.setBackgroundResource(R.drawable.tab_icon_selector);

tabspec.setIndicator(view);
tabspec.setContent(intent);
tabhost.addTab(tabspec);

3)- Create a file with name tab_icon_selector in drawable for changing the icon on tab click like this:-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" 
      android:state_pressed="false" android:drawable="@drawable/medical_icon_unselect"    
 />
 <item android:state_focused="false" android:state_selected="true" 
 android:state_pressed="false" android:drawable="@drawable/medical_icon_sel" /> 
 <!-- Focused states -->
 <item android:state_focused="true" android:state_selected="false" 
 android:state_pressed="false" android:drawable="@drawable/medical_icon_sel" />
 <item android:state_focused="true" android:state_selected="true" 
 android:state_pressed="false" android:drawable="@drawable/medical_icon_sel" /> 
 <!-- Pressed -->
 <item android:state_pressed="true" android:drawable="@android:color/transparent"/> 
 </selector>

Now you can create your custom Tab bar and your image icon will be in center of the tab.

source :