Set non rectangle image background in FragmentTabHost

Question

I need to set non rectangular or squared images in my FragmentTabHost background images like this: https://i.stack.imgur.com/XTfuo.jpg.

But I am getting this: https://i.stack.imgur.com/WXNfc.png (the default divider between the tabs is cutting my image) :( Please help

I have these diagonally shaped images and I want to set these as background image in my individual tabs. This is what I have done to far.

tab_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>

<ImageView 
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center_horizontal" />

</LinearLayout>

MainActivity.java
public class MainActivity extends ActionBarActivity {
private FragmentTabHost mTabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);
    mTabHost = (FragmentTabHost) findViewById(R.id.tabhost);
    mTabHost.setup(this, getSupportFragmentManager(), R.id.tabFrameLayout);

    mTabHost.addTab(
            mTabHost.newTabSpec("tab1").setIndicator(getTabIndicator(mTabHost.getContext(),  R.drawable.tab1)),
            FragmentTab.class, null);
    mTabHost.addTab(
            mTabHost.newTabSpec("tab2").setIndicator(getTabIndicator(mTabHost.getContext(),  R.drawable.tab2)),
            FragmentTab.class, null);

}

private View getTabIndicator(Context context, int icon) {
    View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
    ImageView iv = (ImageView) view.findViewById(R.id.imageView);
    iv.setImageResource(icon);
    return view;
}
}

Are you doing like [this](http://stackoverflow.com/questions/17897351/how-to-customize-android-tabs-or-background-change)? — Tushar Gogna, Mar 09 '15 at 06:53
yes but my images are not perfectly rectangular, they are a bit diagonal. Please see image links. Thanks. — Shaw, Mar 09 '15 at 07:09
Yes, I have seen them. You will have to make custom Tabs for them. — Tushar Gogna, Mar 09 '15 at 07:15
You can use the TabWidget and make the divider transparent by setting the divider color — Sanjeet A, Mar 09 '15 at 07:31

score 0 · Answer 1 · answered Mar 09 '15 at 07:32

You can use the TabWidget and make the divider transparent by setting the divider color

android:divider="@color/transparent"

Your TabHost xml can be like this-

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@color/card_background" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:paddingTop="@dimen/padding_small"
            android:divider="@color/transparent"
            android:background="@drawable/footer_tab_widget_background" />
    </LinearLayout>
    <!-- "-->
</android.support.v4.app.FragmentTabHost>

and the code for the TabHost and the TabWidget setup can be like this

mTabHost = (FragmentTabHost) rootView.findViewById(android.R.id.tabhost);
        mTabWidget = (TabWidget) rootView.findViewById(android.R.id.tabs);
        mTabHost.setup(getActivity(), getChildFragmentManager(), android.R.id.tabcontent);

Set non rectangle image background in FragmentTabHost

1 Answers1