带有圆角的 Android 选项卡布局选项卡 [英] Android Tab Layout tabs with round corners

问题描述

这种类型的问题之前已经被问过，但没有得到任何适当的、有效的解决方案，所以我再次发布这个问题.抱歉再次提问并浪费您的时间.请给出一些有效的解决方案.或者让我知道我是否做错了什么.提前致谢.

预期标签:

但是来了:

即将到来的标签

页面上的加载选项卡像预期选项卡"图像一样，但选择后像即将到来的选项卡"图像.MainXML 代码:

 
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) {

            }
        });

解决方案
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:


                        
这篇关于带有圆角的 Android 选项卡布局选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！