Search code examples
androidtabwidget

make child of tabwidget bigger than tabwidget


I have 5 buttons on tab widget, 2 from left and 2 from right are the same size as background of tabwidget. The central button needs to be twice higher than tabwidget.

if I put all buttons into tabhost, tabhost's size rises equels to the biggest button (central button). How to prevent it?

I want to make something like this. The background height of tabbar needs to be equel to red square's height.

I want to make something like this


Solution

  • Yes, you can do this by following Xml code -

    center_tab_indicator.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dip"
        android:layout_height="65dip"    
        android:layout_weight="1"
        android:orientation="vertical" 
        android:background="@drawable/center_tab_indicator"       
        android:padding="5dp">
    
        <ImageView android:id="@+id/icon"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/camera"
            android:scaleType="center"/> 
    
    </RelativeLayout>
    

    tab_indicator.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dip"
        android:layout_height="55dip"    
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginTop="10sp"
        android:background="@drawable/tab_indicator"
        android:padding="5dp">
    
        <ImageView android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/icon" /> 
    
        <TextView android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" 
            android:layout_centerHorizontal="true"
            style="?android:attr/tabWidgetStyle"
        />    
    </RelativeLayout>
    

    By use of above two XML You can get your desired output. For more, have a look at here You will get an out put like below -

    Image

    Have a look at that. There will be sample project also available. Hope it helps you.