How to add rounded outer corners around all TabLayout Tabs and have square corners for inner tab borders on Android

user_423199 0
Viewed 186

My current Android application employs a com.google.android.material.tabs.TabLayout

with three tabs.

I wish to have a border with rounded corners (consisting of a stroke width = 2dp NOT full colour) around the three tabs. however I want to have straight lines between the three tabs.

I am very close to the desired effect however I am stuck with both round and square corners. is there a simple way to achieve my desired result?

here are the drawables I have used

 <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin4"
            android:background="@drawable/tab_layout_round_border"
            app:tabBackground="@drawable/tab_layout_border"
            app:tabGravity="fill"
            app:tabIndicatorHeight="0dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="0dp"
            app:tabTextAppearance="@style/Tab.TextAppearance.Literal"
            app:tabTextColor="?android:attr/textColorPrimary" />

@drawable/tab_layout_round_border

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@color/secondaryColor" />
    <solid android:color="@android:color/transparent" />
    <corners android:radius="5dp" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

@drawable/tab_layout_border

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="@color/secondaryColor" />
    <solid android:color="@android:color/transparent" />
    <corners android:radius="0dp" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

heres what it resembles

enter image description here

Once I have this working I also need to fill in the selected Tab with the same colour as the border is drawn with

android-tablayout android-drawable android
1 Answers

Instead define app:tabBackground="@drawable/tab_layout_border" in xml you may apply this in a specific TabItem programmatically . While you define it in xml , its causing conflict , I mean its applying to your all three items . If we look your attached image then we can see first One and last Three Item making issue here .

So we will try to apply the tab_layout_border only in Item Two . I am not sure that will help or not for your project , but you may check -

 <com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/margin4"
    android:background="@drawable/tab_layout_round_border"
    app:tabGravity="fill"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed"
    app:tabPaddingEnd="0dp"
    app:tabPaddingStart="0dp"
    app:tabTextAppearance="@style/Tab.TextAppearance.Literal"
    app:tabTextColor="?android:attr/textColorPrimary" />

Also you can use stroke width = 2dp in @drawable/tab_layout_border

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
    android:width="2dp"
    android:color="@color/secondaryColor" />
<solid android:color="@android:color/transparent" />
<corners android:radius="0dp" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

example code-

    TabLayout tabLayout = findViewById(R.id.tab);
    tabLayout.addTab(tabLayout.newTab().setText("One"));
    tabLayout.addTab(tabLayout.newTab().setText("Two"));
    tabLayout.addTab(tabLayout.newTab().setText("Tree"));

    ViewGroup tabItem = (ViewGroup) tabLayout.getChildAt(0);
    for (int i = 0; i < tabItem.getChildCount(); i++) {
        View tabView = tabItem.getChildAt(i);
        if (tabView !=null && i == 1) {
            int paddingStart = tabView.getPaddingStart();
            int paddingTop = tabView.getPaddingTop();
            int paddingEnd = tabView.getPaddingEnd();
            int paddingBottom = tabView.getPaddingBottom();
            ViewCompat.setBackground(tabView, AppCompatResources.getDrawable(getApplicationContext(), R.drawable.tab_layout_border));
            ViewCompat.setPaddingRelative(tabView, paddingStart, paddingTop, paddingEnd, paddingBottom);

        }
    }

Output- enter image description here

user_43273050
Related