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.

Pelage

checkout my answer .. i hope it helps you – Singapore

@Rohan Kandwal Did you get the solution for this? – Evania

@PRB yes, please check the selected answer. – Pelage

@Rohan Kandwal I tried but did not work :( Can you please post your answer.I do not know where i am doing wrong. – Evania

@RohanKandwal What i have done is #35338254 – Evania

@PRB your problem is exactly same as mine, just some style change. Did you try the selected solution? – Pelage

@RohanKandwal what i have tried is mentioned in the above link.Selected solution also tried.But no luck :( – Evania

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

Singapore

Looking good, I can't try at the moment but will let you know in 24 hours. Thanks. – Pelage

getting this exception. java.lang.ClassCastException: android.graphics.drawable.StateListDrawable cannot be cast to android.graphics.drawable.GradientDrawable – Evania

your xml shuld be shape drawable file as i mentioned above. not a selecter file.. – Singapore

@PRB can u post ur xml ?? – Singapore

@Singapore yes now working fine but right side is not getting rounded corner :( – Evania

@Singapore one more issue both tabs are coming in same color.if it selected then only it should come in color otherwise in white. – Evania

for round issue you may have problem with if .. esle .. condition .. And you can also set color in that if condition .. i hope you understa4 – Singapore

Let us continue this discussion in chat. – Evania

what kind of changes i have to do, if i want two different color tabs with different text color with rounded corner tablayout. – Anterior

@ULHAS PATIL Just change the tabBackgroundColor and textColor in above if condition .. it will work as u want – Singapore

@Singapore thanks for your quick reply, but what about unselected tab do i need to change it again with different color ? – Anterior

@ULHAS PATIL yes absolutely. What you have to done is before this if condition just set the default color to all your tabs. And after that your code is execute the if condition and it will only change the selected tab color ... – Singapore

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>

Clabber

This is working fine for the tab on left side but when tab on right side is selected, the rounded corners are on the wrong side. – Pelage

I can change the code but how to make sure that the rounded corners are in the right direction w.r.t tab selected? – Pelage

How to change the radius on the go? Can you tell me how to change the background of a particular tab individually? – Pelage

you have to handle this from java coding.. now you should accept my answer. – Clabber

That's the issue, I know I'll have to handle it from java but I don't know where. Can you atleast tell me which functions should I use? – Pelage

In the adapter check which tab is selected.If you find it ten change the background color. – Clabber

I have that much of understanding, can you tell me which code in SlidingTab should I call to change the background of the tab? – Pelage

Yes, SlidingTabLayout by google github.com/google/iosched/blob/master/android/src/main/java/com/… – Pelage

in SlidingTabLayout can edit the code here @Override public void onPageSelected(int position) { if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { mTabStrip.onViewPagerPageChanged(position, 0f); scrollToTab(position, 0); } for (int i = 0; i < mTabStrip.getChildCount(); i++) { mTabStrip.getChildAt(i).setSelected(position == i); TextView tv = (TextView) mTabStrip.getChildAt(i); if(i == position){ tv.setBackground(put yor code); } }} – Clabber

Good idea, let me check and get back to you. – Pelage

now accept my answer and appreciate me to for helping ... :) – Clabber

if your problem solved then accept my answer and it will help some other who have same problem.. – Clabber

I didn't get time to test the code, as soon as I test the code, I'll mark the question solved. – Pelage

Answer 3

This code works fine on Android 4.0 and above and will give you result as mentioned by you and don't judge the code with the preview in Android Studio.

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape>
        <solid
            android:angle="270.0"
            android:color="#5C83AF" />

        <corners android:topLeftRadius="8dp"
            android:bottomLeftRadius="8dp"/>
    </shape>
</item>

Edit 1: Another solution to your problem can be solved by using a 9-patch Image.

Edit 2 : https://github.com/hoang8f/android-segmented-control

Merc

Thanks for the reply, I'll check and see – Pelage

for this thing you might have to create two separate selector or each of the tabs and apply them as and when needed accordingly. Xml have its limitation so in my opinion it is the best option you can do. Otherwise you can also go for creating a custom view for this. – Merc

I understand that I have to use two different selectors but the problem is that I don't know how to add different selectors to each Slidingtab. – Pelage

Try implementing your custom SlidingTab.java and SlidingTabLayout.java. You can also try implementing a custom layout for your view pager and use its getCurrentItem method inorder to display the correct radio or checkbox. – Merc

Answer 4

Your left tab (button) in xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
    android:width="0dp"
    android:color="@color/transparent" />
<!-- you can add multiple colors -->
<gradient
    android:startColor="@color/your_start_color"
    android:endColor="@color/your_end_color" 
    />
<corners
    android:topLeftRadius="10dp"
    android:topRightRadius="0.1dp"
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="0.1dp"
    />
</shape>

for right tab (button) change it this way:

<corners
    android:topLeftRadius="0.1dp"
    android:topRightRadius="10dp"
    android:bottomLeftRadius="0.1dp"
    android:bottomRightRadius="10dp"
    />

and use it in your xml selector.

Quadripartite

Answer 5

Did you try to make your dark blue rectangle with all straight corners and just make your beige corners to overlap the rectangle so it's straight corners won't be visible? This should make it work as you want.

Another possible solution is to use some kind of third party library like

https://github.com/hoang8f/android-segmented-control

You also might wanna check this website to find libraries:

https://android-arsenal.com/

Heritage

Answer 6

You should try this library https://github.com/hoang8f/android-segmented-control.

It's easy to setup and it's easy to set selected and non-selected states.

Pledge

Answer 7

use following code in rounded_corner.xml file in drawable folder

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="50dp" />
    <stroke android:width="5px" android:color="#1a1a1a" />
</shape>

and use following in activity_main.xml file

<Button
        android:id="@+id/btnCodeInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/rounded_corner"
        android:text="CodeInput" />

that's it

Deficit

You didn't understood the question properly, I know how to make rounded backgrounds or buttons, but the problem was how to adjust them properly once the tab changes. – Pelage

you can use following code for selected and unselected tab selector.xml in drawable folder. <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="schemas.android.com/apk/res/android"> <item android:drawable="@drawable/box_open" android:state_selected="true"/> <item android:drawable="@drawable/box_open" android:state_activated="true"/> <item android:drawable="@drawable/box_closed"></item> </selector> – Deficit