Round SlidingTabs Android Tabs

Question

I use SlidingTabs to create two tabs. The tab user interface should look like this:

When the first tab is selected

When the second tab is selected.

(Pay attention to the right angles of the blue rectangle)

I use the following selector to create the user interface 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 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 a dark blue color. Using the code above, I get the following:

I can, of course, remove the corner element from round_corner_rectangle to get a blue background instead of a straight line. If I make the right side of the blue rectangle straight when another tab is selected, the rectangle is rounded on the other side.

What should I do to get the interface as shown in the first image?

Update: - As you can see from my code, I have no problems creating round corners, the problem is related to right angles on the selected tab. If I just add round corners when the second tab is selected, the corners are rounded on the other side.

Answer 1

Ok, first of all, just create this simple drawable xml rectangle. and don’t worry about the angles we are going to create 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 that you change the tab. You must extract the position of the selected tab using the listeners in the selected TabPosition variable. I am not writing full code 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 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 tried when I clicked the button

Answer 2

Use this xml and A / c to change the radius. Used to set a rounded corner

 <?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 3

This code works great on Android 4.0 and above and will give you the result you were talking about, and don't judge the code with 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 using a 9-patch image.

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

Answer 4

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 the right tab (button), change it as follows:

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

and use it in your xml selector.

Answer 5

Have you tried to make your blue rectangle with all right angles and just make your beige corners to overlap the rectangle so that its right angles are not visible? This should make it work as you want.

Another possible solution is to use some kind of third-party library, for example

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

You may also want to check this site to find libraries:

https://android-arsenal.com/

Answer 6

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

Easy to set up and easy to set selected and unselected states.

Answer 7

use the following code in the rounded_corner.xml file in a portable 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 the following in activity_main.xml

 <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" /> 

what he