Home » Android » Android SlidingTabs style tabs with round corners

Android SlidingTabs style tabs with round corners

Posted by: admin June 15, 2020 Leave a comment

Questions:

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

When first tab is selected
SlidingTab UI

When second tab is selected.
SlidingTab UI 2

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

UI 1UI 2

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.

How to&Answers:

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

enter image description here

enter image description here

Answer:

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>

Answer:

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

Answer:

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.

Answer:

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.

Make beige corners overlap dark blue rectangle

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/

Answer:

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.

Answer:

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