How to make oval shape tabhost in android

Question

I tried to make oval shape tabhost as expected below shape.

I tried the below codes.

    public class AndroidTabLayoutActivity extends TabActivity {
    TabHost tabHost;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        tabHost = getTabHost();
        TabHost.TabSpec spec;
        Intent intent;
        intent = new Intent().setClass(this, PhotosActivity.class);
        View tabView = createTabView(this, "Updates");
        spec = tabHost.newTabSpec("tab1").setIndicator(tabView).setContent(intent);
        tabHost.addTab(spec);

        tabView = createTabView(this, "Events");
        intent = new Intent().setClass(this, SongsActivity.class);
        spec = tabHost.newTabSpec("tab2").setIndicator(tabView)
                .setContent(intent);
        tabHost.addTab(spec);

        TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
        final int tabChildrenCount = tabWidget.getChildCount();
        View currentView;
        for (int i = 0; i < tabChildrenCount; i++) {
            currentView = tabWidget.getChildAt(0);
            LinearLayout.LayoutParams currentLayout =
                    (LinearLayout.LayoutParams) currentView.getLayoutParams();
            currentLayout.setMargins(0, 0, 16, 0);
        }
        tabWidget.requestLayout();
        tabHost.getTabWidget().setDividerDrawable(null);
    }

    private static View createTabView(Context context, String tabText) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_tab, null, false);
        TextView tv = (TextView) view.findViewById(R.id.tabTitleText);
        tv.setText(tabText);
        return view;
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#2CA0E6">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="30dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="2dp">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:paddingTop="5dp">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="70dp" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </LinearLayout>
    </TabHost>
</LinearLayout>

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="@color/tab_textcolor"
android:background="@drawable/tab_selector"/>

I got the output as below image

Can anyone help, how to make it. Thanks

Caveat

I think you can use image,one linear layout will contain two label and one image between that image – Agio

TabActivity is now depreciated .. also can you post your the whole code – Innominate

adanware.blogspot.in/2012/04/… – Adopt

joshclemm.com/blog/?p=136 – Adopt

@IntelliJAmiya I modified the code using from u provided link (adanware.blogspot.in/2012/04/…) :D – Caveat

@akk good . my question is why you using deprecated TabActivity – Adopt

Answer 1

Well that's an image.All what you need to do is ready the images and set them to the selected tab.That's it!

Well I don't have that image, so I used below images(_selected.png,_{not_selected.png}) just to show how it works but they are not well designed ;)

P.s currentLayout.setMargins(0, 0, this_should_be_zero, 0); and your images should have that margins(whatever the expected gap) otherwise there will be a gap between two images. Additionally you can use selector(same png with another color) to show the selected one.

_{Seems you are trying to figure out a programmatic way try workaround with Paint class if you got extra time & effort,if you use shapes will be hard to figure out the exact view since it is complicated, you can see tab A view and B is not same,using an image will be the easiest}

And in your custom_tab.xml set

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabTitleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:clickable="true"
    android:padding="5dp"
    android:textSize="15sp"
    android:textStyle="bold"
    android:layout_gravity="center"
    android:ellipsize="marquee"
    android:MaxLines="1"   //  you can use this instead  of  android:singleLine="true" 
    android:textColor="@color/black"
    android:background="@drawable/tab_button_effect"/> // here set selector

tab_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/not_selected" android:state_selected="true"></item>
    <item android:drawable="@drawable/selected"></item>

</selector>

Waffle

tab_button_effect should add background to tabhost? – Caveat

@akk yes then you can have two colors for select state and normal state of a tab – Waffle

How can i set textview text color in tab_button_effect.xml – Caveat

@akk can you check my previous answer that on the history of edits you can see that there in the createTabView method or else or else you can use something like this https://mcmap.net/q/413389/-how-to-change-font-color-in-selected-focused-listview-items – Waffle

It works, but selected image displays in center point. how can i share image here, for reference/ – Caveat

@akk didn't get what you were saying can you show that ,you mean its like center_cropped? just post it as an image and get the link remove the post and comment the link here – Waffle

@akk why not i can help you :) whats that you can join the chat ? chat.stackoverflow.com/rooms/136433/… – Waffle

Answer 2

try this in your xml.and use it as a tab.

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

  <corners
    android:bottomLeftRadius="30dp"
    android:bottomRightRadius="30dp"
    android:radius="60dp"
    android:topLeftRadius="30dp"
    android:topRightRadius="30dp" />

  <solid android:color="#CFCFCF" />

  <padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

  <size
    android:height="60dp"
    android:width="270dp" />

</shape> 

Thirtieth

Answer 3

you can make oval tabs by using drawables in tabhost. please find the code snippets below

tabHost.newTabSpec("tab1").setIndicator(getCustomLayout()).setContent(intent);

private static View getCustomLayout(Context context, String tabText) { View view = LayoutInflater.from(context).inflate(R.drawable.custom_tab,null, false); return view; }

custom-tab.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
     <stroke
         android:width="1dp"
         android:color="#000000"/>
       <corners android:radius="2dp"/>
    </shape>

Electrophorus

it display an error. How could we implement custom-tab.xml to layout – Caveat

Answer 4

I think the easiest way to achive that look is to create 3 drawables for the separators: 1. Left tab focused (white), right not focused (blue) 2. Right focused (white), left not focused (blue) 3. both not focused (blue)

After one of the tabs gets focused, you just change it's left and right separator (if exists) to focused one.

I would post it as a comment, but my reputation is too low yet to comment...

Seger

Answer 5

Make your custom background xml and add it and try to set padding with that so no need to use image or else

Weems