Android Tab Layout tabs with round corners

Question

This type of Question has already been asked before but not got any proper,working solution so I am again posting this question.Sorry for asking again and wasting your time. Please give some working solution. Or let me know if I am doing anything wrong. Thanks in advance.

Expected Tabs:

But coming Like:

Coming Tabs

On page Load tabs are coming like "Expected Tabs" image but after selection coming like "Coming Tabs" image. MainXML code:

 <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                style="@style/MyCustomTabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/background_img_jpeg"
                android:minHeight="10dp"
                android:padding="10dp"
                app:tabGravity="fill"
                app:tabIndicatorColor="@color/TRANSPARENT"
                app:tabMode="fixed"
                app:tabTextColor="@color/blue" />

@style/MyCustomTabLayout

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabBackground">@drawable/tab_bg</item>
    </style>

@drawable/tab_bg

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

@drawable/tab_bgselected

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:bottom="0dp"  android:top="0dp"
          android:left="0dp" android:right="0dp" >
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners
                android:topLeftRadius="10dp"
                android:bottomLeftRadius="10dp">
            </corners>
        </shape>
    </item>
</layer-list>

Like that @drawable/tab_bgnotselected

And in code behind i have written:

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                try {
                    mViewPager.setCurrentItem(tab.getPosition());
                    TabPosition = tab.getPosition();
                    TabCount = tabLayout.getTabCount();

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

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

                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                    Log.i("TabPosition:--->", TabPosition + "");
                    Log.i("TabCount:--->", TabCount + "");

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                try {

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

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

            }
        });

Bluebottle

Answer 1

You can use MaterialCardView with appropriate cardCornerRadius as a parent layout of TabLayout to achieve this one side rounded corner background. Then you can use tabIndicatorColor to colorize the tab selected layout. Hope this will help you. Thanks

Code Snippet:

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

Output:

Marco

You also need app:tabIndicatorFullWidth="true" to make it works – Irreparable

Answer 2

If anyone looking for this type look(as shown in picture below) to tab layout

In Xml TabLayout

<com.google.android.material.tabs.TabLayout
        android:id="@+id/images_videos_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_20sdp"
        android:layout_marginStart="@dimen/_10sdp"
        android:layout_marginEnd="@dimen/_10sdp"
        android:layout_marginTop="@dimen/_10sdp"
        android:background="@drawable/tabview_bg"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabMode="fixed"
        app:tabIndicatorHeight="0dp"
        app:tabRippleColor="@null"
        app:tabSelectedTextColor="@android:color/white"
         />

In Your Activity/Fragment

adding only customization code for brevity

val tabCount: Int = images_videos_tab_layout.tabCount

    for (i in 0 until tabCount) {
        val tabView: View = (images_videos_tab_layout.getChildAt(0) as ViewGroup).getChildAt(i)
        tabView.requestLayout()
        ViewCompat.setBackground(tabView,setImageButtonStateNew(requireContext()));
        ViewCompat.setPaddingRelative(tabView, tabView.paddingStart, tabView.paddingTop, tabView.paddingEnd, tabView.paddingBottom);
    }

fun setImageButtonStateNew(mContext: Context): StateListDrawable {
    val states = StateListDrawable()
    states.addState(intArrayOf(android.R.attr.state_selected), ContextCompat.getDrawable(mContext, R.drawable.tab_bg_normal_blue))
    states.addState(intArrayOf(-android.R.attr.state_selected), ContextCompat.getDrawable(mContext, R.drawable.tab_bg_normal))

    return states
}

In Drawable

1.tab_bg_normal

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/transparent" />
</shape>

2.tab_bg_normal_blue

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/baseThemeColor" />
<corners android:radius="25dp" />
</shape>

3.tabview_bg

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="25dp"/>
<stroke android:color="@color/baseThemeColor" android:width="1dp"/>
<solid android:color="#00000000"/>
</shape>

Nachison

Answer 3

Result of below code:

Use 4 shapes (No need of selector) like:

1. tab_left_select.xml

   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item >
           <shape android:shape="rectangle">
               <solid android:color="@color/blue" />
               <corners
                   android:topLeftRadius="8dp"
                   android:bottomLeftRadius="8dp">
               </corners>
           </shape>
       </item>
   </layer-list>
   

2. tab_left_unselect.xml

   • Same as above just change the color.

3. tab_right_select.xml

   • Same as above just change the radius direction to right.

4. tab_right_unselect.xml

   • Same as above just change the color and radius direction to right.

In Your layout:

<android.support.design.widget.TabLayout
        android:layout_margin="@dimen/activity_vertical_margin"
        android:id="@+id/tabs"
        app:tabTextColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabIndicatorColor="#00000000"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

In your Activity/Fragment:

tabLayout = (TabLayout)view.findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
        setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(tabLayout.getSelectedTabPosition()==0) {
                    setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
                }
                else {
                    setTabBG(R.drawable.tab_left_unselect,R.drawable.tab_right_select);
                }
            }
            ....
        });

private void setTabBG(int tab1, int tab2){
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN_MR1) {
            ViewGroup tabStrip = (ViewGroup) tabLayout.getChildAt(0);
            View tabView1 = tabStrip.getChildAt(0);
            View tabView2 = tabStrip.getChildAt(1);
            if (tabView1 != null) {
                int paddingStart = tabView1.getPaddingStart();
                int paddingTop = tabView1.getPaddingTop();
                int paddingEnd = tabView1.getPaddingEnd();
                int paddingBottom = tabView1.getPaddingBottom();
                ViewCompat.setBackground(tabView1, AppCompatResources.getDrawable(tabView1.getContext(), tab1));
                ViewCompat.setPaddingRelative(tabView1, paddingStart, paddingTop, paddingEnd, paddingBottom);
            }

            if (tabView2 != null) {
                int paddingStart = tabView2.getPaddingStart();
                int paddingTop = tabView2.getPaddingTop();
                int paddingEnd = tabView2.getPaddingEnd();
                int paddingBottom = tabView2.getPaddingBottom();
                ViewCompat.setBackground(tabView2, AppCompatResources.getDrawable(tabView2.getContext(), tab2));
                ViewCompat.setPaddingRelative(tabView2, paddingStart, paddingTop, paddingEnd, paddingBottom);
            }
        }
    }

Kaltman

Answer 4

I think you should use 4 shapes: 1) for left button not selected 2) for left button selected 3) for right button not selected 4) 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:topRightRadius="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:topRightRadius="10dp"
      android:bottomLeftRadius="10dp"/>
</shape>
</item>

for more detail visit here. Rounded corners for TABS in android

Zerlina

after selecting 2nd tab its coming like "Coming Tabs" mentioned in my question above. – Bluebottle

Answer 5

Form a previous answer here on StackOverflow for a creative developer that I didn't remember where it is, that can be done easily by having a card view as a parent view for the TabLayout

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include2"
        app:tabBackground="@drawable/tab_color_selector"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@color/white"
        app:tabTextAppearance="@style/AppTheme.CustomTabText"
        app:tabTextColor="@color/green">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Today’s menu" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Full Menu" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Reviews" />

    </com.google.android.material.tabs.TabLayout>

</androidx.cardview.widget.CardView>

Tomlin

where is tab_color_selector and @style/AppTheme.CustomTabText ? – Wingspread

Answer 6

I think you should use for all corners

 <?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
     <gradient 
         android:startColor="#SomeGradientBeginColor"
         android:endColor="#SomeGradientEndColor" 
         android:angle="270"/> 

    <corners 
         android:bottomRightRadius="7dp" 
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp" 
         android:topRightRadius="7dp"/> 
</shape> 

check how to use this in button or layout

http://www.techamongus.com/2017/02/android-layouts-with-round-corners.html

Moureaux

Answer 7

With the Material-Design, we can make it simply by using MaterialButtonToggleGroup and adding MaterialButtons for the tabs.

<com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/buttonGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:checkedButton="@+id/nearest">

            <com.google.android.material.button.MaterialButton
                android:id="@+id/nearest"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Nearest" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/alphabetical"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Alphabetical"/>

        </com.google.android.material.button.MaterialButtonToggleGroup>

refer this link for more info - https://material.io/develop/android/components/material-button-toggle-group/

Manchester

Answer 8

I'd like to share my answer: (In my case, I JUST ADD Cardview above tabLayout and set radius corner).

<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/rlEmpty">

    <androidx.cardview.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cvTab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="20dp"
        card_view:cardElevation="0dp">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/result_tabs_home"
            style="@style/customTabLayout2"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/tab_color"
            android:elevation="0dp"
            app:tabIndicatorColor="@color/tab_indicator"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/customTabLayout" />
    </androidx.cardview.widget.CardView>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpagerhome"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/cvTab" />
</RelativeLayout>

Solarism