Xamarin Androit Tab in TabLayout custom style round corners

Question

I have a question if is possible make Tabs in TabLayout looks like this:

I have this code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/main_light_gray">
    <include
        layout="@layout/toolbar_layout_filter_sales" />
    <android.support.design.widget.TabLayout
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        local:tabIndicatorColor="@color/main_red"
        local:tabIndicatorHeight="0dp"
        local:tabGravity="center"
        local:tabBackground="@drawable/tab_background_selector"
        local:tabMode="fixed"
        local:tabPaddingStart="20dp"
        local:tabPaddingEnd="20dp"
        local:tabTextColor="@color/main_dark_text"
        local:tabSelectedTextColor="@color/white" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        local:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>

tab_background_selector :

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

  <item android:drawable="@drawable/tab_rounded_pressed" android:state_selected="true"/>
  <item android:drawable="@drawable/tab_rounded_base"/>

</selector>

tab_rounded_pressed:

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

  <corners
    android:radius="50dp"/>

  <solid
    android:color="#FFE32C0C"/>

  <gradient
    android:angle="45"
    android:endColor="#FFA4000F"
    android:startColor="#FFE32C0C"
    android:type="linear" />

</shape>

tab_rounded_base:

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

  <corners
    android:radius="50dp"/>

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


</shape>

But it looks like this:

I dont know how to make white background on one side when I have there rounded background.... I know I can change drawable in Listener like TabSelected or TabUnselected but how I can make drawables for this?

Answer 1

You have already set the tab item's background using local:tabBackground what you need to do now is just set the TabLayout's background using android:background:

1. Create a tablayout_background.xml in drawable folder:

   <shape xmlns:android="http://schemas.android.com/apk/res/android">
       <solid android:color="#FFFFFF"/>
       <corners android:radius="50dp"/>
       <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
   </shape>
   

2. Set android:background of your tablayout:

   <android.support.design.widget.TabLayout
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:background="@drawable/tablayout_background"
       app:tabIndicatorHeight="0dp"
       ...>
   

Notes: app:tabIndicatorHeight="0dp" will remove the underlines.