Search code examples
androiddesign-patternsandroid-framelayouttabwidget

How to bring TabWidget background image in front of tabcontent


My purpose of asking this is that I just want to show half image or selected TAB in front of TABCONTENT. I used TabWidget and FrameLayout for tabcontent inside linearlayout parent tag. I know I can use Framelayout as a parent layout but it hides tab widget. I am pasting code please have a look and give me suggestion.

enter image description here

here you can see selected tab arrow that I want to show this arrow above below image that is part of tabcontent.

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/txt_floor"
    android:background="@color/app_bg" >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:showDividers="none"
            android:dividerPadding="0dp"
            android:tabStripEnabled="false" />
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginTop="-5dp"
                android:layout_weight="0" />

                <android.support.v4.view.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="0dp"
                    android:layout_weight="0"
                    android:layout_gravity="bottom"  />
        </LinearLayout>
</TabHost>

Solution

  • After more searching I found this solution that works for me like charm :) Hope this solution will help others. enter image description here

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/txt_hosp_name"
        android:background="@color/app_bg" >
    
    
            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >
    
                <FrameLayout
                    android:id="@+id/content_framelayout"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom" >
    
                    <FrameLayout
                        android:id="@android:id/tabcontent"
                        android:layout_width="0dp"
                        android:layout_height="0dp" />
    
                    <android.support.v4.view.ViewPager
                        android:id="@+id/viewpager"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content" />
                </FrameLayout>
    
                    <TabWidget
                        android:id="@android:id/tabs"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:dividerPadding="0dp"
                        android:showDividers="none"
                        android:tabStripEnabled="false"
                        android:layout_gravity="top" />
            </FrameLayout>
    
    </TabHost>