Rounded corners for TABS in android

java android xml tabs

11,221

Solution 1

I think you should use 4 shapes:

for left button not selected
for left button selected
for right button not selected
for right button selected

And then write selector to use for button background, see example for the left button (for the right just the similar):

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true">
<shape android:shape="rectangle">
  <corners
    android:topLeftRadius="10dp"
    android:bottomLeftRadius="10dp"/>
  <gradient
    android:startColor="#000"
    android:endColor="#000"
    android:gradientRadius="400"
    android:angle="-270"/>
</shape>
</item>

<item>
    <shape android:shape="rectangle">
      <gradient
        android:angle="90"
        android:startColor="#880f0f10"
        android:centerColor="#8858585a"
        android:endColor="#88a9a9a9"/>
   <corners
      android:topLeftRadius="10dp"
      android:bottomLeftRadius="10dp"/>
</shape>
</item></selector>

Solution 2

In java file, put this

 tabs.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.roundedcorners);

roundedcorners.xml:

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:bottomLeftRadius="0dp"
       android:bottomRightRadius="0dp" 
       android:topLeftRadius="5dp"
       android:topRightRadius="5dp" />
 </shape>

Solution 3

Created alternate shapes to solve the problem

Note: These xml files are in addition to the two mentioned.

SELECTED TAB ALTERNATE.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle"
>
<corners
 android:topLeftRadius="10dp"
 android:bottomRightRadius="10dp"/>

<gradient
  android:startColor="#000" 
  android:endColor="#000"
  android:gradientRadius="400"
  android:angle="-270"/>

</shape>

UNSELECTED TAB ALTERNATE.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient 
 android:angle="90" 
 android:startColor="#880f0f10" 
 android:centerColor="#8858585a" 
 android:endColor="#88a9a9a9"/>

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

</shape>

Afterwards, add this in your tab selection listener.

    @Override
    public void onTabSelected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            int selectedTabPosition = tab.getPosition();


            View firstTab = ((ViewGroup)    tabLayout.getChildAt(0)).getChildAt(0);
            View secondTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1);


            if (selectedTabPosition == 0)
            { // that means first tab
                firstTab.setBackground(getDrawable(R.drawable.selected_tab));
                secondTab.setBackground(getDrawable(R.drawable.unselected_tab));


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

                firstTab.setBackground(getDrawable(R.drawable.selected_tab_alternate));
                secondTab.setBackground(getDrawable(R.drawable.unselected_tab_alternate));


            }
        }

Solution 4

For those who still looking for solution. This is what i done.Put tablayout inside MaterialCardView,

 <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            app:cardCornerRadius="12dp"`enter code here`
            app:strokeColor="?attr/colorAccent"
            app:strokeWidth="1dp">
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="27dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="?attr/colorAccent"
                app:tabIndicatorGravity="stretch"
                app:tabMaxWidth="0dp"
                app:tabMode="fixed"
                app:tabSelectedTextColor="@android:color/white"
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
                app:tabTextColor="?attr/colorPrimary">
            </com.google.android.material.tabs.TabLayout> 
     </com.google.android.material.card.MaterialCardView>

tabselector_backgroud.xml:

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

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/gradient_tab_selected" 
 android:state_selected="true" />
<item android:drawable="@drawable/gradient_tab_unselected" 
  android:state_selected="false" />
</selector>

gradient_tab_selected.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" >
<gradient
    android:angle="90"
    android:centerColor="@color/lime"
    android:endColor="@color/lime"
    android:startColor="@color/lime"
    android:type="linear" />
 </shape>

gradient_tab_unselected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"`enter code here`
        android:centerColor="@color/white"
        android:endColor="@color/white"
        android:startColor="@color/white"
        android:type="linear" />
</shape>

Solution 5

I think this can be done with one drawable for one view. For 2 tab need only 2 drawable. This will also worked for tabs with border color.

For Left Tab:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:state_selected="false">
    <layer-list >

      <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>
  </item>

  <item android:state_selected="true">
    <layer-list >

      <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>

  </item>

</selector>

Left Tab Background Preview:

For Right Tab:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="false">
    <layer-list >
        <item>
         <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
         </shape>

        </item>

        <item  android:left="-10dp">
         <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
         </shape>
        </item>

    </layer-list>

</item>
<item android:state_selected="true">
    <layer-list >
      <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:left="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>

</item>


</selector>

Right Tab Background Preview:

If there is more than 2 tabs Then this if for Middle Tab:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:state_selected="false">

  <layer-list >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
        </shape>

    </item>

    <item  android:left="-10dp" android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
        </shape>
    </item>

  </layer-list>

 </item>
 <item android:state_selected="true">

   <layer-list >

    <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

    </item>

    <item  android:left="-10dp" android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
    </item>

   </layer-list>

 </item>

</selector>

Middle Tab Background Preview:

Drawables have both selected and unselected state

View more solutions

11,221

Author by

Vinoth

I love programming and I love designing. Puzzles are like little children waiting to be picked up and getting pampered with love. I am a freelancer and work with a competitive edge.

Updated on June 14, 2022

Comments

Vinoth almost 2 years

I want to achieve rounded corners for the tab that I've constructed in my application. So far I was able to come up with this enter image description here

I would like my rounded corners to look as so. (I've coded it in such a way that only the right and left corners appear but when the states change it looks like the above image) enter image description here

Below is the code that I've written so far. How can I achieve proper rounded corners through code ?

SELECTED TAB.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners
    android:topRightRadius="10dp"
    android:bottomLeftRadius="10dp"/>

<gradient
    android:startColor="#000" 
    android:endColor="#000"
    android:gradientRadius="400"
    android:angle="-270"/>

</shape>

UNSELECTED TAB.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient 
android:angle="90" 
android:startColor="#880f0f10" 
android:centerColor="#8858585a" 
android:endColor="#88a9a9a9"/>

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

</shape>

Thanks for your response !! :)