Custom Tab Bar with images

Question

I'm trying to create a tab-bar like the one shown in the image below ( i.e. a tab-bar with some images on the left ) .

The white part are two images while the black part are the tab-labels

Can anyone guide me in doing the same ?

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

Using actionBar.addTab(actionBar.newTab() //.setText(mSectionsPagerAdapter.getPageTitle(i)) .setCustomView(view) .setTabListener(this)); Here, you customize your layout and parse it into view See [How to set a custom View in ActionBar's navigation tabs and make the tabs adapt to its height?

edited May 23 '17 at 10:26

Community

1
1

answered Jun 04 '14 at 08:56

kidnan1991

366
2
12

Using action bar is necessary to make such a tab-bar ? Isn't there any other way ? Sorry if the question is noobish , but I'm new to android . – UselessNoob Jun 04 '14 at 09:02
Tab-bar? Hmmm, you can use tab-host :) Of course, you can simply add a layout at the top and customize it. – kidnan1991 Jun 05 '14 at 02:09

score 0 · Accepted Answer · answered Jun 04 '14 at 10:11

I managed to get a workaround without using action bar . Just some XML code tweaking , and I was good to go . Here's what I did :

<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:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
     >

    <RelativeLayout
        android:id="@+id/linear"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/tab_bg" >

       <LinearLayout 
           android:orientation="horizontal"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/options"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/img"
            android:layout_marginLeft="10dp"/>
        </LinearLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignLeft="@+id/linear"
        android:layout_below="@+id/linear">
    </FrameLayout>
</RelativeLayout>

</TabHost>

Custom Tab Bar with images

2 Answers2