Android SlidingTabs style tabs with round corners

Question

I am using SlidingTabs to create two tabs. The UI of the tab should appear like this -

When first tab is selected

When second tab is selected.

(Please note the straight corners of the blue rectangle)

I am using the following selector to create the UI shown above.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  Active tab -->
    <item android:state_selected="true" android:state_focused="false"
        android:state_pressed="false" android:drawable="@drawable/round_corner_rectangle" />
    <!--  Inactive tab -->
    <item android:state_selected="false" android:state_focused="false"
        android:state_pressed="false" android:drawable="@android:color/transparent" />
    <!--  Pressed tab -->
    <item android:state_pressed="true" android:state_selected="true" android:drawable="@drawable/round_corner_rectangle" />

    <item android:state_pressed="true" android:state_selected="false" android:drawable="@color/transparent" />
    <!--  Selected tab (using d-pad) -->
    <item android:state_focused="true" android:state_selected="true"
        android:state_pressed="false" android:drawable="@android:color/transparent" />
</selector>

round_corner_rectangle's code is as follows-

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp"/>
    <solid android:color="@color/login_background" />
</shape>

login_background is the dark blue color. Using the above code, I am getting the following-

I can ofcourse remove the corner item from round_corner_rectangle to get the dark blue background straight instead of round. If I make right side of blue rectangle straight, when the other tab is selected, the rectangle is rounded on wrong side.

What should I do to get the UI like shown in the first image?

Update:- As you can see from my code, I don't have issue in creating round corners, the issue is having straight corners on the selected tab. If I simply add round corners, when a second tab is selected, the corners are rounded on the wrong side.

Answer 1

Ok first of all just create this simple rectangle drawable xml. and Don't worry about the corners we are going to create it dynamically.

tabbackground.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="your_color" />
    <size android:height="40dp" />
</shape>

Now when you are changing tab. You have to retrive the position of selected tab using listeners in selectedTabPosition variable. I am not writing fullycode just giving you a skeleton

if (selectedTabPosition == 0) { // that means first tab

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground);
    drawable.setCornerRadii(new float[]{30,30,0,0,0,0,30,30}); // this will create the corner radious to left side

} else if (selectedTabPosition == your_total_tabcount) { // that menas it's a last tab

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground);
    drawable.setCornerRadii(new float[]{0,0,30,30,30,30,0,0}); // this will create the corner radious to right side

} else { // you don't have to worry about it. it is only used if you have more then 2 tab. means for all middle tabs

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground); 
    drawable.setCornerRadii(new float[]{0,0,0,0,0,0,0,0}); // this will remove all corner radious

}
// and at last don't forget to set this drawable.

this is what i have tried on button click

Answer 2

Use this xml and A/c to you change the radius .It is use for set corner as rounded shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<solid
android:color="#134F4D"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>