Custom TabLayout with rounded corners

user_1270400 0
Viewed 5691

I want to create a tablayout like this:

enter image description here

As you can see, i have rounded corners for tab layout background. I tried following code:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<android.support.design.widget.TabLayout
    android:id="@+id/tabs2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="#CECECF"
    app:tabBackground="@drawable/tab_bar_bg"
    app:tabMode="fixed"
    app:tabGravity="fill"/>

And result:

enter image description here

Is there a way to achive this rounded corners with tablayout? If answer is yes then what is my roadmap?

Ps: Don't mind the icons or icon colors on screenshot.

android
2 Answers

Add this file to your drawable directory and add it to as background in your custom tab layout.

shape.xml

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

    <corners
        android:bottomLeftRadius="16dp"
        android:bottomRightRadius="16dp"
        android:radius="32dp"
        android:topLeftRadius="16dp"
        android:topRightRadius="16dp" />

    <solid android:color="@color/tab_color" />

    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

    <size
        android:height="32dp" />


</shape>
user_47378180

Set TabLayout > backgroung like this

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/tab_background"/>
    <stroke android:color="@color/tab_border" android:width="1px"/>
    <corners android:radius="@dimen/tab_corner_radius"/>
</shape>
user_18290710
Related