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

I think you can use image,one linear layout will contain two label and one image between that image — Mayur Raval, Feb 06 '17 at 10:02
TabActivity is now depreciated .. also can you post your the whole code — shadygoneinsane, Feb 06 '17 at 10:15
http://adanware.blogspot.in/2012/04/android-custom-tab-layouts-just-using.html — IntelliJ Amiya, Feb 08 '17 at 06:48
@IntelliJAmiya I modified the code using from u provided link (http://adanware.blogspot.in/2012/04/android-custom-tab-layouts-just-using.html) :D — Ravi Kumar Karunanithi, Feb 08 '17 at 07:12
@akk good . my question is why you using `deprecated` TabActivity — IntelliJ Amiya, Feb 08 '17 at 07:14

Charuක · Accepted Answer · 2017-02-11T17:01:30.037

3

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>

edited Feb 11 '17 at 17:01

answered Feb 06 '17 at 12:27

Charuක

12,953
5
50
88

tab_button_effect should add background to tabhost? – Ravi Kumar Karunanithi Feb 22 '17 at 11:25
1

@akk yes then you can have two colors for select state and normal state of a tab – Charuක Feb 22 '17 at 11:33
How can i set textview text color in tab_button_effect.xml – Ravi Kumar Karunanithi Feb 22 '17 at 11:41
1

@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 http://stackoverflow.com/a/4721163/5188159 – Charuක Feb 22 '17 at 11:57
It works, but selected image displays in center point. how can i share image here, for reference/ – Ravi Kumar Karunanithi Feb 23 '17 at 08:17
@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 – Charuක Feb 23 '17 at 08:18
@akk why not i can help you :) whats that you can join the chat ? http://chat.stackoverflow.com/rooms/136433/discussion-between-charu-and-akk – Charuක Feb 23 '17 at 12:47

score 2 · Answer 2 · answered Feb 13 '17 at 07:17

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>

score 1 · Answer 3 · answered Feb 09 '17 at 05:30

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>

it display an error. How could we implement custom-tab.xml to layout — Ravi Kumar Karunanithi, Feb 20 '17 at 12:36

score 0 · Answer 4 · answered Feb 08 '17 at 13:10

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...

score 0 · Answer 5 · answered Feb 13 '17 at 06:31

0

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

answered Feb 13 '17 at 06:31

parik dhakan

787
4
19

How to make oval shape tabhost in android

5 Answers5